Вы знаете эти 8 HTML5 тегов?

От автора: как веб-разработчик вы возможно пытаетесь выжать по максимуму из тегов во время создания нового сайта. И скорее всего вы уже хорошо знаете некоторые из основных HTML5 тегов article, header и footer. Однако вы можете не знать некоторые из менее распространенных тегов.

Некоторые из этих тегов совершенно новые или же изменили назначение из спецификации HTML4. Теги, изменившие свое назначение, могут выглядеть похоже, но им было присвоено новое значение. Теперь их можно применять в совершенно других случаях. Мы пройдемся по каждому тегу, посмотрим, что сказано в спецификации, и рассмотрим примеры их использования. Поехали!

Немного про интерпретацию

Спецификации W3C дают замечательный концептуальный обзор, но иногда им не хватает практических примеров, из-за чего сложно найти наилучшее применение этим тегам.

Вы могли использовать некоторые из этих тегов раньше – просто не так, как надо. Часто нет четких правил о том, какое применение считается хорошей практикой. Ниже приведены несколько примеров, как я рекомендую работать с этими менее известными элементами.

Контекстное выделение с помощью mark

В спецификации mark говорится, что этот тег должен использоваться для обозначения релевантности или привлечения внимания. Что такое релевантность сложно объяснить. Теги и текст релевантны, когда мы что-то делаем на сайте и они нам полезны именно в этот момент (или могут понадобиться в будущем).

К примеру, если вы искали сайт по запросу «jQuery», и вам выпало несколько статей, то результаты поиска можно обернуть тегом mark. Цель тега mark это сказать браузеру «Эй, вот эта штука на сайте подходит под то, что ты сейчас делаешь».

Практические примеры

Тег mark можно использовать для выделения релевантного контента. Чтобы проиллюстрировать пример, рассмотрим следующий сценарий: Мы открыли страницу «Самые дешевые туры». На странице расположена сетка из туров, отсортированных по цене. Туры расставлены по увеличению цены: сверху от самых дешевых и вниз к самым дорогим.

Цену туров верхнего уровня можно подсветить с помощью тега mark, так как мы и пришли на эту страницу за дешевыми турами, а они самые дешевые на странице — значит, они наиболее релевантные.

У первых двух результатов цена (которая нам важна) обернута в тег mark. А третий тур, более дорогой, не подсвечен, так как он не релевантен в отличие от двух первых.

Лучшие практики и основные аспекты

Люди в большей своей массе думают, что с помощью этого тега можно быстро что-то выделить, но его назначение не в этом. Его нельзя использовать просто для стилизации, для этого есть другой тег span. Не используйте этот тег для выделения важности текста или чтобы подчеркнуть силу – для этого есть тег strong. Используйте mark, когда хотите показать что-то релевантное конкретному пользователю. Заметка по поводу доступности – подсветка mark отображается в браузере в режиме высокой контрастности Windows.

Уменьшаем важность с помощью small

Вы, скорее всего, раньше уже использовали тег small. Он делает точно то, о чем вы подумали – уменьшает текст. Браузер может уменьшить текст с помощью тега small, но на самом деле это, скорее, побочный продукт данного элемента, а не семантическое значение.

В спецификации small говорится, что этот тег необходимо использовать для уменьшения важности текста или информации. Браузер же интерпретирует данное назначение простым уменьшением шрифта – меньший текст оказывает меньшее влияние.

Данный тег необходимо использовать для подчеркивания меньшей важности текста. Информация меньшей важности обычно используется в футере веб-сайта или в сайдбаре (подальше от основного контента).

Практические примеры

В целом, тег small говорит браузеру «Именно вот этот контент по большому счету не так важен». К примеру, в футере тег можно использовать для выделения авторского права:

Тег small даже можно использовать внутри обычного контента для выделения менее важной его части. К примеру, в списке товаров возле цены продукта можно добавить подпись «без налога»:

В общем, если вы хотите уменьшить важность чего-либо, используйте тег small. Не используйте его для простого уменьшения размера.

Лучшие практики и основные аспекты

Нельзя понизить важность или выделение контента, если к нему применены теги strong или em. Тег small изменит визуальную составляющую элемента (в зависимости от браузера), но не затронет семантику.

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

Вы скорее всего используете стилизованные div или span для выделения цитат, но лучше использовать q или blockquote. Оба тега предназначены для внешнего цитирования (когда вы что-то цитируете), однако принцип использования у них отличается.

По спецификации тег q нужно использовать для выделения «короткой строчной цитаты» в тексте. А тег blockquote используется для больших кусков текста. На практике же тег q используется для маленьких цитат, а blockquote для всех остальных. Помните, что теги нужно использовать только для цитат или ресурсов. Данные теги нельзя использовать для стилизации (для этого есть span).

Практические примеры

Рассмотрим, как можно использовать оба тега. Если у вас есть маленькая цитата, используйте q:

Если цитата больше или более сложная, ее можно обернуть тегом blockquote:

В примере выше длинную цитату мы положили в тег blockquote и использовали атрибут cite (ссылка на ресурс) и тег cite (описание ресурса).

Лучшие практики и основные аспекты

Оба элемента поддерживают атрибут cite и тег cite. С помощью атрибута cite указывается ссылка на источник (т.е. ссылка на сайт, откуда взята цитата). А тег cite используется для указания названия работы, откуда взята цитата. По поводу правильного использования тега и атрибута cite ведутся споры, но описанные мной способы применения всегда хорошо работали.

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

