Новые и старые элементы

Новые и старые элементы.

Целью разработки 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 &copy; 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 определяет дату публикации.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *