HTML 5 теги – обзор основных элементов новой технологии

От автора: это статья, в которой будут немного описаны новые html5 теги. Она позволит вам познакомиться с этой новой спецификацией, если вы еще не успели этого сделать.

Семантические теги html5

О некоторых новых элементах этого языка я уже писал в одной из прошлых статей (дать ссылку на статью “элементы html5”), но все же не будет лишним и здесь повторить, что это такое и с чем его едят. Итак, основная цель семантических тегов заключается в том, чтобы сделать разметку сайтов более понятной для браузеров и поисковых машин.

Например, в html5 появились теги header и footer и теперь эти элементы веб-страницы не нужно создавать через обычный div с идентификатором, как это делали раньше. Кроме этих тегов появилось еще много новых. Например, такие:

Nav – контейнер, в котором нужно располагать самые важные гиперссылки на странице. Теперь в него можно вкладывать главное меню на сайте, хотя не запрещено использовать несколько nav на странице.

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

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

Main – контейнер, в который, судя по всему, нужно заключать основное содержимое страницы. Именно текст (без заголовка и остальных типовых блоков). На данный момент все-таки не рекомендуется его использование. Лично я видел его только в одном шаблоне, а сам элемент поддерживается только в двух браузерах, даже редактор кода не подсвечивает этот тег. Возможно, его судьба решится в будущем.

Другие элементы языка html5

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

Внутрь audio или video обязательно вставляются одинарные теги source, в которых задается путь к файлу. Нужно записать несколько таких строк, потому что разные браузеры читают разные форматы. Об этом я уже писал в статье про элементы html5, где также привел пример вставки одного медиафайла.

Тег video в html5, ровным счетом как и audio, серьезно упростил задачу добавления на страницу подобных файлов. Вот пример вставки видео:

Рис. 1. Видео и элементы управления к нему.

На простой html странице появился видеоролик о новом курсе по верстке с помощью фреймворка Bootstrap. Вот он, кстати. Стоит сказать, что на реальныйсайт лучше не вставлять видео тем способом, который я использовал только что. Вернее, не совсем так. Заметьте, что тут я записал только один одинарный тег source, в котором указал путь к файлу mp4 и соответствующие кодеки. Для полной кроссбраузерности вам придется указывать видео в трех форматах (также ogg и webM).

Details – очень интересный элемент, который впервые позволил скрывать какую-то информацию и разворачивать ее по клику без использования javascript. Текст, который по умолчанию записывается в этот контейнер, не виден на странице. Вместо этого появляется строка со словом “Подробнее”, клик по которому и развернет нашу информацию.
Давайте я покажу пример:

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

При повторном клике информация опять исчезает с экрана, что очень удобно для пользователя. Из минусов можно отметить разве только то, что тег не поддерживается браузером Internet Explorer. Figure – элемент позволяет группировать какие-то элементы, а с помощью figcaption им можно давать общий заголовок. Сегодня чаще всего это используют для того, чтобы сделать описание к рисунку (подпись).

С помощью стилей вы легко можете изменить внешний вид заголовков фигур (отцентрировать, например).

Canvas – элемент, который достоин отдельной статьи, а то и книги. По умолчанию его называет хостом, на котором с помощью javascript можно рисовать различные изображения. С помощью canvas сегодня создают приложения и игры, различную анимацию и т.д.

Также появились другие теги, типа output или progress. Работа с ними также напрямую связана с javascript.

Наконец, один элемент из html5 немного выделяется от остальных – он добавлен для форматирования текста, а именно для его выделения – mark. Обрамив нужный текст в него обновите страницу и вы увидите, что фоновый цвет такого текста изменился на желтый.

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

Итак, в этой статье мы с вами посмотрели на то, что появилось в HTML5 и как это улучшает верстку уже сейчас. Используйте эти новые вещи при создании сайтов, а также не забывайте следить за обновлениями на Webformyself.

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