DEV Community

Cover image for Flow контент
Rafael
Rafael

Posted on

Flow контент

#webdev #html #russian

Исправления черновика

Тег <figcaption>: Автор статьи указывает, что тега <figcaption> нет в исходном списке. Однако, согласно спецификации HTML, <figcaption> сам по себе относится к категории Flow контент. То, что его забыли включить в общий перечень, — это методический пропуск.

Тег <text>: В конце списка элементов действительно написано слово «text». Автор статьи предположил, что это несуществующий тег. На самом деле в спецификации под словом «text» в списках категорий контента подразумеваются текстовые узлы (Inter-element text), которые легитимно могут являться частью потока (flow). Также тег существует в спецификации SVG, которая полностью валидна внутри HTML5.

Flow контент

Контент типа flow включает в себя большинство элементов HTML 5. В этой категории представлены элементы с которыми обычно приходиться сталкиваться при создании HTML-документа.

Flow контент должен находиться в элементе body, т.к. именно его содержимое определяет поток, который будет выводиться в рабочую область окна или вкладки браузера. Важно отметить ещё то, что если контент представлен как flow, то это ни каким образом не влияет на отображение элемента в браузере (пользовательском агенте).

HTML-элементы, принадлежащие к flow контенту: a, abbr, address, area (если он является потомком элемента map), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text.

Flow контент является основным, в некотором смысле родительским контентом, который может содержать более специализированное содержание.

Самые основные теги этой группы

№ Группа Количество тегов Какие входят
1 Структура документа 6 <body>, <header>, <main>, <footer>, <section>, <nav>
2 Контейнеры и обёртки 2 <div>, <span>
3 Текстовое содержимое 4 <p>, <h1>, <h2>, <br>
4 Списки 2 <ul>, <li>
5 Ссылки и мультимедиа 2 <a>, <img>
6 Формы и управление 5 <form>, <input>, <button>, <label>, <select>
ИТОГО: 21

1. Структура и семантическая разметка (Скелет страницы)

Эти теги определяют логические блоки и структуру документа.

  • Основные блоки: <article>, <aside>, <header>, <footer>, <main>, <nav>, <section>, <div> (универсальный контейнер).
  • Смысловые акценты: <address> (контактная инфа), <figure> / <figcaption> (подпись к иллюстрации, в вашем списке есть figure, но нет figcaption).

2. Заголовки и текстовое содержимое

  • Заголовки: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
  • Абзацы и блоки текста: <p>, <pre> (форматированный текст), <blockquote> (цитата), <hr> (горизонтальный разделитель).
  • Списки: <ol> (нумерованный), <ul> (маркированный), <dl> (список определений).

3. Встроенное форматирование текста (Inline-элементы)

  • Логическое выделение (семантика):
    • <strong> (важность), <em> (акцент), <b> (стилистически жирный), <i> (стилистически курсив).
    • <cite> (название источника), <q> (короткая цитата), <dfn> (термин), <abbr> (аббревиатура).
    • <code> (код), <kbd> (клавиатурный ввод), <samp> (вывод программы), <var> (переменная).
    • <mark> (выделение цветом), <time> (дата/время), <data> (данные в машинном формате).
  • Техническое/стилистическое:
    • <span> (универсальный контейнер для текста), <small> (мелкий шрифт), <s> (зачеркнутое), <u> (подчеркнутое).
    • <sub> (нижний индекс), <sup> (верхний индекс).
    • <br> (перенос строки), <wbr> (возможный перенос).
    • <bdi> / <bdo> (управление направлением текста).

4. Мультимедиа и графика

  • Встраиваемые объекты: <img> (картинка), <audio> (звук), <video> (видео), <canvas> (рисование), <svg> (векторная графика).
  • Встраивание внешних документов: <iframe>, <embed>, <object>.

5. Формы и элементы управления (Интерактив)

  • Контейнеры форм: <form>, <fieldset> (группа полей).
  • Поля ввода: <input> (универсальное), <textarea> (текстовая область), <select> (выпадающий список), <datalist> (автоподстановка), <keygen> (устаревший, генерация ключей).
  • Метки и кнопки: <label>, <button>.
  • Индикаторы: <progress> (прогресс-бар), <meter> (измеритель).
  • Результат: <output> (результат вычислений).

6. Ссылки и навигация

  • <a> (гиперссылка).
  • <map> / <area> (карта ссылок на изображении).

7. Шаблоны и скрытые данные

  • <template> (шаблон для JS).
  • <noscript> (контент, если скрипты отключены).
  • <script> (сам скрипт — хотя он не является flow-контентом в классическом смысле, он упомянут в вашем списке).

8. Специфические и табличные данные

  • Таблицы: <table>. (В вашем списке нет <tr>, <td>, <th>, но вы указали <table> как flow-элемент, поэтому я его сюда помещаю).

Важное примечание по вашему списку

Вы написали в конце: ... text.
Тега <text> в стандартном HTML не существует. Вероятно, вы имели в виду:

  • Обычный текстовый узел (не тег).
  • Или тег <textarea> (который уже есть в списке).
  • Или тег <plaintext> / <xmp> (устаревшие). Поэтому я проигнорировал text как отдельный тег.

Top comments (0)