В языке разметки HTML существует ряд тегов, которые по умолчанию изменяют вид текстового содержимого, то есть задают иное начертание шрифта, либо применяют к тексту некоторые эффекты оформления. Традиционно эти теги было принято подразделять на две категории: теги физической разметки, отвечающие только за стилевое оформление, и теги логической разметки, несущие смысловую нагрузку.
Сейчас, когда всё больше внимания уделяется семантике, то есть смысловому значению единиц языка, для чисто физической разметки рекомендовано использовать только средства CSS. А теги, ранее использовавшиеся для физической разметки, стандартом HTML 5 были переопределены с новыми (хотя, надо заметить, несколько запутанными) семантическими ролями.
Теги логической разметки текста
Теги логической разметки текста имеют чёткую привязку к семантике. Использовать эти теги не по назначению, например, лишь с целью изменить начертания шрифта нельзя, так как это может привести к неверному воспроизведению текста программами, считывающими текст с экрана, а также к неверной оценке и трактовке его поисковиками.
Рассмотрим подробнее каждый из тегов данной категории.
Подчёркивание акцента и важности
В разговорной речи, чтобы акцентировать внимание на отдельных словах, мы выделяем их с помощью интонации. На веб-страницах же для обозначения смыслового ударения (акцента) в тексте используется элемент <em> (сокр. от англ. emphasis — акцент, ударение, особое внимание).
Содержимым элемента <em> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать универсальные атрибуты и атрибуты событий. Закрывающий тег обязателен.
Текстовое содержимое данного элемента в браузерах обычно выделяется курсивом. Программы, считывающие текст с экрана, выделяют это содержимое с помощью определённой интонации.
При необходимости элементы <em> могут быть вложены друг в друга, причём каждый уровень вложенности указывает на большую степень акцента.
На практике элемент <em> часто используется, например, для указания явного или неявного контраста:
<p>То, что ранее называлось контентом <em>уровня блока</em>, в HTML5 называется контентом <em>потока</em>.</p>
Для более сильного же логического выделения (ударения) в тексте с целью придания фразе дополнительной выразительности в HTML используется элемент <strong>. Он указывает на то, что его содержимое имеет большое значение, важность или срочность. Это может быть предложение, которое имеет большое значение для всей страницы, или просто отдельные слова имеющие большее значение по сравнению с соседним содержимым.
Приемлемым использованием для <strong> является, например, обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы:
<p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили достаточно масла.</p>
Содержимым элемента <strong> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать универсальные атрибуты и атрибуты событий. Закрывающий тег обязателен.
Текстовое содержимое данного элемента в браузерах обычно выделяется жирным шрифтом. Оно имеет большой вес для поисковиков, а программы, считывающие текст с экрана, выделяют это содержимое определённой интонацией.
Выделение аббревиатур и акронимов
Иногда в тексте статей могут использоваться аббревиатуры — сокращения, состоящие из начальных букв слов определённого словосочетания. Многие аббревиатуры, такие как «СССР», «РСФСР», «КПРФ» или «ФСБ», хорошо известны читателям и не требуют какой-либо расшифровки. А потому выделять такие сокращения как отдельные элементы нет никакой необходимости.
Другое дело, если в тексте используется аббревиатура, известная лишь узкому кругу специалистов, и для прочих читателей требуется её расшифровка. При первом появлении в тексте такую аббревиатуру следует «обернуть» в элемент <abbr> (сокр. от англ. abbreviation) с атрибутом title в открывающем теге. Например:
<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr> обозначается протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы.</p>
Атрибут title имеет специальное семантическое значение, когда используется в теге <abbr>. Данный атрибут должен содержать полную расшифровку или описание аббревиатуры и ничего другого. В браузере значение атрибута будет отображаться в виде всплывающей подсказки (см. рис. ниже).
Кроме атрибута title в открывающем теге элемента <abbr> могут присутствовать другие универсальные атрибуты, а также атрибуты событий. Закрывающий тег для элемента обязателен.
Текст заключенный в контейнере <abbr> в браузерах обычно отображается подчёркнутым пунктирной или точечной линией. Некоторые браузеры также меняют начертание текста на капитель (small-caps). О том как изменить стиль оформления элементов <abbr> с помощью CSS я рассказывал ранее.
Частным случаем аббревиатур являются акронимы — устоявшиеся сокращения, которые применяются как самостоятельные слова и читаются не по буквам, а слитно. Акронимами являются такие сокращения, как «СПИД», «ОСАГО», «КАСКО», «ВУЗ», «DOS» и т.п.
Ранее для выделения в тексте акронимов использовался специальный элемент <acronym>, однако в последние годы он был признан избыточным, и в стандарт HTML 5 его решено было не включать. В настоящее время для выделения акронимов также рекомендовано использовать элемент <abbr>.
Выделение определений в тексте
В печатной статье, когда упоминается новый термин, при первом его упоминании в тексте он, как правило, выделяется курсивом и даётся его определение. При последующем же использовании данного термина в тексте, он считается уже известным читателю, а потому набирается обычным шрифтом.
На веб-страницах, когда в тексте упоминается новый термин или слово (первое и поясняемое употребление), для выделения этого термина используется элемент <dfn> (сокр. от англ. definition — термин, определение). Например:
<p><dfn>Капителью</dfn> в типографике называется текст, набранный прописными буквами уменьшенного размера. Чтобы подчеркнуть разницу между капителью и строчными буквами, её делают немного выше строчных, а расстояния между соседними капительными знаками увеличивают.</p>
В браузерах текст, помещённый между открывающим и закрывающим тегами <dfn>, обычно выделяется курсивом.
Содержимым элемента <dfn> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать универсальные атрибуты и атрибуты событий. Закрывающий тег обязателен.
Если в открывающем теге элемента <dfn> имеется атрибут title, значение атрибута считается определением термина. Браузеры выводят это значение на экран в виде всплывающей подсказки.
Если выделяемый термин является аббревиатурой и в элемент <dfn> вложен элемент <abbr> со своим атрибутом title, то значение атрибута тега <abbr> расценивается как определение термина.
<p><dfn><abbr title="Hubble Space Telescope">HST</abbr><dfn> является одним из самых производительных научных инструментов, когда-либо созданных. Он находится на орбите более 20 лет, просматривая небо и отправляя данные и фотографии беспрецедентного качества и детализации.</p>
Результат в браузере:
Выделение примеров программного кода
Указать, что фрагмент текста в абзаце является фрагментом компьютерного кода (например, командой языка программирования или текстом функции), позволяет элемент <code>. В большинстве браузеров содержимое элемента <code> отображается с использованием моноширинного шрифта.
Пример использования:
<p>Функция <code>selectAll()</code> выделяет весь текст в поле ввода, чтобы пользователь мог, например, скопировать или удалить текст.</p>
Содержимым элемента <code> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег элемента обязателен.
Примечание: Элемент <code> сам по себе должен представлять только короткий фрагмент или строку кода. Для представления нескольких строк кода элемент <code> следует обернуть в элемент <pre> (речь о нём пойдёт чуть далее).
Выделение имён переменных
Для выделения в тексте абзаца имён переменных (в математическом выражении или в контексте программирования) используется элемент <var> (сокр. от англ. variable — переменная). Как правило, в браузерах содержимое данного элемента отображается курсивом.
Пример использования:
<p>Объем куба равен <var>l</var> × <var>w</var> × <var>h</var>, где <var>l</var> — длина, <var>w</var> — ширина, а <var>h</var> — высота куба.</p>
Содержимым элемента <var> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег элемента обязателен.
Примечание: Если в тексте абзаца содержится описание кода компьютерной программы, будет правильным, если используемые в этом тексте имена переменных, как и другие фрагменты компьютерного кода, будут выделены с использованием элемента <code>, чтобы все встречающиеся в тексте фрагменты кода (и переменные в том числе) имели единый стиль оформления.
Выделение образцов текста, набираемого на клавиатуре
Для выделения образца текста для набора на клавиатуре или другом устройстве ввода, а также для выделения в тексте документа названий клавиш используется элемент <kbd> (сокр. от англ. keyboard — клавиатура). В большинстве браузеров содержимое данного элемента отображается с использованием моноширинного шрифта.
Пример использования элемента:
<p>В поле для логина введите <kbd>admin</kbd>, в поле для ввода пароля — цифры <kbd>1234</kbd>, после чего нажмите клавишу <kbd>Enter</kbd>.</p>
Содержимым элемента <kbd> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег элемента обязателен.
Если в образце текста для ввода присутствует название клавиши, то это название клавиши в свою очередь также выделяется с помощью вложенного элемента <kbd>. Чтобы описать образец ввода, содержащий несколько названий клавиш, можно вложить несколько элементов <kbd>, при этом внешний элемент <kbd> будет представлять весь образец для ввода, а каждое отдельное название клавиши будет заключено в свой собственный элемент <kbd>. Например:
<p>Вы можете создать новый документ воспользовавшись комбинацией клавиш <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.</p>
Для наглядности названия клавиш на экране иногда выделяют с помощью рамок. Для этого необходимо определить названия клавиш как отдельный класс key, как это сделано в примере ниже, и написать для этого класса несложное CSS-правило.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> <style> kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid #1E90FF; } </style> </head> <body> <p> Вы можете создать новый документ воспользовавшись комбинацией клавиш <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>. </p> </body> </html>
Результат в браузере будет следующим:
Выделение образцов текста, выводимого на экран программой
Для выделения образца текста, выводимого на экран компьютерной программой, используется элемент <samp> (сокр. от англ. sample — образец, пример). В качестве такого текста могут выступать сообщения выводимые программами и скриптами, названия пунктов меню, названия кнопок в диалоговых окнах и т.п. В большинстве браузеров содержимое элемента <samp> отображается с использованием моноширинного шрифта.
Пример:
<p>Я пытался загрузить свой компьютер, но получил вот такое забавное сообщение:</p> <p><samp>Keyboard not found<br> Press <kbd>F1</kbd> to continue</samp>.</p>
Внутри элемента <samp> могут использоваться вложенные элементы <kbd> для выделения названия клавиш (см. пример выше)или образов текста, введённого пользователем ранее и выведенное программой обратно на экран.
Содержимым элемента <samp> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег элемента обязателен.
Курсив, жирный шрифт, подчеркивание
В первых версиях стандарта HTML, когда CSS ещё не поддерживался или поддерживался плохо, чтобы на веб-страницах можно было отображать жирный текст, курсив или подчёркнутый текст, в стандарт были введены теги <i>, <b> и <u>.
Это были теги из категории физической разметки. Они предназначенных лишь для изменения начертания шрифта без какой-либо связи с семантикой. Однако в стандарте HTML 5 их решено было переопределить с новыми семантическими ролями.
Элемент <i>
Элемент <i> (сокр. от англ. italic — курсив) устанавливает для текстового содержимого, заключённого между открывающим и закрывающим тегами, курсивное начертание шрифта.
Сегодня данный элемент рекомендуется использовать исключительно для выделения слов или текста традиционно (!) отображаемых курсивом. К данной категории текста относятся:
- таксономические обозначения;
- идиоматический текст;
- слова на иностранном языке;
- технические термины;
- названия кораблей или судов в западных системах письма;
- фрагменты текста, которые выделяется из обычной прозы по соображениям читабельности. То есть фрагменты текста с другим семантическим значением, нежли прочий окружающий их текст. Обычно при повествовании курсивом выделяют альтернативный голос или наклонение, мысли героев повествования и т.п.
В прочих случаях, чтобы отобразить текст курсивом, авторам следует использовать элемент <span> и CSS-свойство font-style со значением italic.
Пример использования тега <i>:
<p>Каланхоэ — род тропических суккулентных цветковых растений, от широколиственных и ярких <i>Flapjack</i> до компактных <i>Kalanchoe manginii</i> или <i>Kalanchoe blossfeldiana</i>.</p>
Содержимым элемента <i> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег элемента обязателен.
Элемент <b>
Элемент <b> (сокр. от англ. bold — жирный) устанавливает для текстового содержимого, заключённого между открывающим и закрывающим тегами, жирное начертание шрифта.
Сегодня данный элемент рекомендуется использовать исключительно для выделения слов или текста традиционно (!) отображаемых жирным шрифтом. На веб-страницах данный элемент обычно применяется для выделения ключевых слов в кратком содержании, имён продуктов в отзыве и в других подобных случаях.
Если нет семантической причины использовать элемент <b>, использование элемента <span> и CSS-свойства font-weight со значением bold будет более подходящим выбором для изменения толщины текста.
Содержимым элемента <b> может быть соответствующий фразовый контент. В открывающем теге элемента могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег элемента обязателен.
Элемент <u>
Элемент <u> (сокр. от англ. underline — подчеркивание) устанавливает подчёркивание для текстового содержимого, заключённого между открывающим и закрывающим тегами.
Сегодня данный элемент рекомендуется использовать исключительно для выделения текста, имеющего некоторую форму нетекстовой аннотации. Допустимыми вариантами использования элемента являются аннотирование орфографических ошибок (см. пример ниже) и применение знака имени собственного для обозначения имен собственных в китайском тексте.
Пример аннотирования орфографических ошибок:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> <style> u.error { text-decoration: red wavy underline; } </style> </head> <body> <p>Если говорить об общепринятых правилах, то никакого «<u class="error">ихнего</u>», «<u class="error">евонного</u>» и даже «<u class="error">ейнного</u>», конечно, нет. Для обозначения принадлежности к третьему лицу в единственном и множественном числах правильно употреблять местоимения «их», «его» и «её».</p> </body> </html>
Если нет семантической причины использовать элемент <u>, использование элемента <span> и CSS-свойства text-decoration со значением underline будет более подходящим выбором для установки подчеркивания текста. Однако при использовании подчёркивания не следует забывать, что у большинства посетителей веб-страниц подчёркивание ассоциирует с гиперссылками, а потому использовать его для каких-то других целей следует как можно реже.
Надстрочный и подстрочный индексы
При написании химических формул и математических выражений нередко возникает необходимость в отображении некоторых символов, входящих в формулу или в выражение, в верхнем или нижнем индексе. Для реализации данной возможности в HTML предусмотрены теги <sup> (сокр. от англ. superscript — верхний индекс) и <sub> (сокр. от англ. subscript — нижний индекс).
Содержимым обоих элементов может быть соответствующий фразовый контент. В открывающих тегах могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающие теги элементов обязательны.
Данные элементы следует использовать исключительно для изменения положения текста в соответствии с типографскими стандартами. Не следует использовать их, например, с целью уменьшения размеров текста или же его сдвига вверх/вниз для получения какого-то визуального эффекта.
В верхнем индексе, согласно типографских стандартов, принято записывать показатели степеней в математических формулах и номера сносок в текстах (в российских изданиях). В нижнем индексе принято записывать индексы переменных в математических формулах, число атомов заданного элемента в химических формулах и номера сносок в текстах (в западных изданиях). Допустимым будет также использование верхних и нижних индексов для буквенно-цифровой записи аккордов.
Пример использования тегов <sub> и <sup>:
<p>Из таблицы видно, что даже при скорости движения 3,0⋅10<sup>4</sup> км/с, составляющей 10% скорости света, сокращение длины будет только L/L<sub>0</sub>=0,005, т.е. поправка в релятивистских формулах будет меньше 1%.</p>
Разметка контактных данных
Для выделения на веб-странице контактной информации об авторе или владельце статьи используется специальный элемент <address>. В качестве такой контактной информации может выступать, например, адрес электронной почты, номер телефона или ссылка на персональную страницу в социальных сетях. Желательно также, чтобы внутри элемента <address> (помимо контактной информации) присутствовало имя самого автора, либо название организации-владельца.
Содержимым элемента <address> может быть соответствующий потоковый контент. Однако внутри элемента не могут присутствовать заголовки, секционные теги (<section>, <article>, <aside>, <nav>), а также теги <header> и <footer>. Не допускается также вложение элементов <address> друг в друга. Непосредственным родительским элементом элемента <address> может быть либо <body> (если речь идёт об авторе или владельце страницы), либо <article> (если речь идёт об авторе или владельце статьи). В браузерах текстовое содержимое данного элемента, как правило, отображается курсивом.
В открывающем теге элемента <address> могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег обязателен.
Пример разметки контактной информации:
<article> . . . <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci. </p> <address> <p> Иванов Иван Иванович, г. Москва </p> <ul> <li>E-mail: <a href="mailto:ivanov.moskau@bk.ru">ivanov.moskau@bk.ru</a></li> <li>Телефон: <a href="tel:+77778889900">+7(495)888-99-00</a></li> </ul> </address> </article>
Блоки предварительно форматированного текста
По умолчанию браузеры игнорируют лишние пробелы в исходном коде HTML-документа, а табуляции и переводы строк преобразуют в пробел. А что же делать, если необходимо, например, точно передать кусочек программного кода? На этот случай в HTML предусмотрен элемент <pre> (сокр. от англ. preformatted text), определяющий блок предварительно форматированного текста. Текст, размещённый внутри элемента <pre>, отображается браузером моноширинным шрифтом с сохранением всех пробелов, табуляций и переносов строк между словами.
Допустимым содержимым для контейнера <pre> может быть только фразовый контент. Допустимыми родителями могут быть любые элементы, который принимают содержимое потока.
В открывающем теге элемента <pre> могут присутствовать только универсальные атрибуты и атрибуты событий. Закрывающий тег обязателен.
Пример использования элемента <pre>:
<p>Для изменения цвета шрифта на странице следует записать следующее правило:</p> <pre><code> body { color: red; } </code></pre>
Как уже было сказано ранее, если содержимым контейнера <pre> является пример программного кода, то это содержимое дополнительно следует «обернуть» в элемент <code> (см. пример выше), чтобы поисковики и программы, считывающим текст с экрана, понимали, что данное содержимое является именно программным кодом.
Для изменения цвета шрифта текстового содержимого контейнера следует воспользоваться CSS-свойством color, например:
pre code { color: #191970; }
Для имитации расцветки кода, свойственной для специализированных редакторов, следует прибегнуть к помощи элементов <span> соответствующих классов, например:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> <style> pre code { color: #191970; } .selector { color: #B22222; } .value { color: #FF0011; } </style> </head> <body> <p> Для изменения цвета шрифта на странице следует записать следующее правило:</p> <pre><code> <span class="selector">body</span> { color: <span class="value">red;</span> } </code></pre> </body> </html>
Результат в браузере:
Другие статьи по схожей тематике
