Различия

Показаны различия между двумя версиями страницы.

@@ Строка 1: / Строка 1: @@
+====== Категории контента ======
+Каждый элемент HTML принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задаёт на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит ни в одну из этих категорий.
+Существует три типа категорий контента:
+  * Основные категории контента, описывающие общие для многих элементов правила;
+  * Категории контента для элементов форм, описывающие общие правила для элементов форм;
+  * Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.
+<code>
+Примечание: Более подробное обсуждение данных категорий контента и их
+сравнительных особенностей выходит за рамки данной статьи; можно
+обратиться к соответствующим разделам спецификации HTML.
+</code>
+Content_categories_venn.png
+===== Основные категории контента =====
+==== Метаданные ====
+Элементы, принадлежащие к категории метаданных, изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую дополнительную информацию о документе.
+Элементами метаданных являются: [[software:development:ps_pycharm:html5:element:<base>|]], [[software:development:ps_pycharm:html5:element:<command>|]], [[software:development:ps_pycharm:html5:element:<link>|]], [[software:development:ps_pycharm:html5:element:<meta>|]], [[software:development:ps_pycharm:html5:element:<noscript>|]], [[software:development:ps_pycharm:html5:element:<script>|]], [[software:development:ps_pycharm:html5:element:<style>|]] и [[software:development:ps_pycharm:html5:element:<title>|]].
+==== Flow content ====
+Flow content (Основной поток) — это широкая категория, охватывающая большинство элементов, которые могут находиться внутри элемента <body>, включая элементы заголовков, элементы секционирования, элементы фраз, элементы внедрения, интерактивные элементы и элементы, связанные с формой. Он также включает текстовые узлы (но не те, которые состоят только из пробельных символов).
+Элементами потока являются:
+[[software:development:ps_pycharm:html5:element:<a>|]], [[software:development:ps_pycharm:html5:element:<abbr>|]], [[software:development:ps_pycharm:html5:element:<address>|]], [[software:development:ps_pycharm:html5:element:<article>|]], [[software:development:ps_pycharm:html5:element:<aside>|]], [[software:development:ps_pycharm:html5:element:<audio>|]], [[software:development:ps_pycharm:html5:element:<b>|]],[[software:development:ps_pycharm:html5:element:<bdo>|]], [[software:development:ps_pycharm:html5:element:<bdi>|]], [[software:development:ps_pycharm:html5:element:<blockquote>|]], [[software:development:ps_pycharm:html5:element:<br>|]], [[software:development:ps_pycharm:html5:element:<button>|]], [[software:development:ps_pycharm:html5:element:<canvas>|]], [[software:development:ps_pycharm:html5:element:<cite>|]], [[software:development:ps_pycharm:html5:element:<code>|]], [[software:development:ps_pycharm:html5:element:<command>|]], [[software:development:ps_pycharm:html5:element:<data>|]], [[software:development:ps_pycharm:html5:element:<datalist>|]], [[software:development:ps_pycharm:html5:element:<del>|]], [[software:development:ps_pycharm:html5:element:<details>|]], [[software:development:ps_pycharm:html5:element:<dfn>|]], [[software:development:ps_pycharm:html5:element:<div>|]], [[software:development:ps_pycharm:html5:element:<dl>|]], [[software:development:ps_pycharm:html5:element:<em>|]], [[software:development:ps_pycharm:html5:element:<embed>|]], [[software:development:ps_pycharm:html5:element:<fieldset>|]], [[software:development:ps_pycharm:html5:element:<figure>|]], [[software:development:ps_pycharm:html5:element:<footer>|]], [[software:development:ps_pycharm:html5:element:<form>|]], [[software:development:ps_pycharm:html5:element:<h1>|]] , [[software:development:ps_pycharm:html5:element:<h2>|]] , [[software:development:ps_pycharm:html5:element:<h3>|]] , [[software:development:ps_pycharm:html5:element:<h4>|]] , [[software:development:ps_pycharm:html5:element:<h5>|]] , [[software:development:ps_pycharm:html5:element:<h6>|]] , [[software:development:ps_pycharm:html5:element:<header>|]], [[software:development:ps_pycharm:html5:element:<hgroup>|]], [[software:development:ps_pycharm:html5:element:<hr>|]], [[software:development:ps_pycharm:html5:element:<i>|]] , [[software:development:ps_pycharm:html5:element:<iframe>|]] , [[software:development:ps_pycharm:html5:element:<img>|]], [[software:development:ps_pycharm:html5:element:<input>|]], [[software:development:ps_pycharm:html5:element:<ins>|]], [[software:development:ps_pycharm:html5:element:<kbd>|]], Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<label>|]], [[software:development:ps_pycharm:html5:element:<main>|]], [[software:development:ps_pycharm:html5:element:<map>|]], [[software:development:ps_pycharm:html5:element:<mark>|]], [[software:development:ps_pycharm:html5:element:<math>|]], [[software:development:ps_pycharm:html5:element:<menu>|]], [[software:development:ps_pycharm:html5:element:<meter>|]], [[software:development:ps_pycharm:html5:element:<nav>|]], [[software:development:ps_pycharm:html5:element:<noscript>|]], [[software:development:ps_pycharm:html5:element:<object>|]] , [[software:development:ps_pycharm:html5:element:<ol>|]], [[software:development:ps_pycharm:html5:element:<output>|]], [[software:development:ps_pycharm:html5:element:<p>|]], [[software:development:ps_pycharm:html5:element:<pre>|]], [[software:development:ps_pycharm:html5:element:<progress>|]], [[software:development:ps_pycharm:html5:element:<q>|]] , [[software:development:ps_pycharm:html5:element:<ruby>|]], [[software:development:ps_pycharm:html5:element:<s>|]] , [[software:development:ps_pycharm:html5:element:<samp>|]] , [[software:development:ps_pycharm:html5:element:<script>|]], [[software:development:ps_pycharm:html5:element:<section>|]], [[software:development:ps_pycharm:html5:element:<select>|]], [[software:development:ps_pycharm:html5:element:<small>|]] , [[software:development:ps_pycharm:html5:element:<span>|]], [[software:development:ps_pycharm:html5:element:<strong>|]], [[software:development:ps_pycharm:html5:element:<sub>|]] , [[software:development:ps_pycharm:html5:element:<sup>|]] , [[software:development:ps_pycharm:html5:element:<svg>|]], [[software:development:ps_pycharm:html5:element:<table>|]] , [[software:development:ps_pycharm:html5:element:<template>|]], [[software:development:ps_pycharm:html5:element:<textarea>|]] , [[software:development:ps_pycharm:html5:element:<time>|]], [[software:development:ps_pycharm:html5:element:<ul>|]], [[software:development:ps_pycharm:html5:element:<var>|]] , [[software:development:ps_pycharm:html5:element:<video>|]], [[software:development:ps_pycharm:html5:element:<wbr>|]] и Текст.
+Несколько других элементов, которые тоже принадлежат к этому типу, но требуют определённых условий:
+  * [[software:development:ps_pycharm:html5:element:<area>|]], только внутри элемента [[software:development:ps_pycharm:html5:element:<map>|]]
+  * [[software:development:ps_pycharm:html5:element:<link>|]], при наличии атрибута itemprop
+  * [[software:development:ps_pycharm:html5:element:<meta>|]], при наличии атрибута itemprop
+  * [[software:development:ps_pycharm:html5:element:<style>|]], при наличии атрибута scoped
+==== Секционный контент ====
+Подобные элементы создают секции (блоки) в текущей структуре документа, определяющие область действия заголовочного контента и элементов [[software:development:ps_pycharm:html5:element:<header>|]] и [[software:development:ps_pycharm:html5:element:<footer>|]]
+К этой категории принадлежат элементы [[software:development:ps_pycharm:html5:element:<article>|]], [[software:development:ps_pycharm:html5:element:<aside>|]], [[software:development:ps_pycharm:html5:element:<nav>|]] и [[software:development:ps_pycharm:html5:element:<section>|]].
+Примечание: Не стоит путать данную модель контента с категорией корня задания разделов, которая изолирует своё содержимое от обычной структуры.
+==== Заголовочный контент ====
+Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.
+Данной категории принадлежат такие элементы, как [[software:development:ps_pycharm:html5:element:<h1>|]] , [[software:development:ps_pycharm:html5:element:<h2>|]] , [[software:development:ps_pycharm:html5:element:<h3>|]] , [[software:development:ps_pycharm:html5:element:<h4>|]] , [[software:development:ps_pycharm:html5:element:<h5>|]] , [[software:development:ps_pycharm:html5:element:<h6>|]]  и [[software:development:ps_pycharm:html5:element:<hgroup>|]].
+<file>
+Примечание: Элемент <header>сам по себе не является заголовочным, хотя с большой вероятностью
+содержит контент такого типа.
+</file>
+<file>
+Примечание: Стоит заметить, что элемент <hgroup> был удалён из спецификации W3C HTML до приведения
+HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней
+мере частично поддерживается большинством браузеров.
+</file>
+==== Фразовый контент ====
+Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.
+К данной категории принадлежат следующие элементы: [[software:development:ps_pycharm:html5:element:<abbr>|]], [[software:development:ps_pycharm:html5:element:<audio>|]], [[software:development:ps_pycharm:html5:element:<b>|]], [[software:development:ps_pycharm:html5:element:<bdo>|]], [[software:development:ps_pycharm:html5:element:<br>|]], [[software:development:ps_pycharm:html5:element:<button>|]], [[software:development:ps_pycharm:html5:element:<canvas>|]], [[software:development:ps_pycharm:html5:element:<cite>|]], [[software:development:ps_pycharm:html5:element:<code>|]], [[software:development:ps_pycharm:html5:element:<command>|]], [[software:development:ps_pycharm:html5:element:<data>|]], [[software:development:ps_pycharm:html5:element:<datalist>|]], [[software:development:ps_pycharm:html5:element:<dfn>|]], [[software:development:ps_pycharm:html5:element:<em>|]], [[software:development:ps_pycharm:html5:element:<embed>|]], [[software:development:ps_pycharm:html5:element:<i>|]] , [[software:development:ps_pycharm:html5:element:<iframe>|]] , [[software:development:ps_pycharm:html5:element:<img>|]], [[software:development:ps_pycharm:html5:element:<input>|]], [[software:development:ps_pycharm:html5:element:<kbd>|]], Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<label>|]], [[software:development:ps_pycharm:html5:element:<mark>|]], [[software:development:ps_pycharm:html5:element:<math>|]], [[software:development:ps_pycharm:html5:element:<meter>|]], [[software:development:ps_pycharm:html5:element:<noscript>|]], [[software:development:ps_pycharm:html5:element:<object>|]] , [[software:development:ps_pycharm:html5:element:<output>|]], [[software:development:ps_pycharm:html5:element:<progress>|]], [[software:development:ps_pycharm:html5:element:<q>|]] , [[software:development:ps_pycharm:html5:element:<ruby>|]], [[software:development:ps_pycharm:html5:element:<samp>|]] , [[software:development:ps_pycharm:html5:element:<script>|]], [[software:development:ps_pycharm:html5:element:<select>|]], [[software:development:ps_pycharm:html5:element:<small>|]] , [[software:development:ps_pycharm:html5:element:<span>|]], [[software:development:ps_pycharm:html5:element:<strong>|]], [[software:development:ps_pycharm:html5:element:<sub>|]] , [[software:development:ps_pycharm:html5:element:<sup>|]] , [[software:development:ps_pycharm:html5:element:<svg>|]], [[software:development:ps_pycharm:html5:element:<textarea>|]] , [[software:development:ps_pycharm:html5:element:<time>|]], [[software:development:ps_pycharm:html5:element:<var>|]] , [[software:development:ps_pycharm:html5:element:<video>|]], [[software:development:ps_pycharm:html5:element:<wbr>|]] и обычный текст (не только состоящий из символов пробелов).
+Ещё несколько элементов входят в данную категорию при соблюдении особых условий:
+  * [[software:development:ps_pycharm:html5:element:<a>|]], если содержит в себе только фразовый контент
+  * [[software:development:ps_pycharm:html5:element:<area>|]], только внутри элемента [[software:development:ps_pycharm:html5:element:<map>|]]
+  * [[software:development:ps_pycharm:html5:element:<del>|]], если содержит в себе только фразовый контент
+  * [[software:development:ps_pycharm:html5:element:<ins>|]], если содержит в себе только фразовый контент
+  * [[software:development:ps_pycharm:html5:element:<link>|]], при наличии атрибута [[software:development:ps_pycharm:html5:attribute:global_attributes#itemprop|]]
+  * [[software:development:ps_pycharm:html5:element:<map>|]], если содержит в себе только фразовый контент
+  * [[software:development:ps_pycharm:html5:element:<meta>|]], при наличии атрибута [[software:development:ps_pycharm:html5:attribute:global_attributes#itemprop|]]
+==== Embedded content ====
+Embedded content (встроенный контент) импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: [[software:development:ps_pycharm:html5:element:<audio>|]], [[software:development:ps_pycharm:html5:element:<canvas>|]], [[software:development:ps_pycharm:html5:element:<embed>|]], [[software:development:ps_pycharm:html5:element:<iframe>|]] , [[software:development:ps_pycharm:html5:element:<img>|]], [[software:development:ps_pycharm:html5:element:<math>|]], [[software:development:ps_pycharm:html5:element:<object>|]] , [[software:development:ps_pycharm:html5:element:<svg>|]], [[software:development:ps_pycharm:html5:element:<video>|]].
+==== Интерактивный контент ====
+К интерактивному контенту относятся элементы, который специально разработаны для взаимодействия с пользователем. В данную категорию входят [[software:development:ps_pycharm:html5:element:<a>|]], [[software:development:ps_pycharm:html5:element:<button>|]], [[software:development:ps_pycharm:html5:element:<details>|]], [[software:development:ps_pycharm:html5:element:<embed>|]], [[software:development:ps_pycharm:html5:element:<iframe>|]] , Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<label>|]], [[software:development:ps_pycharm:html5:element:<select>|]] и [[software:development:ps_pycharm:html5:element:<textarea>|]]. Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:
+  * [[software:development:ps_pycharm:html5:element:<audio>|]], если указан атрибут [[software:development:ps_pycharm:html5:element:<audio>#controls|]]
+  * [[software:development:ps_pycharm:html5:element:<img>|]], если указан атрибут [[software:development:ps_pycharm:html5:element:<img>#usemap|]]
+  * [[software:development:ps_pycharm:html5:element:<input>|]], если атрибут [[software:development:ps_pycharm:html5:element:<input>#type|]] не скрыт
+  * [[software:development:ps_pycharm:html5:element:<menu>|]], если атрибут [[software:development:ps_pycharm:html5:element:<menu>#type|]] имеет значение toolbar
+  * [[software:development:ps_pycharm:html5:element:<object>|]] , если указан атрибут [[software:development:ps_pycharm:html5:element:<object>#usemap|]]
+  * [[software:development:ps_pycharm:html5:element:<video>|]], если указан атрибут [[software:development:ps_pycharm:html5:element:<video>#controls|]]
+==== Явный контент ====
+Контент считается явным, когда он не скрыт и не является пустым, это контент, который отображён и предметен. У элементов потокового или фразового контента должен быть хотя бы один явный узел.
+==== Контент форм ====
+Контент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом form. Владельцем формы является либо элемент [[software:development:ps_pycharm:html5:element:<form>|]], либо элемент, id которого указан в атрибуте **form**.
+  * [[software:development:ps_pycharm:html5:element:<button>|]]
+  * [[software:development:ps_pycharm:html5:element:<fieldset>|]]
+  * [[software:development:ps_pycharm:html5:element:<input>|]]
+  * [[software:development:ps_pycharm:html5:element:<keygen>|]]
+  * [[software:development:ps_pycharm:html5:element:<label>|]]
+  * [[software:development:ps_pycharm:html5:element:<meter>|]]
+  * [[software:development:ps_pycharm:html5:element:<object>|]]
+  * [[software:development:ps_pycharm:html5:element:<output>|]]
+  * [[software:development:ps_pycharm:html5:element:<progress>|]]
+  * [[software:development:ps_pycharm:html5:element:<select>|]]
+  * [[software:development:ps_pycharm:html5:element:<textarea>|]]
+Данная категория включает несколько подкатегорий:
+listed
+Элементы, перечисленные в IDL коллекциях form.elements  и fieldset.elements. Включают [[software:development:ps_pycharm:html5:element:<button>|]], [[software:development:ps_pycharm:html5:element:<fieldset>|]], [[software:development:ps_pycharm:html5:element:<input>|]], Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<object>|]] , [[software:development:ps_pycharm:html5:element:<output>|]], [[software:development:ps_pycharm:html5:element:<select>|]], и [[software:development:ps_pycharm:html5:element:<textarea>|]] .
+=== labelable ===
+Элементы, которые могут ассоциироваться с элементами [[software:development:ps_pycharm:html5:element:<label>|]]. Включают [[software:development:ps_pycharm:html5:element:<button>|]], [[software:development:ps_pycharm:html5:element:<input>|]], Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<meter>|]], [[software:development:ps_pycharm:html5:element:<output>|]], [[software:development:ps_pycharm:html5:element:<progress>|]], [[software:development:ps_pycharm:html5:element:<select>|]] и [[software:development:ps_pycharm:html5:element:<textarea>|]] .
+=== submittable ===
+Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают [[software:development:ps_pycharm:html5:element:<button>|]], [[software:development:ps_pycharm:html5:element:<input>|]], Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<object>|]] , [[software:development:ps_pycharm:html5:element:<select>|]] и [[software:development:ps_pycharm:html5:element:<textarea>|]] .
+=== resettable ===
+Элементы, которые могут быть затронуты при сбросе данных формы. Включают [[software:development:ps_pycharm:html5:element:<input>|]], Устарело[[software:development:ps_pycharm:html5:element:<keygen>|]], [[software:development:ps_pycharm:html5:element:<output>|]],[[software:development:ps_pycharm:html5:element:<select>|]] и [[software:development:ps_pycharm:html5:element:<textarea>|]] .
+==== Вторичные категории ====
+Существуют некоторые вторичные классификации элементов, о которых тоже полезно знать.
+=== Элементы поддержки скриптов ===
+Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. Вместо этого они служат для внедрения скриптов, путём либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.
+Элементами поддержки скриптов являются:
+  * [[software:development:ps_pycharm:html5:element:<script>|]]
+  * [[software:development:ps_pycharm:html5:element:<template>|]]
+==== Прозрачная модель контента ====
+Если элемент обладает прозрачной моделью контента, его содержимое должно быть структурировано таким образом, чтобы оно оставалось валидным HTML5, даже при удалении прозрачного элемента или заменой его на дочерние элементы.
+Например, элементы [[software:development:ps_pycharm:html5:element:<del>|]] и [[software:development:ps_pycharm:html5:element:<ins>|]] являются прозрачными:
+<code>
+<p>Мы почитаем следующие истины <del><em>священными &amp; неоспоримыми </em></del>
+<ins> само собой разумеющимися </ins> </p>
+</code>
+Если удалить эти элементы, данный фрагмент всё равно будет представлять собой валидный HTML.
+<code>
+<p>Мы почитаем следующие истины <em>священными &amp; </em> само собой разумеющимися.</p>
+</code>
+==== Прочие модели контента ====
+Корень задания разделов.