наверх

HTML5. Что нового?

HTML5 — это язык для структурирования и представления содержимого веб страниц. Чем же он так хорош? В данной спецификации для структуры кода введено несколько новых тегов, которые в некоторых случаях могут заменять тег div и это пожалуй самое ключевое нововведение. Эти теги ориентированы на поисковых-роботов. Поисковые системы начинают лучше индексировать сайт сверстаный с использованием технологии HTML5, потому что чётко отделяют контент страницы от вспомогательных элементов.

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

Доктайп

Любой код разметки начинается с объявления типа документа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. До появления спецификации HTML5 существовало несколько типов доктайпа, различающихся в зависимости от версии языка. Все они были довольно блинными и запомнить их было нереально. Теперь же у нас есть единый, коротенький тип доктайпа:

Структурные теги разметки HTML5

Тег <header> задает «шапку» сайта или раздела. То есть данный тег может относиться как и ко всей шапке веб-сайта, так и к отдельным его элементам, разделяющим страницу на разделы, тогда он семантически подразумевает заголовок или введение для содержимого своего родительского элемента.

Пример:

Тег <nav > является контейнером для навигации по сайту. Если на странице несколько блоков ссылок, то в <nav > обычно помещают приоритетные ссылки. Иначе говоря данный тег предназначен для основного меню.

Пример:

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

Тег <aside> — определяет положение «сайтбара»(боковой панели) на сайте.

Тег <section> — определяет тематический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле, блок новостей и так далее.

Тег <article> — это независимый раздел документа который можно использовать в разных местах в неизменном виде. Например статья, пост в блоге, сообщение на форуме и так далее. Что-то вроде фрейма.

Новые теги для работы с мультимедиа

Тег <figure> — используется для группировки изображений и подписей к ним.

Тег <audio> — используется для добавления аудио-файлов.

Где атрибут autoplay — сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы, а loop — указывает, сколько раз необходимо проиграть файл.

Тег <video> — используется для добавления на страницу видео-файлов.

Атрибут для ссылок download — позволяет скачать файл указанный в ссылке.

Атрибуты для работы с полями формы

Атрибут placeholder — выводит текст внутри поля формы, который исчезает при получении фокуса.

Атрибут autofocus позволяет установить фокус в поле сразу при загрузке страницы.

Атрибут required позволяет сделать поле обязательным для заполнения.

Атрибут autocomplete — управляет автозаполнением полей форм. То есть при вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать нужное.

Автозаполнение может быть отключено в настройках браузера, в таком случае атрибут autocomplete работать не будет.

Атрибут pattern указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если данный атрибут присутствует, то форма не будет отправляться, пока поле не будет заполнено правильно. Например:

Наиболее часто используемые выражения

Выражение Описание
\d [0-9] Одна цифра от 0 до 9.
\D [^0-9] Любой символ кроме цифры.
[A-Z] Только заглавные латинские буквы
[A-Za-z] Только латинские буквы в любом регистре.
[А-Яа-яЁё] Только русские буквы в любом регистре.
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.
[0-9]{3} Три цифры.
[A-Za-z]{6,} Не менее шести латинских букв.
[0-9]{,3} Не более трёх цифр.
[0-9]{5,10} От пяти до десяти цифр.
^[a-zA-Z]+$ Любые латинские буквы
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
^[ 0-9]+$ Любое число.
[0-9]{6} Почтовый индекс.
\d+(,\d{2})? Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})? Число в формате 2.10 (разделитель точка).

Стоит отметить тег <datalist> позволяющий создать список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

Для атрибута type добавлен ряд новых значений:

Тип Описание
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.

И последнее что стоит отметить, это метатег viewport.

Он сообщает браузеру, что ширина просмотра равна ширине устройства. Это поможет сделать ваш сайт более презентабельным на мобильных устройствах.

Вот пожалуй и все ключевые нововведения спецификации HTML5.

HTML, HTML5