Теги ins, del и s полезны, когда вы работаете с контентом, который был изменен или же было изменена его релевантность. Тег ins применяется к тексту, который был недавно добавлен в документ – новый контент. Данный тег можно использовать для выделения добавленного текста или для выделения текста, чья релевантность была изменена.

Тег del применяется к удаленному из документа тексту – удаленный контент. Даже если вы выделяете удаленный контент, он все еще существует в документе в виде записи о том, что было удалено.

У этих двух тегов есть необязательный атрибут cite, который используется для добавления ссылки, где объясняются все изменения. Также есть атрибут datetime, где указывается, когда были произведены изменения. Дата должна быть задана в виде строки времени, которую, к сожалению, не так просто понять. Можно схитрить и воспользоваться timestamp generator.
Эти атрибуты полезны, если вы хотите указать контекст добавления или удаления чего-либо. Увидеть их можно в логах обновлений и списке изменений, где автор перечисляет все изменения и подробности.

Принцип работы тега s почти тот же, но вместо выделения текста, который больше неправильный, тег используется для того, чтобы браузер понял, что выделенный текст больше не релевантен, и, как правило, за ним идет текст замены (к примеру, новый контент в теге ins). Часто данный тег на страницах можно узнать по зачеркнутому тексту. Но его нельзя использовать только лишь для стилизации (для этого есть span).

Практические примеры

Представьте, что у вас есть список изменений в плагине, который вы сами разработали. На странице логов с помощью тега ins можно выделить последние обновления.

В другом примере тег del используется в приложении для заметок. Тег применяется в тех случаях, когда контент больше не существует на странице (и он не был заменен чем-либо).

Видно, что две задачи выполнены, и они были вычеркнуты с помощью тега del. Так мы показываем пользователю и браузеру, что контент больше не существует. Обоим пунктам был добавлен атрибут datetime , с помощью которого записывается дата выполнения задач. Тег s лучше всего использовать, когда контент был удален а затем обновлен, к примеру, во время редактирования документа:

В примере выше мы внесли небольшие исправления, указывая URL в теге s где это возможно.

Упорядочивание вариантов с помощью optgroup

Тег – один из самых старых, но как ни странно разработчики о нем очень часто забывают. optgroup используется внутри тега select для создания категорий элементов списка options. Если у вас десятки или сотни опций в поле select, очень удобно было бы распределить их по категориям.

Тег optgroup должен быть внутри select и у него должно быть два атрибута: label – название, которое видно, когда список раскрыт, и атрибут disabled, который нужен, когда в списке нельзя выбрать ни один из элементов. Сам тег optgroup нельзя выбрать и стилизовать (по крайней мере, чтобы это было кроссбраузерно).

Практические примеры

optgroup отлично работает в любом случае, когда используется тег select. К примеру, рассмотрим список цен на компьютеры в интернет-магазине.

Ниже приведен пример с атрибутом disabled, когда нельзя выбрать ни один из пунктов категории (но людей это не сильно остановит, они могут просто удалить его из верстки, так что не особо полагайтесь на него). В примере ниже вы не сможете выбрать пункты в разделе «West Coast – Australia».

Предварительно заданные опции с помощью datalist

Одна из самых крутых вещей у тега select, как и у radio / checkbox инпут типов это то, что он ограничивает количество возможных предварительно заданных опций пользователями.

Теперь для различных input’ов можно использовать тег datalist для создания подходящего списка опций. В разных браузерах данный компонент выглядит немного по-разному, но везде он отображается в виде маленькой стрелки выпадающего списка справа от поля, которая показывает, что у данного элемента есть опции. При нажатии на данный пункт обычно выпадают опции. Пользователь может начать вбивать название, и если есть подходящие опции, то они покажутся снизу (К примеру, в поле с опцией Chrome вы пишите «Chr», тогда «Chrome» отобразится снизу). Элемент еще в стадии разработки, но уже работает.

Практические примеры

Если вы хотите создать список URL, которые пользователь может выбрать, можно создать datalist и связать его с вашим полем input:

Заметки и основные аспекты

Тег datalist будет выполнять проверку на основе атрибута type тега input. К примеру, если вы выбрали type=»email» и привязали datalist к тегу, то опции должны соответствовать типу email. Тег использует умную обработку, которая облегчит вам контроль за значениями.

Тег datalist достаточно хорошо поддерживается в браузерах, однако Apple решили вовсе отказаться от него (и в десктопной версии и в iOS). Microsoft поддерживает данный тег с IE10 и далее (в мобильном IE поддержка отсутствует). Если поддержка отсутствует, элементы input вернутся в нормальный режим.

Небольшое предупреждение – данный компонент немного забагованный. К примеру, если пометить input атрибутом required и не вбить значение, форма не будет отправляться пока не будет выбрано значение (как и ожидается). Но если вы вручную вобьете значение (даже если оно неверно) и отправите форму, это не вызовет ошибку – просто ничего не произойдет.

Заключение

Надеюсь, вы узнали про один или два полезных тега из этой статьи и теперь можете использовать их в своих будущих сайтах! В общем и целом, семантика данных элементов понятна. Некоторые будут настаивать, что элемент Х нужно использовать способом Z, чтобы это было «правильно». Некоторые из тегов еще в разработке и в будущем вам придется искать наилучшее для них применение.

Мы всегда очень интересуемся тегом input, и если вы знаете какие-то полезные редко используемые теги, мы бы хотели узнать, как вы их используете.

Автор: Simon Codrington

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: