HTML5 - не просто очередная версия языка гипертекстовой разметки (HTML), а новая открытая платформа (Web Applications 1.0), предназначенная для создания более мощных веб сайтов и приложений, которые поддерживают мультимедийный контент, умеют работать с программными интерфейсами, взаимодействовать с формами, структурировать документы и т.д.
Преимущества HTML5
Среди основных преимуществ HTML5 необходимо отметить:
- HTML5 поддерживает SVG, canvas и прочую виртуальную векторную графику поддерживаются в HTML5. В ранних версиях использование векторной графики было возможно только в сочетании с такими технологиями, как Flash, VML и т.д.
- Код стал простым и более доступным для понимания за счет появления новых и улучшения семантические роли существующих элементов. К примеру, большинство используемых ранее контейнеров div были заменены на семантические элементы section, article, nav и header, которые позволяют лучше структурировать содержимое страницы.
- Появилась поддержка геолокации, что позволяет определять местонахождение пользователя.
- Расширились возможности проигрывания мультимедийного контента (аудио, видео), что позволяет пользователям проигрывать аудио, видео или анимацию непосредственно в браузере, не устанавливая специальные приложения (FlashPlayer), утилиты или плагины.
- Появилась поддержка локального хранилища (localStorage), что позволяет хранить данные не только в кэше браузера, но и в базе данных SQL. Объект localStorage - часть глобального пространства имен и при использовании скриптов доступен из любого места.
- В HTML5 поддерживается функция веб-приложений, а это значит, что браузеры могут функционировать в качестве платформы для приложений.
Контентные модели HTML5
В HTML5 контент страницы можно разделить на смысловые группы, которые характеризуют содержимое веб-страницы. Эти группы получили название контентных моделей (content model). Каждая модель описывает тип содержимого элемента. Содержимым элемента является текст и дочерние элементы. Элемент может принадлежать как к одной, так и к нескольким категориям.
В HTML5 различают следующие категории контента:
- Метаданные (Meta Data)
- Потоковый контент (Flow)
- Секционный контент (Sectioning)
- Заголовочный контент (Heading)
- Текстовой контент (Phrasing)
- Встроенный контент (Embedded)
- Интерактивный контент (Interactive)
- Явный контент (Palpable)
Для того, чтобы понять, как контентные модели располагаются на веб-странице и взаимодействуют друг с другом, приводим следующую иллюстрацию.
Как видите, в некоторых местах контентные модели перекрывают друг друга, а это значит, что в данной модели есть элементы, которые принадлежат одновременно к нескольким категориям. Так секционный, заголовочный, текстовой, встроенный, интерактивный контент, а также некоторая часть метаданных относятся к потоковому контенту. Метаданные и интерактивный контент в некоторых случаях могут относится к текстовому контенту. Встроенный контент может также одновременно быть текстовым, однако часть элементов при этом может относится к интерактивному контенту.
Стоит еще отметить, что есть элементы, которые используются для конкретных целей, например, для определения форм. Такие элементы не относятся к любой из данных категорий.
Метаданные
К метаданным относят элементы, которые содержат дополнительную информацию об HTML-документе, связывают его с другими документами (например, таблицами стилей css), определяют внешний вид или поведение контента на странице. На странице метаданные не отображаются.
Элементами метаданных являются: <base> , <link> , <meta>, <noscript>, <script>, <style>, <template> и <title>.
Потоковый контент
К потоковому содержимому относят большинство элементов, которые используются в теле документа (между тегами <body></body>) или веб-приложения относятся к потоковому контенту.
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.
Указанные ниже элементы также относят к потоковым, но только при наличии определенных условий:
- <area> только внутри элемента <map>
- <link> при наличии атрибута itemprop
- <meta> при наличии атрибута itemprop
- <style> при наличии атрибута scoped
Секционный контент
К секционному контенту относятся элементы, которые создают отдельные секции в структуре документа, существующие независимо друг от друга, такие как заголовочная часть (header), нижний колонтитул (footer) и т.д. Отметим также, что у каждой самостоятельной секции может быть свой заголовок и оглавление (outline).
Элементами секционного содержимого являются <article>, <aside>, <nav> и <section>.
Заголовочный контент
Заголовочный контент содержит элементы, определяющие заголовки разделов, которые размечены элементами секционного контента или же подразумеваются исходя из содержания заголовка.
К элементам заголовочного контента относятся <h1>, <h2>, <h3>, <h4>, <h5>, <h6> и <hgroup>.
Текстовой контент
К текстовому контенту относятся элементы, определяющие текст и его формат, а именно: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small> <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> и <wbr>.
Указанные ниже элементы также относят к текстовым при наличии определенных условий:
- <a>, если содержит только текстовой контент
- <area> только внутри элемента <map>
- <del>, если содержит только текстовой контент
- <ins>, если содержит только текстовой контент
- <link> при наличии атрибута itemprop
- <map>, если содержит в себе только текстовой контент
- <meta> при наличии атрибута itemprop
Встроенный контент
Встроенным называется контент, импортируемый в HTML-документ из других ресурсов. Некоторые элементы могут содержать альтернативный контент, который будет отображаться, если внешний ресурс не может быть использован (например, в случае, если браузер не поддерживает формат видео).
Встроенная контентная модель содержит следующие элементы: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>.
Интерактивный контент
Интерактивными считаются элементы, разработанные для взаимодействия с пользователем. К данной контентной модели относятся элементы <a>(если присутствует атрибут href), <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> и <textarea>.
Указанные ниже элементы также относят к интерактивным при наличии определенных условий:
- <audio>, если указан атрибут controls
- <img>, если указан атрибут usemap
- <input>, если атрибут type не скрыт (hidden)
- <menu>, если значением атрибута type является toolbar
- <object>, если указан атрибут usemap
- <video>, если указан атрибут controls
Явный контент
Элементы контентных моделей, которые позволяют содержать в себе любой потоковый или текстовой контент, должны иметь как минимум один дочерний блок, который будет явным контентом и у которого не будет атрибута со значением hidden.
Это требование не является обязательным, бывают случаи, где элемент может быть пустым. Например, элемент может быть заполняться содержанием от действия стороннего скрипта.
Вторичные категории контента
Помимо основных контентных моделей существуют также вторичные категории. Это элементы поддержки скриптов , <script> и <template>, которые служат для внедрения скриптов, путем либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами. Элементами поддержки скриптов являются: Элементы <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> и <td> относят к корневым секционным. В категорию прозрачной контентной модели входят элементы <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> и <video>, которые наследуют тип содержимого родительского элемента. Помимо собственного контента они могут содержать контент, допустимый в их родительском элементе.
Практикуйте свои знания
