HTML5

несколько важных фактов об HTML5:

• HTML5 обратно совместим с HTML4.
• HTML5 не цельная спецификация, а набор модулей разной степени готовности.
• Многие модули HTML5 имеют хорошую поддержку во всех текущих браузерах.
• HTML5 с нами надолго.

Это означает, что HTML5 можно использовать уже сейчас. Для этого достаточно задать такой тип документа:

А теперь пара новых тегов:

• header — хедер сайта или раздела;
• footer — футер сайта или раздела.

Да-да, это те самые хедер и футер, которые обычно верстались дивами с классами header или footer. Они были настолько распространены, что для них было решено создать собственные теги.

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

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

А раз теги неуникальные, то и стилизовать их лучше с помощью классов.

Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.

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

Раньше почти все разделы верстались на дивах. Но в HTML5 добавили сразу два новых тега для разметки разделов:

• section — смысловой или логический раздел документа;
• article — самостоятельный и независимый раздел документа.

Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:

• div — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
• section — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
• article — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

В HTML5 добавили специальный элемент для навигационных блоков — тег nav.

В HTML5 появилась возможность подключать и использовать на странице любые нестандартные шрифты. Веб-шрифты поддерживаются большинством современных браузеров.

Простейший способ использовать такой шрифт — найти его в специальном сервисе по названию, получить там код подключения шрифта, вставить этот код в свою вёрстку и использовать шрифт, как обычно, с помощью свойства font-family.

Подобных сервисов с бесплатными шрифтами достаточно много. Один из самых известных — это Google Fonts. А вот похожий русскоязычный сервис: webfont.ru.

При использовании веб-шрифтов не забывайте указывать так называемые «фоллбэчные» шрифты — стандартные шрифты, которые будут отображаться, если веб-шрифт либо недоступен, либо не поддерживается старым браузером пользователя. Для этого нужно всего лишь перечислить их через запятую после нестандартного шрифта: font-family: "PT Sans", "Arial", sans-serif;

Технически подключение веб-шрифтов производится с помощью CSS-правила @font-face.

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

Более подробно о технических тонкостях подключения шрифтов можно прочитать в серии статей на webfont.ru: первая часть и вторая часть.

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

1. Берут файл шрифта (например, .ttf) и конвертируют в веб-формат в сервисе наподобие Font Squirrel (для кириллических шрифтов надо указать дополнительные параметры конвертации).
2. Затем сконвертированные файлы шрифта размещают у себя на сервере.
3. И подключают шрифт с помощью @font-face.

aside — это дополнительное содержание, не связанное напрямую с основным. Ещё такие блоки часто называют «сайдбарами» или боковыми панелями.

Так как пост — это цельный, законченный и самостоятельный фрагмент информации, то для его разметки идеально подойдёт тег article.

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

Это означает, что у нашего поста будет своя собственная структура (шапка, подвал, разделы) и иерархия заголовков, которая будет начинаться с заголовка первого уровня.

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

Пример реализации

Стилистика:

HTML:

В HTML5 добавили специальный тег для обозначения даты и времени — time. У этого тега есть атрибут datetime — для указания даты в машиночитаемом формате ISO 8601.

С помощью <time> можно описывать даты одновременно и для человека, и для машины, например: <time datetime="2014-04-20">Вчера</time> мы готовили курс к публикации.

Браузер отображает только содержимое тега, а содержимое datetime не отображается. Человек увидит только слово «вчера», а машина прочитает атрибут и получит дату в нужном ей формате.

Один из новых тегов — это <figure>.

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

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для обозначения этого комментария и предназначен ещё один новый тег — <figcaption>, который размещается первым или последним элементом внутри <figure>. Пример: <figure> схема, график, диаграмма и так далее <figcaption>Легенда</figcaption> </figure>

Для вставки видео предназначен тег video. Его основные атрибуты:

• width и height – задают ширину и высоту видео
• controls – пустой атрибут, при наличии которого отображается панель управления видео
• preload – задаёт режим предзагрузки видео, имеет 3 возможных значения:
  • none — не загружать ничего;
  • metadata — загрузить служебную мета-информацию (длительность, первый кадр и т.д.);
  • auto — можно загрузить всё видео.
  • значение по умолчанию зависит от браузера

• src – задаёт адрес видеофайла
• autoplay – пустой атрибут, при наличии которого воспроизведение видео начинается автоматически
• poster – задаёт адрес картинки-обложки, которая отображается, когда видео еще не загрузилось или не воспроизводится

У тега video есть атрибут src, в котором можно указать адрес видеофайла, но мы почему-то его не использовали. Всё дело в том, что в текущий момент существует несколько форматов видео, каждый из которых хорошо поддерживается лишь некоторыми браузерами. Вот три самых распространённых формата и их поддержка: MPEG-4/H.264, OGG/Theora и WebM. Поэтому мы должны в видео указывать адреса файлов во всех этих форматах (и конвертировать исходное видео в эти форматы, конечно). Делается это с помощью тегов source:

В атрибуте src указывается адрес видеофайла, а в атрибуте type его тип (также там могут указываться и кодеки). Браузер из списка видеофайлов выбирает первый, который может проиграть и загружает его. Атрибут type не является обязательным, так как браузер умеет сам определять тип и кодеки, но указывая тип явно, мы помогаем ему не ошибиться.

Для вставки аудио предназначен тег audio. Его основные атрибуты:

• controls – пустой атрибут, при наличии которого отображается панель управления
• preload – задаёт режим предзагрузки видео, имеет 3 возможных значения:
  • none — не загружать ничего;
  • metadata — загрузить служебную мета-информацию (длительность и т.д.);
  • auto — можно загрузить всё.
  • значение по умолчанию зависит от браузера

• src – задаёт адрес видеофайла
• autoplay – пустой атрибут, при наличии которого воспроизведение видео начинается автоматически

У звуковых файлов с поддержкой форматов дела обстоят лучше, чем у видео. Для охвата большинства современных браузеров, достаточно использовать всего два формата: MP3 и OGG. И снова мы не можем указать только один файл в атрибуте src у тега audio. Мы должны так же, как и в случае с видео, перечислить адреса звуковых файлов в разных форматах с помощью тегов source:

В HTML-формах есть специальная кнопка, которая сбрасывает введённые значения и возвращает изначально установленные. Это поле ввода с типом reset.

Помимо кнопок отправки формы или сброса введенных значений, существуют и «просто кнопки». При щелчке на такую кнопку никаких действий не происходит, а все необходимые действия обычно задаются при помощи JavaScript.  <input type="button" value="Кнопка">

В качестве кнопки отправки формы можно использовать изображение.

Для этого у тега input нужно указать тип image.

Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:

src	адрес изображения
alt	альтернативный текст, отображаемый в том случае, если изображение не загружено

Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.  <input type="image" alt="Войти" src="/assets/course74/enter.png">

Помимо тега input для добавления кнопок можно использовать тег button. Он расширяет возможности создания кнопок. Внутри тега button можно размещать любые HTML-элементы, в том числе изображения. <button>Календарь <img src="/assets/course74/calend.png" alt=""></button>  Если в атрибуте type тега button указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения. По умолчанию значение атрибута type – submit.

новые возможности форм, большая часть которых была добавлена в HTML5.

Чтобы указать, что поле обязательно для заполнения, нужно добавить ему пустой атрибут required: При попытке отправить форму с незаполнеными обязательными полями браузер выведет всплывающее предупреждение.

В форму заказа важно включить поле даты доставки. А для выбора даты из календаря существует новый тип поля ввода — date. При клике на данное поле в форме всплывает календарик. Если браузер не поддерживает поле для ввода даты, то вместо него отображается обычное текстовое поле. Но иногда нужно указывать дату в других форматах, и для этого существуют дополнительные «временные» типы полей, например, time для выбора времени.

поля с типами date и time, но существуют и другие типы полей для ввода дат:

datetime	выбор даты с указанием времени (c учетом временной зоны)
datetime-local	выбор даты с указанием времени (без учета временной зоны)
week	выбор порядкового номера недели в году и года
month	выбор месяца и года

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

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

Пример:

Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно быть таким же, как значение атрибута id у списка.

Если тег input имеет специфический тип, например email или другие, которые будут рассмотрены далее в курсе, то в списке отображаются только корректные для данного типа значения.

Для ввода числовых значений существует специальный тип поля ввода number. Рядом с полем браузер автоматически подставляет две стрелочки для увеличения и уменьшения числового значения. При помощи вспомогательных атрибутов min и max можно установить верхнюю и нижнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения. Также стоит отметить, что поле ввода числа, как и некоторые другие поля, которые будут рассмотрены дальше, по-особому ведёт себя в мобильных браузерах: например, при фокусе на такое поле появляется клавиатура, позволяющая вводить соответствующие символы.

поле поиска <input type="search">  Это поле почти не отличается от обычного текстового поля. В некоторых браузерах внутри него появляется крестик для сброса введённого значения.

