Типы html элементов

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

Каждый html элемент имеет модель которая, описывает ожидаемое содержимое.

То есть модель содержимого - это описание того какие элементы и текст могут вкладываться в html элемент.

При этом html элемент может содержать только то, что указано в его модели содержимого, нарушение этого является ошибкой.

Содержимое элемента - это его дочерние узлы в DOM дереве.

Пробелы между элементами при этом разрешены, они представляют собой текстовый узел.

В итоге html документ должен быть структурирован в соответствии с правилами установленными в спецификации, и что определенные типы узлов не влияют на семантическое значение документов.

Группы элементов

Все html элементы согласно спецификации делят по их логической роли. Один элемент может попадать в несколько категорий сразу.

Связи между группами элементов показаны на схеме.

Группы элементов html

• Flow (Потоковый) - самая общая группа элементов, которые составляют поток документа
• Sectioning (Секции) - элементы создают секции в документе. Они определяют структуру документа.
• Heading (Заголовки) - определяют заголовки разделов.
• Phrasing (Фразы) - элементы, которые определяют текст, и как он будет отформатирован внутри текстовых блоков.
• Embedded (Встроенный) - импорт или встраивание других ресурсов в документ.
• Interactive (Интерактивный) - элементы предназначенные для взаимодействия с пользователем.
• Metadata (Метаданные) - элементы содержат мета информацию о документе.

Как эти группы связаны между собой:

• Sectioning и Heading используются для структурирования Flow контента.
• Phrasing внутри Flow используется для создания текста
• Embedded и Interactive могут быть частью Phrasing и Flow контента
• Metadata обычно это элементы к которым нет доступа, но могут быть элементы во Flow контенте.

Так же еще есть дополнительные группы элементов:

• Form-associated elements - элементы связанные с формами и участвующие в ее отправке
• Listed elements - это элементы, которые есть в API form.elements и fieldset.elements
• Submittable elements - элементы которые могут отправлять из формы
• Resettable elements - элементы формы которые можно сбрасывать
• Autocapitalize-and-autocorrect-inheriting elements - элементы, которые наследуют атрибуты autocapitalize и autocorrect от элемента form.
• Labelable elements - элементы в которых можно использовать элемент label.
• Palpable - содержимое элементов этой группы, которое визуально физически воспринимается пользователем, например, текст, изображения, видео и другие элементы, которые можно “ощутить” на странице. Это контент, который виден и доступен для взаимодействия.
• Script-supporting elements - элементы которые поддерживают скрипты, но сами по себе никак не отображаются на странице
• select element inner content elements - элементы которые разрешены в качестве потомков select.
• optgroup element inner content elements - элементы которые разрешены в качестве потомков optgroup.
• option element inner content elements - элементы которые разрешены в качестве потомков option.

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