DEV Community

Cover image for (web, html) — Категории контента.(Content categories)
Rafael
Rafael

Posted on • Edited on

(web, html) — Категории контента.(Content categories)

#web #html #russian
  • В HTML5 элементы группируются по категориям контента (content categories) — они определяют, где и как можно использовать те или иные теги, а также какие элементы допустимо вкладывать друг в друга.
  • Content categories

Контентная модель - это набор правил, которые определяют можно ли использовать некоторый HTML-элемент в некотором контенте или нет.

Основные категории контента в HTML5

  • Flow content (поток) — основной контент страницы, который размещается внутри . Сюда относится большинство элементов: параграфы, списки, заголовки, формы, медиа и т. д.
    -Примеры: <p>, <div>, <ul>, <article>, <form>.

  • Metadata content (метаданные) — информация о документе или инструкции для браузера, обычно размещается в (но некоторые элементы могут быть и в ).
    -Примеры: <meta>, <link>, <style>, <title>, <base>.

  • Sectioning content (секционный контент) — элементы, создающие логические разделы документа и формирующие его структуру (оглавление).

    • Примеры: <article>, <aside>, <nav>, <section>.

  • Heading content (заголовочный контент) — заголовки, определяющие название раздела.

    • Примеры: <h1>–<h6>.

  • Phrasing content (фразовый контент) — текстовые фрагменты и элементы, размеченные внутри строк. По сути, это «текстовый уровень» разметки.

    • Примеры: <span>, <a>, <strong>, <em>, <code>.

  • Embedded content (встроенный контент) — ресурсы, импортированные из внешних источников или на другом языке разметки (картинки, видео, canvas, SVG и т. п.).

    • Примеры: <img>, <video>, <audio>, <canvas>, <iframe>.

  • Interactive content (интерактивный контент) — элементы, предназначенные для взаимодействия с пользователем.

    • Примеры: <a> (со ссылкой), <button>, элементы форм (<input>, <select> и др.)

Примечания

  • Один элемент может относиться к нескольким категориям. Например, <a> — это одновременно flow, phrasing и interactive контент.
  • Категории задают правила вложенности. К примеру, в элемент, который по спецификации принимает только phrasing content, нельзя вкладывать блочные элементы вроде <div> или <p>.
  • «Прозрачная» модель контента. У некоторых элементов (например, <label>, <a>) модель контента «прозрачная»: они принимают тот тип контента, который допустим для их родителя.

Ресурсы

Top comments (0)