HTML5. Что нового?
HTML5 — это язык для структурирования и представления содержимого веб страниц. Чем же он так хорош? В данной спецификации для структуры кода введено несколько новых тегов, которые в некоторых случаях могут заменять тег div и это пожалуй самое ключевое нововведение. Эти теги ориентированы на поисковых-роботов. Поисковые системы начинают лучше индексировать сайт сверстаный с использованием технологии HTML5, потому что чётко отделяют контент страницы от вспомогательных элементов.
Да и вообще понять чужой код стало намного проще, так как появился некий стандарт. Давайте разберемся что же такого принципиально нового и важного в нем появилось.
Доктайп
Любой код разметки начинается с объявления типа документа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. До появления спецификации HTML5 существовало несколько типов доктайпа, различающихся в зависимости от версии языка. Все они были довольно блинными и запомнить их было нереально. Теперь же у нас есть единый, коротенький тип доктайпа:
|
1 |
<!doctype html> |
Структурные теги разметки HTML5
Тег <header> задает «шапку» сайта или раздела. То есть данный тег может относиться как и ко всей шапке веб-сайта, так и к отдельным его элементам, разделяющим страницу на разделы, тогда он семантически подразумевает заголовок или введение для содержимого своего родительского элемента.
Пример:
|
1 2 3 4 |
<div> <header><h1>Вставка включаемых областей в Битрикс</h1></header> <p>Включаемая область — это специально выделенная область на странице сайта, которую можно редактировать отдельно от основного содержания страницы. Реализуется она с помощью компонента «Включаемая область».</p> </div> |
Тег <nav > является контейнером для навигации по сайту. Если на странице несколько блоков ссылок, то в <nav > обычно помещают приоритетные ссылки. Иначе говоря данный тег предназначен для основного меню.
Пример:
|
1 2 3 4 5 |
<nav> <a href="/">Главная</a> <a href="/contact">Контакты</a> <a href="/about">О нас</a> </nav> |
Тег <main > предназначен для основного содержимого документа. Его содержимое должно быть уникальным и не включать типовые блоки шаблона(шапку, подвал, сайтбар).
|
1 2 3 4 |
<main> <h1>Заголовок</h1> Текст основного контента </main> |
Тег <aside> — определяет положение «сайтбара»(боковой панели) на сайте.
|
1 2 3 4 5 6 7 8 |
<aside> <header>Рубрики</header> <p>Рубрика1</p> <p>Рубрика2</p> <p>Рубрика3</p> <p>Рубрика4</p> <p>Рубрика5</p> </aside> |
Тег <section> — определяет тематический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле, блок новостей и так далее.
Тег <article> — это независимый раздел документа который можно использовать в разных местах в неизменном виде. Например статья, пост в блоге, сообщение на форуме и так далее. Что-то вроде фрейма.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<section> <article> <h2>Заголовок статьи</h2> <p>Текст статьи</p> </article> <article> <h2>Заголовок статьи</h2> <p>Текст статьи</p> </article> <article> <h2>Заголовок статьи</h2> <p>Текст статьи</p> </article> </section> |
Новые теги для работы с мультимедиа
Тег <figure> — используется для группировки изображений и подписей к ним.
|
1 2 3 4 5 |
<figure> <p>Изображение</p> <figcaption>Подпись к изображению</figcaption> </figure> <figure> |
Тег <audio> — используется для добавления аудио-файлов.
|
1 |
<audio src="путь к аудиофайлу" autoplay="autoplay" loop="5">Здесь можно разместить информацию о мелодии</audio> |
Где атрибут autoplay — сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы, а loop — указывает, сколько раз необходимо проиграть файл.
Тег <video> — используется для добавления на страницу видео-файлов.
|
1 |
<video src="путь к файлу">Описание фильма</video> |
Атрибут для ссылок download — позволяет скачать файл указанный в ссылке.
|
1 |
<a href="docs/instrukcia.pdf" download>скачать инструкцию</a> |
Атрибуты для работы с полями формы
Атрибут placeholder — выводит текст внутри поля формы, который исчезает при получении фокуса.
|
1 |
<input placeholder="Ваше имя"> |
Атрибут autofocus позволяет установить фокус в поле сразу при загрузке страницы.
|
1 |
<input placeholder="Ваше имя" autofocus> |
Атрибут required позволяет сделать поле обязательным для заполнения.
|
1 |
<input placeholder="Ваше имя" required> |
Атрибут autocomplete — управляет автозаполнением полей форм. То есть при вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать нужное.
|
1 |
<input placeholder="Ваше имя" autocomplete="on"> |
Автозаполнение может быть отключено в настройках браузера, в таком случае атрибут autocomplete работать не будет.
Атрибут pattern указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если данный атрибут присутствует, то форма не будет отправляться, пока поле не будет заполнено правильно. Например:
|
1 |
<input type="tel" pattern="^[ 0-9]+$"> |
Наиболее часто используемые выражения
| Выражение | Описание |
|---|---|
| \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> позволяющий создать список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
|
1 2 3 4 5 6 7 |
<input type="text" list="team_list"> <datalist id="team_list"> <option>Варианты ответа</option> <option>Варианты ответа</option> <option>Варианты ответа</option> <option>Варианты ответа</option> </datalist> |
Для атрибута type добавлен ряд новых значений:
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
И последнее что стоит отметить, это метатег viewport.
|
1 |
<meta name="viewport" content="width=device-width"> |
Он сообщает браузеру, что ширина просмотра равна ширине устройства. Это поможет сделать ваш сайт более презентабельным на мобильных устройствах.
Вот пожалуй и все ключевые нововведения спецификации HTML5.