Размечаем мелкие текстовые элементы

↑

▷ Содержание

⇐ ПредыдущаяСтр 7 из 56Следующая ⇒

Дальше давайте разберём примеры разметки мелких текстовых элементов.

Авторы HTML5 предлагают использовать <b> для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования тега <b> для разметки ключевых слов в документе и лидов (первый абзац статьи в журналистике).

На макете страницы «Глоссарий» интернет-магазина электроинструмента даётся определение узкоспециализированных терминов (или ключевых слов). Предложения состоят из термина и текста, который поясняет этот термин. Название терминов при разметке можно обернуть в тег <b>.

Пример тега <b> на макете

Разметим текст «Интернет-магазин строительных материалов и инструментов для ремонта».

Пример тега <i> на макете

По задумке дизайнера внешний вид этого текста должен иметь наклонное начертание. При этом не должно быть акцентирования на тексте. В этом случае нам подойдёт тег <i> и разметка будет такой:

При описании технических данных товара необходимо чтобы пользователь обратил внимание на технику безопасности при использовании. Возможно, вы встречали подобный текст в инструкциях по применению. В макете этот текст выделен жирным начертанием. Поскольку на этом тексте есть и смысловое акцентирование, в разметке используем подходящий для этого случая тег <strong>.

Пример тега <strong> на макете

В статье с обзором дрелей серии «Bosch» хочется сделать акцент на таких важных для пользователя понятиях, как «Надёжность», «Качество сборки», «Запатентованные конструктивные решения». В разметке в этом случае поможет тег <em>:

Пример тега <em> на макете

Замечание

Для зачёркиваний обычно используется <s> — тег, который можно очень коротко определить как тег для зачёркивания. Но что он означает семантически? Это информация, которая важна, которая является частью контента, но больше не актуальна. Например, старая цена зачёркнута и вписана новая цена, старая дата зачёркнута, а новая вписана, и так далее. Когда важно показать то, что зачёркнуто, поскольку оно является частью материала, используется тег <s>.

А что же делают теги, которым посвящена целая глава спецификации: теги изменений?

Это теги для того, чтобы работать с редактурой: что мы убрали, что добавили. Это может быть очень полезно при работе с проектами или изменениями документов: какие параграфы удалены и больше не имеют значения, а какие — добавлены, заодно можно дать ссылку на причину изменений. Значение этих тегов — редакционное, и они обычно применяются в уже опубликованных документах.

Тег <ins> предназначен для того, чтобы разметить добавление в материал. Тег <del>, соответственно, чтобы разметить ту информацию, которую мы оттуда удалили. У этих тегов могут быть атрибуты cite и datetime. Атрибут datetime используется для отображения информации о дате произошедшего изменения, и, хотя это необязательный атрибут, он может быть полезным в некоторых ситуациях, а cite используется для ссылки на источник или описание произошедшего изменения.

Оба тега, <ins> и <del>, являются поточным и фразовыми элементами, то есть могут функционировать как метод выделения или как отдельный элемент внутри секции. Обычно эти теги используются для редактуры уже готового материала. Потренироваться использовать эти теги можно в задании 18 главы «Разметка текста».

Какие семантические элементы могут удаляться и вставляться этими тегами вообще? Например, абзацы или отдельные фразы.

Типичным примером использования фразового тега <span> может стать фрагмент текста, который выглядит немного иначе, чем окружающий его текст. К примеру, на макете ниже размер единицы измерения товара /кг явно меньше числа и символа рубля. Чтобы задать тексту меньший размер шрифта, можно обернуть его в тег <span> для удобства дальнейшей стилизации.

Пример тега <span> на макете

Разметка элемента будет такой:

Итог

Следуя алгоритму разметки, мы идём от общего к частному: сначала размечаем крупные блоки, а затем детализируем каждый блок. Такой подход позволяет чётко представлять структуру размечаемого документа и подробно реализовывать её. По сути, мы сначала создаём оглавление нашего документа, а затем пишем каждую его главу.

Теория~ 7 минут

Познавательные статьи:



Техника прыжка в длину с разбега

Тактические действия в защите

История Олимпийских игр

История развития права интеллектуальной собственности