HTML5-семантика уровня текста

Помимо рассмотренных нами структурных элементов, в HTML5 пересмотрены элементы, которые раньше назывались строчными. Теперь в HTML5-спецификации они называются семантическими элементами уровня текста (http://dev. w3.org/ html5/spec/Overview. html#text-level-semantics). Рассмотрим несколько распространенных примеров.

Элемент <b>

Несмотря на то что мы часто использовали элемент <b> для стилизации, в действительности его применение означало «выделить данный текст полужирным шрифтом». Теперь его можно официально использовать просто как средство стилизации в CSS, поскольку в HTML5-спецификации он описывается следующим образом:

«…включает текст, не несущий дополнительного значения и не подразумевающий другую интонацию, например ключевые слова в Резюме. документа, названия товаров в обзоре или вступительная часть статьи».

Элемент <em>

Ладно, признаю, я тоже часто использовал <em> лишь как средство стилизации. Мне нужно исправиться, поскольку в HTML5 говорится, что этот элемент предназначен для того, чтобы:

«…подчеркнуть свое содержимое».

Следовательно, если только вы на самом деле не хотите подчеркнуть содержимое этого элемента, то используйте тег <b> или, в соответствующих случаях, <i>.

Элемент <i>

В HTML5-спецификации элемент <i> описывается так:

«.включает текст, произносимый другим тоном или на другой лад либо с иным отступлением от обычного текста в манере, указывающей на его особое качество».

Достаточно сказать, что элемент <i> служит не только для того, чтобы выделить курсивом какой-нибудь текст.

Применение семантики уровня текста в нашей разметке.

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

<! — — содержимое —>

<div id="content">

<img class="oscarMain" src="img/oscar. png" alt="atwi_oscar" />

<h1>Every year <span>when I watch the Oscars I’m annoyed…</ span></h1> <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>

<p>We’re here to put things right. </p>

<a href="#">these should have won &raquo;</a>

</div>

Мы определенно можем здесь кое-что улучшить. Прежде всего тег <span> в нашем заголовке <h1> лишен смысла в данном контексте. Поскольку мы пытаемся подчеркнуть соответствующий текст, стилизовав его, сделаем это в нашем коде:

<h1>Every year <em>when I watch the Oscars I’m annoyed…</em></h1>

Снова взглянем на нашу начальную композицию

Страница со стилизованным заголовком.

Нам также необходимо по-другому выделить названия фильмов, однако они не должны подразумевать другую интонацию. Похоже, для этого идеально подойдет тег <b>:

<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and

<b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very

Hollywood is it?</p>

СТИЛИЗАЦИЯ, ПО УМОЛЧАНИЮ ПРИМЕНЯЕМАЯ К СЕМАНТИЧЕСКИМ ЭЛЕМЕНТАМ УРОВНЯ ТЕКСТА.

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

И наконец, я не шучу, когда говорю: «We’re here to put things right» («Мы здесь для того, чтобы исправить текущее положение дел»), я не паясничаю, а хочу, чтобы пользовательские агенты знали это! Поэтому наконец заключим эту фразу в тег <i>. Вы можете заявить, что вместо него здесь следует использовать тег <em>. В данном случае этот вариант тоже отлично подошел бы, однако я собираюсь использовать <i>. Так-то вот! В результате код будет выглядеть следующим образом:

<p><i>We’re here to put things right.</i></p>

Подобно тому, как это происходит с текстом в теге <b>, браузеры по умолчанию выделяют курсивом текст в теге <i>, поэтому вносите соответствующие исправления там, где это будет необходимо.

Итак, мы добавили семантику уровня текста в имеющееся у нас содержимое, чтобы сделать разметку семантически более значимой. В HTML5 есть множество других семантических тегов уровня текста. Их полный перечень можно найти, заглянув в соответствующий раздел HTML5-спецификации по адресу: http://dev. w3.org/html5/spec/Overview. html#text-level-semantics.

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