При загрузке страницы можно сообщить браузеру в какое поле установить курсор по умолчанию. Для этого используется пустой атрибут autofocus. <input type="text" autofocus>  Автофокус улучшает процесс работы с формами, ведь пользователь избавляется от лишних щелчков мышки, там где они не нужны, а может сразу начинать вводить текст в поле. Обратите внимание, что такой атрибут должен быть только один на странице.

Для этой цели подходит тип поля range. Такое поле выглядит как шкала с ползунком и позволяет выбрать число из некоторого интервала значений. <input type="range" min="1" max="10"> Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Тег <output> представляет собой область, куда выводятся какие-либо результаты вычислений, обычно полученные при помощи JavaScript.  <output name="sum">[значение по умолчанию]</output> Значение по умолчанию при этом можно не задавать, тогда область вывода будет пустой.

Для группировки полей используется тег fieldset.

По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид. Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldset надо поместить тег legend:

Чтобы добавить автоматическую проверку формата номера в поле, используем атрибут pattern, в котором с помощью регулярного выражения опишем требуемый формат.  <input type="text" pattern="[0-9]{3}-[0-9]{5}" name="passport" required>

Новый тип поля tel появился в HTML5 и отвечает за ввод телефонных номеров.

У полей, в которые вводятся текстовые значения (textarea, разные типы input и т.д.) есть возможность вывести подсказку. Для этого используется специальный атрибут placeholder: <input type="text" placeholder="Текст подсказки"> Текст подсказки выводится внутри текстового поля, а при вводе значения — автоматически убирается.

В HTML5 добавлены два типа полей email и url, предназначенные для ввода электронной почты и адреса сайта. Особенностью этих полей является то, что они автоматически проверяют формат введённых данных. Внешне эти поля не отличаются от обычных текстовых полей, но обладают важной особенностью, которая очень полезна на мобильных устройствах. Когда вы начинаете заполнять такое поле на мобильнике, там автоматически переключается раскладка клавиатуры. Например, для email отобразятся латинские символы, цифры, знак @ и некоторые другие.

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

Так как список выбора может быть довольно большой, в теге select используем возможность объединять option в группы. Обычно это используется для большей наглядности и удобства поиска нужного варианта. Для формирования группы используется тег optgroup. Атрибут label этого тега определяет заголовок группы.

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

Иногда возникают ситуации, когда какие-то поля требуется сделать недоступными для редактирования. Есть два способа: использование атрибута readonly и использование атрибута disabled.

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

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

Браузер может запоминать значения, вводимые в текстовые поля. При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать подходящее. Параметрами автозаполнения можно управлять используя атрибут autocomplete. Он может принимать два значения on и off. Первое включает автозаполнение, второе — отключает. Отключение автозаполнения обычно используется из соображений безопасности, например, чтобы не сохранялись пароли, номера банковских карт и т.д.

При нажатии клавиши Tab браузер передает управление (фокус) от одного элемента к другому в том порядке, в котором они были объявлены на странице. Этим порядком можно управлять при помощи атрибута tabindex.  <input type="text" tabindex="3"> В качестве значения может использоваться любое целое положительное число. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему. Значения меньше нуля игнорируются.

Но из-за плохого интернета форму часто не удавалось отправить и введённая заметка терялась. Как справиться с этой довольно часто встречающейся проблемой, когда введённые в форму данные теряются? Для этого можно использовать одну из новинок HTML5 — localStorage. Эта технология относится к JavaScript, а не к HTML или CSS, но промолчать о ней мы не можем. Суть localStorage или «локального хранилища» заключается в том, что в него можно записывать данные, которые будут сохраняться в браузере. Эти данные не исчезнут даже если вы закроете браузер и откроете его снова или уйдете со страницы и потом вернётесь на неё. Получается, что можно сохранять данные из формы в хранилище при работе с формой, а при загрузке страницы проверять хранилище на наличие данных, и если они есть, то подставлять их в форму. Таким образом можно предотвратить потерю данных при работе с формами.

Заметьте, что в исходном коде задания тег <textarea> пуст, поэтому данные в форму могут попасть только из хранилища. Можете даже провести эксперимент: закрыть браузер, запустить его, открыть это задание, раскомментировать скрипт и убедиться, что сохранённый текст появится вновь. Подробнее о localStorage и других возможностях HTML5, которые позволяют улучшить опыт взаимодействие с формами, вы можете прочитать в одноимённой статье в блоге Алексея Симоненко.