Целью разработки HTML5 было упрощение, уточнение и организация кода. Для этого были добавлены новые теги и атрибуты, а сам язык HTML объединен с CSS и JavaScript. Но такие усовершенствования не только привели к появлению новых элементов, они коснулись и уже существующих.
<mark>
Тег <mark> был добавлен для подсветки фрагмента текста, который изначально ничем не выделялся, но из-за текущей активности пользователя обрел определенную значимость. Лучшим примером использования данного тега является отображение результатов поиска. С помощью элемента <mark> на странице подсвечиваются слова, совпадающие со строкой поиска.
<span>My <mark>car</mark> is red</span>
Если пользователь выполнит поиск по слову «car», то для оформления результата поиска можно применить код, показанный в листинге 1.19. Этот короткий код выводит результат поиска, а тег <mark> выделяет текст, который использовался в качестве строки поиска (слово «car»). В некоторых браузерах это слово по умолчанию будет подсвечиваться желтым фоном, но вы можете переопределить стиль подсветки с помощью CSS, и мы научимся делать это в последующих главах.
В предыдущих версиях для выделения текста обычно использовался элемент <b>. Однако появление элемента <mark> изменило назначение и определило новые способы использования этого и других похожих элементов:
— <em>. Следует применять для акцентирования фрагмента текста (вместо тега <i>, который использовался раньше);
— <strong>. Подчеркивает значимость текста (браузеры выделяют такой текст полужирным шрифтом);
— <mark>. Подсвечивает текст, имеющий особое значение при сложившихся обстоятельствах;
— <b>. Рекомендуется использовать только в тех случаях, когда нет другого, более подходящего элемента.
<small>
Новая специфика HTML проявляется особенно явно на таких элементах, как <small>. Раньше данный элемент предназначался для вывода текста шрифтом меньшего размера. Это ключевое слово относилось только к размеру текста, без учета его смысла. В HTML5 у элемента <small> появилось новое назначение — вывод дополнительной информации, которая обычно пишется мелким шрифтом, например юридическая информация, отказ от ответственности и т. п. (листинг 1.20).
Листинг 1.20. Юридическая информация, оформленная с помощью элемента <small>
<small>Copyright © 2011 MinkBooks</small>
<cite>
Еще один элемент, изменивший свое назначение на еще более специфичное в HTML5, — <cite>. Теперь тегом <cite> следует выделять названия источников, таких как книги, фильмы, песни и т. п. (листинг 1.21).
Листинг 1.21. Цитирование фильма с помощью элемента <cite>
<span>I love the movie <cite>Temptations</cite></span>
<address>
Элемент <address> существует уже очень давно, но теперь он стал структурным. Мы не стали использовать его в нашем шаблоне, но в некоторых ситуациях он отлично подходит для оформления контактной информации внутри элемента <article> или всего <body>.
Этот элемент можно помещать внутрь элемента <footer>, как в листинге 1.22.
Листинг 1.22. Добавление контактной информации в раздел <article>
<article>
<header>
<1п1>Заголовок статьи 2</h1>
</header>
Это текст статьи <footer>
<address>
<a href="http://www. jdgauchat. com">JD Gauchat</a>
</address>
</footer>
</article>
<time>
В оба раздела <article> нашего шаблона из листинга 1.18 мы добавили дату публикации статьи. Для этого мы использовали простой элемент <p> внутри элемента <header>. Однако для данной цели есть специальный элемент HTML5. Элемент <time> позволяет объявить дату в машинном формате, а также добавить читабельный текст с указанием даты и времени.
Листинг 1.23. Отображение даты с помощью элемента <time>
<article>
<header>
<h1>Заголовок статьи 1</h1>
<time datetime="2011-10-12" pubdate>опубликовано 10.12.2011</time>
</header>
Это текст статьи </article>
В листинге 1.23 для вывода даты публикации статьи мы заменили элемент <p> из предыдущих примеров новым элементом <time>. Значение атрибута datetime представляет собой временную отметку в машинном формате, который должен соответствовать следующему шаблону: 2011-10-12T12:10:45. Мы также добавили атрибут pubdate, который всего лишь сообщает, что значение атрибута datetime определяет дату публикации.
Добавить комментарий