Знаете ли вы эти HTML5 теги?

0
171

Если вы являетесь веб-разработчиком, то, вероятно, вы сталкивались с целым рядом различных тегов при создании будущей веб страницы. Скорей всего, вы уже знаете о таких часто используемых тегах, добавленных в HTML 5, как <article>, <header> и <footer>, но, не смотря на это, вы можете не знать о менее распространенных тегах, которые могут значительно помочь вам при работе.

html5

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

Для каждого тега мы рассмотрим спецификацию W3C и продемонстрируем практическое применение на примерах.

Пару слов об интерпретации.

Несмотря на то, что спецификация W3C считается исчерпывающим источником, иногда им все же не хватает практических примеров, из-за чего приходится самостоятельно разбираться, как использовать необходимы теги.

Вы, возможно, использовали эти теги ранее, только, скорей всего, по-другому. Зачастую не существует определенных установок о том, что является хорошей практикой. Приведенные ниже примеры являются просто моей собственной рекомендацией о том, как использовать эти теги.

1. Смысловое выделение с помощью тега <mark>.

В спецификации тега <mark> говорится о том, что его желательно использовать для обозначения «релевантности» или же для «привлечения внимания».

Например, если вы ищите сайт с ключевым словом «jQuery» и вам отображается несколько статей, то результат поиска вы можете обернуть в тег <mark>. Данный тег как бы говорит: «Эй, это как раз является релевантным, это как раз то, что ты ищешь».

Пример.

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


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

Большинство людей считают, что с помощью данного тега можно быстро стилизовать что-либо, но это не так. Целью этого тега не является просто стилизация, вы можете использовать тег <span> для этих целей.

Так же не стоит использовать этот тег для выделения важности или же для выделения текста жирным шрифтом — для этого служит тег <strong>. Используйте <mark> когда вы хотите определить, что что-то релевантно для конкретного пользователя. Данный тег отображается в браузере при использовании режима высокой яркости на Windows.

2. Менее важные части с помощью тега <small>.

Скорей всего вы уже использовали данный тег ранее. Да, он делает как раз то, о чем вы подумали — делает текст меньше. Браузер может сделать ваш текст меньше, но на самом деле это побочный эффект использования данного тега, а не основное предназначение.

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

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

Пример.

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

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


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

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

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

Спецификация говорит о том, что <q> должен использоваться для определения «не большой, короткой цитаты», а <blockquote> для более больших цитат.

На практике тег <q> используется для небольших цитат, а для всего остального есть mastercard <blockquote>. Так же помните, что не стоит использовать данный тег для стилизации (используйте для этого <span>)

Пример.

Давайте рассмотрим, как можно использовать оба тега.

Если у вас есть небольшая цитата, используйте <q>:

Если же цитата больше или сложнее, вы можете обернуть ее в <blockquote>.

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

Оба этих тега поддерживают как атрибут cite, так и тег <cite>.

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

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

Данные теги полезны, когда вы работаете с контентом, который был изменен или же была изменена его релевантность.

Тег <ins> применяется к тексту, который был только что добавлен в документ. Вы можете использовать этот тег для выделения текста, который был добавлен или же для текста, релевантность которого была изменена.

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

Эти два тега поддерживают 2 необязательных атрибута — cite, для указания ссылки на ресурс, где объясняются изменения. Также существует атрибут datetime, для указания того, когда произошли изменения. Дата должна быть задана в виде строки, которую, к сожалению, не так просто понять. Вы можете схитрить и использовать формат timestamp.

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

Пример.

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

Другой пример показывает, как можно использовать <del> в приложении для заметок. Тег применяется, когда контент больше не существует (и не был изменен).


Вы можете видеть, что 2 задачи выполнены, так как они обернуты тегом <del>. Это показывает пользователю (и браузеру), что контент больше не существует. Для обоих случаев мы применили атрибут datetime, это удобная вещь для того, чтобы отслеживать выполнение задач.

Тег <s> лучше всего использовать, когда контент был удален и затем обновлен, например, при редактировании документа:


В примере выше мы внесли поправки в некоторые части информации, указывая URL внутри тега <s> где это возможно.

5. Организация <select> списков с помощью <optgroup>.

Этот тег один из самых старых, но, несмотря на это, разработчики часто не обращают на него внимания.

Optgroup используется внутри тега <select> для упорядочивания  элементов <option>.

Если у вас десятки или сотни опций внутри поля select, отличной идеей будет распределить их по категориям.

<optgroup> должен находится внутри тега <select> и содержать 2 атрибута — label, текст, который будет входить в список в виде заголовка группы и disabled, который будет блокировать доступ к группе списка.

Сам тег <optgroup> нельзя выбрать или стилизовать.

Пример.

<optgroup> всегда хорошо работает, когда вы используете тег <select>. Например, рассмотрим выпадающий список цен в компьютерном интернет-магазине.


Далее приведен пример использования атрибута disabled, который запрещает выбор целого ряда опций. (Хотя люди могут просто удалить этот атрибут, отредактировав код в браузере, так что особо не полагайтесь на него).

В примере ниже мы не можем ничего выбрать из группы «West Coast – Australia»

6. Предопределенные опции с помощью тега <datalist>.

Одна из самых замечательных вещей, касающихся списка <select>, наряду с   radio/checkbox это то, что datalist ограничивает выбор предустановленных вариантов пользователями. Вы можете использовать <datalist> для определения подходящего списка опций в теге <input>. Этот компонент может слегка отличаться в различных браузерах, но везде он отображается в виде маленькой стрелки справа от поля выпадающего списка, которая показывает, что тут имеются опции. При выборе обычно показываются опции. Пользователь может начать печатать и если результаты частично совпадают, то они будут показаны. (Например, если написать «Chr» внутри поля, то будет показан «Chrome»). Элемент еще только появляется, но уже работает хорошо.

Пример.

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


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

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

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

Подведем итоги!

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

Некоторые из этих тегов еще в разработке и вам еще предстоит разобраться с ними на практике. Если вы знаете еще какие-либо редкие теги, то мы всегда рады выслушать вас!

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя