
HTML5 теги, о которых многие не знают
Возможно, вы уже использовали некоторые из тегов, упомянутых в этой статье, но, не совсем так, как это делаем мы. Конечно, не существует чётких и однозначных рекомендаций по использованию этих тегов. Однако, мы попытаемся продемонстрировать как использовать опсианные ниже теги в соответствии со стандартом.
Упорядочиваем элементы выпадающего списка с тегом <optgroup>
Тег <optgroup> является одним из самых старых, но, как ни странно, разработчики часто упускатют его из виду.
Тег используется для управления формой, созданной при помощи тега <select>
, и позволяет группировать элементы списка <options>
. Особенностью тега <optgroup> является то, что его содержимое не выделяется как обычный элемент списка, а акцентируется жирным шрифтом. Кроме того, все элементы, входящие в группу, смещаются вправо от своего исходного положения. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<label for="present-price-filter"> Выберите ценовой диапазон вашего подарка </label> <select class="price-filter" name="present-price-filter" id="present-price-filter"> <optgroup label="Дешевые подарки"> <option value="100-300">100 - 300 рублей</option> <option value="301-500">301 - 500 рублей</option> <option value="501-1000">501 - 1000 рублей</option> </optgroup> <optgroup label="Подарки средней ценовой категории"> <option value="1001-3000">1001 - 3000 рублей</option> <option value="3001-5000">3001 - 5000 рублей</option> </optgroup> <optgroup label="Дорогие подарки"> <option value="5000-7000">5000 - 7000 рублей</option> <option value="7001-10000">7001 - 10000 рублей</option> </optgroup> </select> |
Список достпуных значений — тег <datalist>
Тег <datalist>
позволяет задать список вариантов, которые можно выбрать при вводе информации в текстовое поле. Этот список появляется при получении полем ввода фокуса (Internet Explorer 10 и Opera), или при начале набора текста (Firefox и Chrome). При вводе текста будут показываться варианты (в виде выпадающего списка), которые совпадают по последовательности введенных букв (символов). Следующий пример иллюстрирует создание поля для ввода адреса веб-сайта.
1 2 3 4 5 6 7 8 9 |
<label for="favourite-sites"> Выберите ваш любимый веб-сайт! </label> <input id="favourite-sites" list="site-list" name="favourite-sites" type="url" /> <datalist id="site-list"> <option value="http://www.google.ru"> </option> <option value="http://www.coderjob.ru"> </option></datalist> |
Помечаем менее важные элементы тегом <small>
Возможно, вы уже использовали тег <small>
; раньше (и даже не один раз). Этот тег делает именно то, что по вашему мнению, он должен делать — он уменьшает размер шрифта, помеченного этим тегом текста. Однако, уменьшение размера шрифта на самом деле является побочным явлением при использовании HTML5 тега <small>
.
Спецификация для тега <small> указывает, что этот тег должен использоваться, чтобы показать, что помеченный этим тегом текст имеет для пользователя меньшую важность. Браузер интерпретирует это уменьшая шрифт, делая текст менее заметным для пользователя. Пример:
1 2 3 4 5 6 7 8 9 10 11 |
<section> <article> <h3>Шерстяной свитер</h3> <em>2650</em><small> - Без НДС</small> <p> Теплый шерстяной свитер. Вы полюбите это ощущение уюта и тепла. </p> <button>Add to cart</button> </article> </section> |
В общем, если вы хотите сделать чтобы какая-то информация воспринимается как имеющая более низкую важность, чем остальной контент — используйте тег <small>
. Не стоит использовать его, чтобы просто контролировать размер элементов.
Вы не можете понизить важность контента, к которому уже применены теги <strong>
или <em>
.
Контекстное выделение текста тегом <mark>
Спецификация для тега <mark> говорит, что этот тег должен использоваться, чтобы пометить контент как «актуальный» или «требующий пристального внимания».
Термин «актуальность» трудно описать. В отличии от тегов <strong>
и <em>
, которые предназначены для указания важности теста, тег mark необходим для того, чтобы обозначить конкретные части текста, с которыми в данный момент работает пользователь и которые актуальны для него именно в этот момент.
Пример использования:
Мы находимся на странице под названием «Самые дешевые турпакеты», и видим список турпакетов, отсортированных по цене. Сначала идут самые дешевые, а заканчивается спиcок самыми дорогими.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<section class="deal-list"> <article> <h2>Отдых в Турции</h2> <p><mark>$499</mark>- 5 Ночей</p> <p>Все включено!</p> </article> <article> <h2>Отдых в Чехии</h2> <p><mark>$649</mark> - 6 Ночей</p> <p>Достопримечательности Праги и ее окрестностей</p> </article> <article> <h2>Отдых в Хорватии</h2> <p>$1199 - 5 Ночей</p> <p>Лучше гор могут быть только горы и море!</p> </article> </section> |
Для первых двух результатов, цена (тот параметр, который важен для нас) выделен тегом <mark>
. Однако третий результат — тот, где цена гораздо выше — не отмечен тегом тегом <mark>
, так как он не так актуален для нас, как остальные.
Вставка, удаление и корректрировка с помощью тегов <ins>, <del> и <s>
Теги <ins>
, <del>
и <s>
могут быть полезны, когда вы имеете дело с контентом, который был обновлен или актуальность которого изменилась.
Тег <ins> определяет текст, который был добавлен к документу, т.е. он определяет новый контент. Вы можете использовать этот тег для выделения текста, который был добавлен или актуальность которого изменилась для вашего контента.
Тэг <del> определяет текст, который был удален из документа, он помечает удаленный контент. Не смотря на то, что этим тегом помечается удаленный контент, он по-прежнему физически остается в документе, как запись о том, что было удалено.
Оба эти тега поддерживают два дополнительных атрибута — атрибут cite
для ссылок на ресурс, который объясняет произведенное изменение, а также атрибут datetime
для пояснения, когда это изменение было сделано. Атрибут datetime
должно содержать корректную DateTime-строку. К сожалению, понимание формата таких строк требует некоторых усилий. Но, вы можете использовать генератор временных меток, чтобы упростить их создание.
Тег <s> отвечает за уже не актуальный контент на странице. Например он часто используется на коммерческих сайтах, где часто меняются цены и цифры. Тег <s>
не используется для обозначений изменений в тексте. По умолчанию тег зачёркивает текст. Пример использования этих тегов:
1 2 3 4 5 6 7 8 |
<Html> <head> Insert, Delete and S tag Use</head> <body> <p>To insert new data it is mainly Used:<ins>Data</ins></p> <p>For deleting purpose:<del>Date</del></p> <p>It is look like same as strike out,<s>update</s></p> </body> </Html> |
Цитирование с помощью тегов <q> и <blockquote>
Многие используют теги <div>
или <spa>
с добавлением css-стилей, чтобы выделить цитаты в тексте. Однако, HTML5 позволяет использовать для этих целей теги <q>
или <blockquote>
. Оба этих тега предназначены для выделения внешних цитат (когда вы цитируете какой-то внешний источник). Различаются они только тем, для цитат какого размером они предназначены.
Согласно спецификации, тэг <q> следует использовать для выделения «короткий» однострочной цитаты.
Тег <blockquote>, с другой стороны, следует использовать для больших объёмов текста. Например:
Для небольших цитат, используйте <q>
:
1 2 3 4 5 6 |
<div class="big-banner"> <h2>Попробуйте наш свежий бургер!</h2> <p>Приходите и попробуйте наш самый свежий, большой и вкусный бургер. Иван Иванович сказал, что <q>Не пробовал ничего вкуснее за всю свю жизнь!</q></p> </div> |
Если у вас есть более длинная цитата или что-то более сложное, вы можете использовать тег <blockquote>
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="motivational-quote"> <blockquote cite="https://goo.gl/xnq4gx"> Что может быть на свете хуже Семьи, где бедная жена Грустит о недостойном муже И днем и вечером одна; Где скучный муж, ей цену зная (Судьбу, однако ж, проклиная), Всегда нахмурен, молчалив, Сердит и холодно-ревнив! <cite>А.С. Пушкин</cite> </blockquote> </div> |
Для приведенного выше примера, мы обернули длинную цитату тегом <blockquote>
и добавили как атрибут cite
для ссылки на ресурс, так и тег <cite>
, для пояснения, что это за ресурс.
Оба рассмотренных тега поддерживают и атрибут cite
, и вложенный тег <cite>
.
Источник: http://www.improgrammer.net