HTML5 теги, о которых многие не знают

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

Упорядочиваем элементы выпадающего списка с тегом <optgroup>

Тег <optgroup> является одним из самых старых, но, как ни странно, разработчики часто упускатют его из виду.
Тег используется для управления формой, созданной при помощи тега <select>, и позволяет группировать элементы списка <options>. Особенностью тега <optgroup> является то, что его содержимое не выделяется как обычный элемент списка, а акцентируется жирным шрифтом. Кроме того, все элементы, входящие в группу, смещаются вправо от своего исходного положения. Например:

 

Список достпуных значений — тег <datalist>

Тег <datalist> позволяет задать список вариантов, которые можно выбрать при вводе информации в текстовое поле. Этот список появляется при получении полем ввода фокуса (Internet Explorer 10 и Opera), или при начале набора текста (Firefox и Chrome). При вводе текста будут показываться варианты (в виде выпадающего списка), которые совпадают по последовательности введенных букв (символов). Следующий пример иллюстрирует создание поля для ввода адреса веб-сайта.

 

Помечаем менее важные элементы тегом <small>

Возможно, вы уже использовали тег <small>; раньше (и даже не один раз). Этот тег делает именно то, что по вашему мнению, он должен делать — он уменьшает размер шрифта, помеченного этим тегом текста. Однако, уменьшение размера шрифта на самом деле является побочным явлением при использовании HTML5 тега <small>.
Спецификация для тега <small> указывает, что этот тег должен использоваться, чтобы показать, что помеченный этим тегом текст имеет для пользователя меньшую важность. Браузер интерпретирует это уменьшая шрифт, делая текст менее заметным для пользователя. Пример:

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

Контекстное выделение текста тегом <mark>

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

Пример использования:

Мы находимся на странице под названием «Самые дешевые турпакеты», и видим список турпакетов, отсортированных по цене. Сначала идут самые дешевые, а заканчивается спиcок самыми дорогими.

Для первых двух результатов, цена (тот параметр, который важен для нас) выделен тегом <mark>. Однако третий результат — тот, где цена гораздо выше — не отмечен тегом тегом <mark>, так как он не так актуален для нас, как остальные.

Вставка, удаление и корректрировка с помощью тегов <ins>, <del> и <s>

Теги <ins>, <del> и <s> могут быть полезны, когда вы имеете дело с контентом, который был обновлен или актуальность которого изменилась.
Тег <ins> определяет текст, который был добавлен к документу, т.е. он определяет новый контент. Вы можете использовать этот тег для выделения текста, который был добавлен или актуальность которого изменилась для вашего контента.
Тэг <del> определяет текст, который был удален из документа, он помечает удаленный контент. Не смотря на то, что этим тегом помечается удаленный контент, он по-прежнему физически остается в документе, как запись о том, что было удалено.
Оба эти тега поддерживают два дополнительных атрибута — атрибут cite для ссылок на ресурс, который объясняет произведенное изменение, а также атрибут datetime для пояснения, когда это изменение было сделано. Атрибут datetime должно содержать корректную DateTime-строку. К сожалению, понимание формата таких строк требует некоторых усилий. Но, вы можете использовать генератор временных меток, чтобы упростить их создание.
Тег <s> отвечает за уже не актуальный контент на странице. Например он часто используется на коммерческих сайтах, где часто меняются цены и цифры. Тег <s> не используется для обозначений изменений в тексте. По умолчанию тег зачёркивает текст. Пример использования этих тегов:

 

Цитирование с помощью тегов <q> и <blockquote>

Многие используют теги <div> или <spa> с добавлением css-стилей, чтобы выделить цитаты в тексте. Однако, HTML5 позволяет использовать для этих целей теги <q> или <blockquote>. Оба этих тега предназначены для выделения внешних цитат (когда вы цитируете какой-то внешний источник). Различаются они только тем, для цитат какого размером они предназначены.
Согласно спецификации, тэг <q> следует использовать для выделения «короткий» однострочной цитаты.
Тег <blockquote>, с другой стороны, следует использовать для больших объёмов текста. Например:
Для небольших цитат, используйте <q>:

Если у вас есть более длинная цитата или что-то более сложное, вы можете использовать тег <blockquote>:

Для приведенного выше примера, мы обернули длинную цитату тегом <blockquote> и добавили как атрибут cite для ссылки на ресурс, так и тег <cite>, для пояснения, что это за ресурс.
Оба рассмотренных тега поддерживают и атрибут cite, и вложенный тег <cite>.

Источник: http://www.improgrammer.net