1.16. Контентная модель HTML5

Язык разметки HTML формирует структуру веб-страницы, а теги используются для идентификации типа содержимого на странице. Семантика HTML5 добавляет каждому тегу ещё больше смысла, помогая эффективно организовывать контент и использовать теги по назначению.

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

Модель содержимого HTML5

Контентная модель (content model), или модель содержимого, описывает, какой тип содержимого следует ожидать внутри элемента и какие элементы могут быть вложены в другие элементы. Большинство элементов принадлежат одной категории или нескольким категориям одновременно.

К содержимому элемента относится текст и его дочерние элементы. Если элемент не содержит текст (отличный от пробелов между элементами) и любой другой элемент, он принадлежит «никакой» модели содержимого.

1. Типы содержимого

Рис. 1. Категории контента

Каждый элемент в HTML принадлежит ноль или более категориям, которые группируют элементы со схожими характеристиками. Выделяют следующие общие категории:

  • Мета содержимое
  • Потоковое содержимое
  • Секционное содержимое
  • Заголовочное содержимое
  • Текстовое содержимое
  • Встроенное содержимое
  • Интерактивное содержимое

Секционное, заголовочное, текстовое, встроенное и интерактивное содержимое относятся к потоковому содержимому. Мета содержимое иногда может относиться к потоковому содержимому. Мета содержимое и интерактивное содержимое иногда относятся к текстовому содержимому. Встроенное содержимое также относится к текстовому содержимому, но часть элементов также является интерактивным содержимым.

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

2. Основные категории содержимого

2.1. Мета содержимое

<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>

К мета содержимому относятся элементы, которые содержат информацию о HTML-документе, устанавливают взаимосвязь HTML-документа с другими документами (например, таблицами стилей css), отвечают за внешний вид или поведение контента на странице. Элементы из другого пространства имён, чей смысл связан с метаданными, также относятся к мета содержимому.

2.2. Потоковое содержимое

<a>, <abbr>, <address>, <area> (если он является потомком элемента <map>), <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>, <link> (если его присутствие внутри тела документа допускается), <main>, <map>, <mark>, MathML, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>, текст

К этому типу содержимого относится большинство элементов, используемых в теле документа или веб-приложения.

2.3. Секционное содержимое

<article>, <aside>, <nav>, <section>

Секционное содержимое — содержимое, определяемое областью заголовков и колонтитулов. Каждый элемент секционного содержимого потенциально имеет заголовок и схему (outline).

2.4. Заголовочное содержимое

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

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

2.5. Текстовое содержимое

<a>, <abbr>, <area> (если он является потомком элемента <map>), <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link> (если его присутствие внутри тела документа допускается), <map>, <mark>, MathML, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <template>, <textarea>, <time>, <u>, <var>, <video>, <wbr>, текст

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

2.6. Встроенное содержимое

<audio>, <canvas>, <embed>, <iframe>, <img>, MathML, <math>, <object>, <picture>, SVG, <svg>, <video>

Встроенное содержимое — содержимое, которое импортируется в документ из других источников, другого языка разметки или пространства имён. Некоторые элементы могут иметь резервный контент, который будет задействован, если внешний ресурс не может быть использован (например, в случае неподдерживаемого формата видео).

2.7. Интерактивное содержимое

<a> (если присутствует атрибут href), <audio> (если присутствует атрибут controls), <button>, <details>, <embed>, <iframe>, <img> (если присутствует атрибут usemap), <input> (если значение атрибута type не равно hidden), <label>, <select>, <textarea>, <video> (если присутствует атрибут controls)

Интерактивное содержимое предполагает взаимодействие с пользователем. Атрибут tabindex также может сделать любой элемент интерактивным содержимым.

3. Дополнительные категории содержимого

3.1. Явное содержимое

<a>, <abbr>, <address>, <article>, <aside>, <audio> (если присутствует атрибут controls), <b>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, <data>, <details>, <dfn>, <div>, <dl> (если он содержит по крайней мере одну пару термин-описание), <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, <input> (если значение атрибута type не равно hidden), <ins>, <kbd>, <label>, <main>, <map>, <mark>, MathML, <math>, <menu> (если значение атрибута type равно toolbar), <meter>, <nav>, <object>, <ol> (если он содержит по крайней мере один элемент <li>), <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, SVG, <svg>, <table>, <textarea>, <time>, <u>, <ul> (если он содержит по крайней мере один элемент <li>), <var>, <video>, текст, не являющийся пробелом между элементами

Как правило, элементы, принадлежащие модели потокового или текстового содержимого, должны иметь минимум один узел, который имеет явное содержимое и для него не задан атрибут hidden. Явное содержимое делает элемент непустым. Это обеспечивается тем, что элемент содержит потомка с текстом или каким-либо содержимым, которое пользователь может слышать (элемент kbd><audio>), видеть (элемент <canvas>, <img> или <video>) или каким-либо образом взаимодействовать с ним (интерактивные элементы форм).

Это требование не является жёстким, так как в некоторых случаях элемент может быть пустым по очевидным причинам (например, он в последствии будет наполняться с помощью скрипта).

3.2. Элементы, поддерживающие скрипт

<script>, <template>

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

3.3. Корневое секционное содержимое

<blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure>, <td>

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

4. Прозрачная модель содержимого

<a>, <audio>, <canvas>, <del>, <ins>, <map>, <object>, <video>

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

  • Здравствуйте. Всё перечитал, но нигде не нашёл. Во что обернуть много форм? Они у меня вынесены за и облачены в , плюс каждая форма в .

    Формы разные: выбор станции метро, отправка заявки, просмотр статуса заказа и другие.

    • Здравствуйте. Элементы и — секционные элементы и их нельзя рассматривать как просто блоки-обертки. Как правило они содержат заголовки, с помощью которых создается структура (оглавление) документа, хотя на практике этот алгоритм до сих пор не реализован.
      Элемент относится к потоковому содержимому, то есть главное требование к этому элементу — он должен быть расположен внутри элемента . Дополнительные блоки-обертки могут быть, а могут и не быть. То есть в вашем случае разметка сделана не верно.

      • Елена, спасибо большое за ответ! У меня там не только формы, но и нумерованные списки и прочая лабудень, типа интерактивных форм (не form). Хочется указать яндексу, гуглу и другим, что это неважный контент и индексировать его необязательно.

        Обернуть в aside? или?

        • Пожалуйста! Элемент aside вместе с заголовками так же участвует в формировании оглавления страницы. Для чего это вообще было задумано: чтобы человек с плохим зрением мог свободно ориентироваться в содержимом страницы при использовании программы чтения с экрана. HTML5 outline алгоритм до сих пор не реализован во всех браузерах, поэтому, как я думаю, смысл использования новых тегов в разметке больше в удобстве, то есть не нужно задавать дополнительные классы или идентификаторы. Хотя если у вас на странице две боковые колонки, то вся прелесть минимизации разметки теряется. Поэтому секционные элементы, которые формируют оглавление страницы, можно и не использовать вовсе.
          И если вы вынесете эти блоки в боковую колонку, не пострадает ли от этого юзабельность?
          В отношении повторяющегося контента и его неиндексации можете почитать разъяснение гугл по этому вопросу https://support.google.com/webmasters/answer/66359?hl=ru. А с закрытием от индексации вовсе нужно действовать осторожно, дабы не попасть под фильтры ПС.