Возможно, вы уже использовали некоторые из тегов, упомянутых в этой статье, но, не совсем так, как это делаем мы. Конечно, не существует чётких и однозначных рекомендаций по использованию этих тегов. Однако, мы попытаемся продемонстрировать как использовать опсианные ниже теги в соответствии со стандартом.
Упорядочиваем элементы выпадающего списка с тегом <optgroup>
Тег <optgroup> является одним из самых старых, но, как ни странно, разработчики часто упускатют его из виду.
Тег используется для управления формой, созданной при помощи тега <select>, и позволяет группировать элементы списка <options>. Особенностью тега <optgroup> является то, что его содержимое не выделяется как обычный элемент списка, а акцентируется жирным шрифтом. Кроме того, все элементы, входящие в группу, смещаются вправо от своего исходного положения. Например:
<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). При вводе текста будут показываться варианты (в виде выпадающего списка), которые совпадают по последовательности введенных букв (символов). Следующий пример иллюстрирует создание поля для ввода адреса веб-сайта.
<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> указывает, что этот тег должен использоваться, чтобы показать, что помеченный этим тегом текст имеет для пользователя меньшую важность. Браузер интерпретирует это уменьшая шрифт, делая текст менее заметным для пользователя. Пример:
<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ок самыми дорогими.
<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> не используется для обозначений изменений в тексте. По умолчанию тег зачёркивает текст. Пример использования этих тегов:
<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>:
<div class="big-banner"> <h2>Попробуйте наш свежий бургер!</h2> <p>Приходите и попробуйте наш самый свежий, большой и вкусный бургер. Иван Иванович сказал, что <q>Не пробовал ничего вкуснее за всю свю жизнь!</q></p> </div>
Если у вас есть более длинная цитата или что-то более сложное, вы можете использовать тег <blockquote>:
<div class="motivational-quote">
<blockquote
cite="https://goo.gl/xnq4gx">
Что может быть на свете хуже
Семьи, где бедная жена
Грустит о недостойном муже
И днем и вечером одна;
Где скучный муж, ей цену зная
(Судьбу, однако ж, проклиная),
Всегда нахмурен, молчалив,
Сердит и холодно-ревнив!
<cite>А.С. Пушкин</cite>
</blockquote>
</div>
Для приведенного выше примера, мы обернули длинную цитату тегом <blockquote> и добавили как атрибут cite для ссылки на ресурс, так и тег <cite>, для пояснения, что это за ресурс.
Оба рассмотренных тега поддерживают и атрибут cite, и вложенный тег <cite>.
Источник: http://www.improgrammer.net
