Примеры использования некоторых новых возможностей HTML5. Знакомство с HTML5
Примеры использования некоторых новых возможностей HTML5. Знакомство с HTML5
05.05.2024Телевизоры (Smart TV)
Перевод: Влад Мержевич
1. Это не одна большая вещь
Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.
Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег
2. Вам не надо откидывать имеющееся
Нравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.
Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email"
, поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.
3. Легко начать
«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент
должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:
Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде
,
,
и
4. Это уже работает
Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом
Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.
5. Он уже здесь
Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:
Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.
HTML5 уже здесь. Давайте погрузимся в него.
От автора:
релиз стандарта HTML 5 2 года назад наделал шуму в сообществе разработчиков. Не только потому что в спецификации появилось много новых свойств, но и потому, что это было первое крупное обновление в HTML с HTML 4.01, который вышел в 1999. В сети до сих пор можно найти сайты, хвалящиеся тем, что они используют «современный» стандарт HTML5.
К нашему счастью, на этот раз нам не пришлось ждать так же долго нового поколения HTML. В октябре 2015 W3C начали разработку черновика HTML 5.1, в котором должны были решить ряд проблем, которые остались открытыми в HTML5. Спустя долгое время в июня 2016 спецификация достигла статуса «Candidate Recommendation», в сентябре 2016 статуса «Proposed Recommendation» и, наконец, статуса W3C Recommendation в ноябре 2016. Кто следил за разработкой, могли заметить, что путь был тернистый. Много первичных HTML 5.1 свойств были отклонены из-за плохой проработки и отсутствия поддержки в браузерах.
HTML 5.1 находится до сих пор в разработке, а W3C начали работу над черновиком HTML 5.2, который предположительно должен выйти в конце 2017. А в этой статье мы рассмотрим пару интересных новых свойств и улучшений в версии 5.1. Поддержка у данных свойств до сих пор скудная, но мы расскажем в каких браузерах можно хотя бы попробовать примеры.
Контекстное меню при помощи тегов menu и menuitems
Черновая версия 5.1 представляет два типа элементов menu: context и toolbar. Первое используется для расширения родного контекстного меню, которое обычно отображается по клику на правую кнопку мыши по странице. Второй определяет простые компоненты меню. В процессе разработки от toolbar отказались, тег context до сих пор присутствует.
С помощью тега menu можно создать меню с одним или более тегами menuitems, после чего присвоить эти теги к любым элементам при помощи атрибута contextmenu. Тег menuitem может быть одного из трех типов:
checkbox – позволяет выбирать или снимать выбор;
command – позволяет выполнять действие по клику;
radio – позволяет выбирать один вариант из группы.
Базовый пример использования, работает в Firefox 49, в Chrome 54 поддержка отсутствует.
В браузерах с поддержкой контекстное меню должно выглядеть так:
Элементы details и summary
Теги details и summary позволяют показывать и прятать блоки с дополнительной информацией по клику. Обычно такое делают на JS, но теперь это можно делать и с помощью тегов details и summary. По клику на тег summary открывается контент из тега details.
Пример ниже тестировался в Firefox и Chrome.
В поддерживаемых браузерах демо выглядит так:
Дополнительные типы поля input – month, week и datetime-local
Арсенал поля инпут был расширен тремя новыми типами: month, week и datetime-local.
Первые два типа позволяют выбирать неделю и месяц. В Chrome оба этих типа показываются в виде выпадающих календарей, где можно выбрать месяц или неделю. При получении доступа из JS строка будет выглядеть примерно так: «2016-W43» для week и «2016-10» для month.
Изначально в черновике 5.1 было представлено два инпута date-time: datetime и datetime-local. Разница между ними в том, что datetime-local всегда выбирает время в часовом поясе пользователя, а datetime позволяет менять часовой пояс. В процессе разработки тип datetime был отброшен, остался только datetime-local. Поле типа datetime-local состоит из двух частей: даты, которую можно выбрать так же, как и в полях типа week и month, и времени, которое можно указать отдельно.
В CodePen демо ниже показаны примеры всех типов. Работает в Chrome, в Firefox поддержки пока нет:
В браузерах с поддержкой демо будет выглядеть так:
Адаптивные изображения
В HTML 5.1 появилось несколько новых функций для работы с адаптивными изображениями без подключения CSS. У каждой функции есть свои примеры использования.
Атрибут изображения srcset
Атрибут изображения srcset позволяет прописать несколько дополнительных изображений с различной плотностью пикселей. Так браузер может загружать изображения нужного качества под устройство пользователя (на основе плотности пикселей на устройстве, уровне зума и скорости сети). К примеру, для пользователей с маленькими телефонами или медленной сетью можно показывать изображения низкого разрешения.
Атрибут srcset принимает список URL изображений, разделенных запятой с Х модификатором. Модификаторы описывают соотношение пикселей (количество физических пикселей на CSS пиксель), подходящее к каждому изображению. Простой пример:
<
img
src
=
"images/low-res.jpg"
srcset
=
"
Images/low-res.jpg 1x,
Images/high-res.jpg 2x,
Images/ultra-high-res.jpg 3x"
Если соотношение пикселей равно 1, будет показано изображение low-res, для 2 будет показано high-res, для 3 — ultra-high-res. Можно показывать изображения разных размеров вместо соотношения пикселей. Для этого нужно использовать модификатор w:
<
img
src
=
"images/low-res.jpg"
srcset
=
"
Images/low-res.jpg 600w,
Images/high-res.jpg 1000w,
Images/ultra-high-res.jpg 1400w"
В этом случае для low-res задано изображение шириной 600px, для high-res – 1000px, для ultra-high-res – 1400px.
Атрибут изображения sizes
Возможно, вы захотите показывать изображения разными способами в зависимости от размера экрана. К примеру, можно показывать изображения в две колонки на широких экранах, а для узких экранов – в одну колонку. В этом вам поможет атрибут sizes. Атрибут позволяет переводить ширину экрана в пространство, отведенное для изображения, после чего подходящее изображение выбирается с помощью атрибута srcset. Пример:
Когда ширина окна браузера больше 40em, атрибут sizes определяет ширину изображения, как 50% от ширины окна. Когда ширина окна меньше или равна 40em, ширина изображения составляет 100%.
Тег picture
Недостаточно просто менять размер изображений под разные экраны. Вам нужен способ показывать совсем другие изображения. В этом вам поможет тег picture. Данный тег позволяет прописать несколько изображений для разных экранов. Для этого нужно обернуть тег img в picture и указать дополнительные теги source. В тегах source указываются ссылки на изображения.
<
picture
>
<
source
media
=
"(max-width: 20em)"
srcset
=
"
Images/small/low-res.jpg 1x,
>
<
/
picture
>
Валидация форм с помощью form.reportValidity()
В HTML5 прописан метод form.checkValidity(), с помощью которого можно проверять поля формы по валидаторам. В качестве результата возвращается Булево значение. Новый метод reportValidity() работает схожим образом. С его помощью можно провести валидацию формы и вернуть результат. Дополнительно данный метод показывает ошибки пользователю прямо в браузере. В CodePen демо ниже показан результат (тестировалось в Firefox и Chrome):
Поле First name должно быть подсвечено, оно не должно быть пустым. Обычно это работает так:
Атрибут allowfullscreen для фреймов
Новый Булев атрибут для фреймов allowfullscreen позволяет изменять способ отображения контента при помощи метода requestFullscreen(). С его помощью можно разворачивать контент на весь экран.
Проверка орфографии при помощи element.forceSpellCheck()
Новый метод element.forceSpellCheck() позволяет включать проверку текстовых элементов на орфографию. Это также первая функция, которая пока что не поддерживается ни в одном браузере. Чисто теоретически, данный метод можно использовать для проверки орфографии нередактируемых элементов.
Функции, которые не были реализованы
Некоторые из функций, прописанных в первых черновиках спецификации, были в конечном итоге удалены, в основном из-за отсутствия интереса со стороны разработчиков браузеров. Вот некоторые из интересных функций:
Атрибут inert
Атрибут inert должен был отключать пользовательское взаимодействие для всех дочерних элементов. То же самое, что добавить атрибут disabled ко всем элементам вручную.
Тег dialog
С помощью тега dialog можно было создавать попап окна. Была даже продумана удобная форма интеграции. Атрибут method тега dialog запрещал отправку формы на сервер, вместо этого тег возвращал значение создателю диалога.
Тег до сих пор поддерживается в Firefox, пример его работы:
Дополнительные ссылки
Это отнюдь не полный список изменений в HTML 5.1. В спецификации прописано множество мелких функций и изменений, которые были приняты в Living Standard, а также много функций, которые были удалены. Полный список изменений можете посмотреть в разделе Changes спецификации. А пока что будем надеяться, что разработчики браузеров быстро подхватят новые функции!
А что вам в HTML 5.1 понравилось больше всего? Пишите в комментариях!
Редакция:
Pavels Jelisejevs
Стандарт HTML5 все активнее используется в современном веб-дизайне. И хотя, он до сих пор находится в стадии разработки, многие из его стандартов уже утверждены и используются всеми современными браузерами, в том числе и мобильными.
В этой статье мы рассмотрим некоторые новые возможности HTML5 с конкретными примерами их применения на практике
Новый DOCTYPE
Давайте вспомним, как определяется типичный XHTML документ в разделе DOCTYPE
:
‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›
Объявление типа документа на языке разметки выглядит куда более лаконично и читабельно
‹!DOCTYPE html›
Более того, вы можете применять данный DOCTYPE
при верстке любой страницы. Если браузер не знаком с HTML5, то он применит отобразит страницу в стандартном режиме.
Улучшенная семантика кода
Улучшенная семантика кода позволяет поисковым системам четко разграничивать на странице типы контента, отделять важную информацию, повышать рейтинг страницы по поисковым запросам.
И начать использовать более понятные как человеку, так и машине
‹header› … ‹/header›
‹footer› … ‹/footer›
‹div›
по происхождению не имеют никакой семантической структуры и могут многократно вкладываться в друг друга и в другие контейнеры. Использование же более продуманной семантической структуры позволяет четко разграничить для поисковой системы, где находится заголовок, подвал, а где основная информационная часть.
Элемент
FIGURE
Рассмотрим следующую часть кода:
‹img src="mars.jpg" alt="About Mars" /›
‹p›This is an image of Mars‹/p›
В данном случае поисковым системам сложно определить, что тег ‹p›, содержащий описание картинки, собственно и является ее описанием. Именно поэтому такие конструкции лучше объединять в общий контейнер, которым является ‹figure
›:
‹figure›
‹img src="mars.jpg" alt="About Mars" /›
‹figcaption›
‹p›This is an image of Mars‹/p›
‹/figcaption›
‹/figure›
В данном случае пристутсвует дополнительный тег ‹figcapture›
, который уточняет, где содержимое фигуры, а где ее заголовок
Использование
hgroup
Представьте, что у вас на сайте заголовок состоит из основного заголовка и подзаголовка. Использование обычных тегов ‹h1›
и ‹h2›
никак не отображает зависимость между двумя этими пунктами. Поэтому их можно объединить семантически, используя тег ‹hgroup›
:
‹header›
‹hgroup›
‹h1›Photogallery‹/h1›
‹h2›Our vacancy in Prague‹/h2›
‹/hgroup›
‹/header›
Никаких types
для подключения скриптов и таблиц стилей
Возможно, вы до сих пор используете структуры для подключения скриптов, библиотек, таблиц стилей и т.д. следующего вида:
Так вот, теперь больше нет необходимости указывать тип подключаемого файла. Браузер определит его автоматически. А значит в атрибуте type
больше нет необходимости:
Стандарт XHTML предусматривал необходимость указывать значения атрибутов в одинарных или двойных кавычках. Стандарт HTML5 позволяет не использовать кавычки, если в них нет необходимости, т.е. значение атрибута задается одним словом без пробелов. Более того, вы можете даже не закрывать парные элементы. Вот пример:
‹p class=myClass id=pId›Content
Однако это может повредить читабельности кода со стороны разработчика. Поэтому стиль написания кода полностью зависит от вас, ведь старый (проверенный временем) стиль все так же поддерживается.
Редактируемый контент
HTML5 позволяет сделать контент вашего сайта полностью редактируемым, при этом нет необходимости вставлять скрытые поля для ввода текста. Все, что необходимо – это добавить атрибут contenteditable="true"
(или без кавычек, как мы узнали из предыдущего пункта) к тому элементу, который вы хотите сделать доступным для редактирования. После этого, пользователь сможет редактировать его содержимое непосредственно со страницы.
В данном случае пользователь может добавлять, удалять и редактировать пункты неупорядоченного списка ‹ul›
. Ниже приведен пример списка, пункты которого можно изменить
Watch TV
Listen to music
Play videogames
Новые возможности форм
HTML5 предоставляет пользователям и разработчикам большие возможности по вводу информации в формы. В этих целях добавлены многие полезные вещи. Рассмотрим некоторые из них.
Поля для ввода
email
Используйте атрибут type="email"
к тегу ‹input›
и e поля ввода появятся дополнительные уникальные способности по проверке правильности ввода адреса, и если адрес введен неверно, то браузер продемонстрирует пользователю предупреждающее сообщение.
‹input id="email" name="email" type="email" /›
Результат может быть таким (Google Chrome):
Также существуют и другие поля для ввода, например, адреса вебсайта или номера телефона. Принцип их работы схож с полем email
.
Использование подсказок
Теперь нет необходимости использовать javascript
для создания подсказок (placeholders) для ввода в текстовые поля. HTML5 предлагает использовать специальный атрибут placeholder
, который может выводить фоновую текстовую подсказку для поля.
Данный пример будет работоспособен только в браузерах с поддержкой HTML5
Email:
Автофокус
Без использования javascript можно автоматически передать фокус элементу после загрузки страницы. Для этого нужно добавить атрибут без параметров тому полю, которое необходимо вводить в первую очередь.
‹input name="name" type="text" autofocus /›
Поле name будет активировано автоматически и готово для ввода текста.
Обязательные поля
Если необходимо отметить некоторые поля, как обязательные для заполнения теперь достаточно указать атрибут . Таким образом, при подтверждении формы браузер проведет проверку, заполнены ли необходимые поля и, если нет, выдаст сообщение.
Ниже иллюстрация результата работы этого кода (Google Chrome):
Range
Input
HTML5 представляет абсолютно новый элемент управления – range input
, который представляет собой бегунок, значение которого изменяется перетягиванием специального маркера между установленными заранее значениями.
Атрибуты min
и max
используются для задания крайних значений бегунка, step
– это шаг изменения значения. Браузер Google Chrome отображает этот элемент управления следующим образом:
Данный пример будет работоспособен только в браузерах с поддержкой HTML5
Локальное хранилище
Локальное хранилище позволяет сохранять информацию введенную пользователем, если страница браузера была закрыта или перезагружена. Это очень удобно, особенно в тех случаях, когда форма достаточно большая и сайт был случайно закрыт.
Само по себе Local Storage не является частью спецификации HTML5, однако тесно с ней связано.
Управление локальным хранилищем происходит через объект класса localStorage
с помощью двух методов setData()
и getData()
. Ниже приведен пример, в котором используется описанный выше редактируемый список, который будет хранить последние введенные в него значения.
Теперь нет необходимости пользоваться сторонними плагинами и библиотеками для подключения различных аудио и видеофайлов. Все возможности по внедрению медиа теперь включены в спецификацию HTML5.
Аудио
Для внедрения на страницу звукового файла необходимо воспользоваться тегом ‹audio› с необходимыми атрибутами. Пример ниже выводит на странице блок управления аудиофайлом, содержащим ссылку на скачивание этого файла. Звук будет воспроизводиться автоматически.
На странице данный блок может выглядеть вот так (браузер Google Chrome)
У данного тега есть свои особенности поддержки в браузерах. Например, браузер Mozilla Firefox работает с.ogg файлами, тогда как Webkit-браузеры работают с.mp3
Видео
До недавнего времени, единственным способом вставки видеоконтента на HTML-страницу было интегрирование Flash-контента. Однако теперь такую возможность предоставляют сами браузеры, отвечающие спецификациям HTML5. Особую популярность это приобрело тогда, когда на формат HTML5 перешел крупнейший видеохостинг YouTube.com.
Для успешного интегрирования видео в страницу необходимо воспользоваться тегом ‹video›
. К сожалению между производителями браузеров нет единого мнения в каком формате должно быть представлено видео, поэтому каждый из них продвигает свой формат. Если IE и Safsri поддерживают видео в формате H.264 (которое поддерживалось Flash-плеерами), то Opera и Firefox продвигают open source форматы Vorbis и Theora. Chrome же может правильно отображать видео во всех форматах, в том числе WebM.
‹video controls preload›
‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /›
‹source src="video.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" /›
‹p›Your browser is old. ‹a href="video.mp4"›Download this video instead.‹/a› ‹/p›
‹/video›
Не все браузеры могут отображать HTML5 видео, поэтому под тегом ‹source›
можно указать ссылку для скачивания видео, либо интегрировать Flash плеер.
Атрибут preload
позволяет браузеру автоматически начинать загрузку видео, что может быть полезно, если размер видео достаточно большой. Атрибут controls
позволяет установить стандартные элементы управления видеопотоком.
С выходом HTML5
, в HTML добавилось много новых функций. И что еще лучше, некоторые браузеры уже поддерживают часть этих функций, когда другие еще двигаются к этому. Вы можете следить за добавлением этих функций в браузеры на этой странице .
1. Новый Doctype и Charset.
Одно из достоинств HTML5 – это его простота.
Да, вот и все. Буквально два слова. Это простота объясняется, возможно, тем что HTML5 существует сам по себе, а не остается частью SGML.
Charset так же очень просто, используется utf-8, и задается так же, буквально одним тегом:
2. Новая структура
HTML5 понимает, что веб страницы имеет структуру, так же как, например, книга. Обычно это навигация, сам контент, боковое меню (сайдбар) и заглавную часть. И в HTML5 предусмотрены теги для всех этих элементов.
– определяет разделы страницы
– определяет заголовок страницы
– определяет статью или основной контент на странице
– определяет изображение, аннотацию статьи
3. Новые встроенные элементы.
Эти новые элементы определяют некоторые базовые концепции и обозначают элементы страницы:
– для обозначения содержимого
– для обозначения некоторых измерений, например дискового пространства
4. Новая поддержка динамических страниц
HTML 5 был разработан для упрощения задач веб-разработчиков, по-этому появилось много новых возможностей для поддержки динамических страниц.
Контекстное меню – HTML 5 будет поддерживать создание и использование контекстного меню на веб-страницах и приложениях
асинхронный атрибут – этот тег указует браузеру, что сценарий должен быть загружен асинхронно, так что он не замедлит нагрузки и отображения остальной части страницы.
– содержит подробную информацию об элементе.
– создает таблицу, которая создается из базы данных или другого источника динамической страницы
– определяет действия, которые должны произойти, когда динамический элемент активируется
5. Новые типы форм
HTML5 поддерживает все старые типы форм, но так же добавлены и новые:
datetime
datetime-local
month
number
range
email
6. Новые элементы
Появились некоторые новые элементы в HTML5:
Это может позволить вам добавить изображения или графики в подсказки или просто создать динамическую графику на странице “на ходу”.
7.Удаленные элементы
Существуют так же элементы HTML4, которые больше не могут использоваться в HTML5. Большинство из них давно устарели, по-этому такие действия не удивительны.
1 февраля 2008 в 23:51
Что нового в HTML 5.0? Часть 1
Разработка веб-сайтов
Перевод
Веб-технологии постоянно эволюционируют. Каждый день создаются новые сайты, которые расширяют возможности HTML. HTML 4 существует в течение почти десяти лет, но издатели ищут новые способы расширения функционала этого формата. Однако разнообразие языков и браузеров ограничивает некоторые его возможности.
Чтобы дать разработчикам более гибкий, совместимый продукт, а также позволяющий делать проекты более интерактивными и интересными, HTML 5 внедряет и расширяет спектр функций, включая формы управления, API, мультимедиа, структуру и семантику.
Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG . Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.
Заметим, что спецификация находится еще в стадии разработки, и весьма далека от завершения. Таким образом, вполне возможно, что любые функции, упомянутые в этой статье, могут измениться в будущем. Данная статья призвана описать новые возможности формата HTML версии 5.
Структура
HTML 5 вводит целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией - выделять их, используя элементы div, присваивая ему класс или id.
На иллюстрации типичный 2х колоночный макет с использованием div элементов, с присвоением им класса или id. Структура сожержит - «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -
Использование div элементов преимущественно, потому что в текущей версии HTML 4 не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из который имеет свое отдельное название.
Код документа выглядит так:
...
...
...
...
...
Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 - h6), это дает возможность внедрить в каджый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в предыдущей версиии HTML. Спецификация включает в себя детальный алгоритм для генерации границ . Эти элементы могут быть использованы как авторские и браузерные инструменты для генерации оглавления и помощи пользователям в навигации по документу.
Например, следующая структура разделена на уровни с вложенными элементами h1:
Level 1
Level 2
Level 3
Заметим, что для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.
Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».
Элемент «header»
представлет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.
A Preview of HTML 5
By Lachlan Hunt
Example Blog
Insert tag line here.
Элемент «footer»
представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.
Элемент «nav»
- определяет раздел навигации по сайту:
Элемент «aside»
определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.
Нравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.
«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент
должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:
Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом 
Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:
