Карточка тега |
22 |
|
23
Основные поля:
Categories — здесь перечислены категории, или типы тегов, к которым этот тег относится.
Content model — модель содержимого. Описывает, какое содержимое может быть внутри этого тега.
Contents attributes — описывает, какие атрибуты могут быть у этого тега.
Вспомогательные поля:
Поле Tag Omission — показывает, когда тег можно не закрывать.
Aria — дополнительные атрибуты для доступности. Поля, которые нужны в большей степени для JavaScript.
Чтобы определить правила вложенности тегов мы с вами будем 24 работать с двумя полями — Categories и Content model.
Категории тегов |
25 |
|
Существует два основных типа тегов: теги Flow — поточные, и теги, которые относятся к метаданным — Metadata.
Metadata — это всё, что может находиться в теге <head> — дополнительная информация, которая может влиять на всю страницу.
Flow — это всё то, что находится внутри <body>. То есть, всё, что мы можем своими
глазами увидеть — содержание страницы.
Подкатегории Flow |
26 |
|
Heading content — самая простая подкатегория, заголовочные теги: <h1>, <h2>, <h3> и т. д.
27
Sectioning content — теги, предназначенные для создания крупных смысловых разделов на странице: <article>, <aside>, <nav>, <section>.
Подкатегории Flow |
28 |
|
Phrasing content — фразовые теги, небольшие слова или словосочетания, что-то мелкое: <a>, <em>, <i>, <span> и т. д.
29
Embedded content — встраиваемый контент, подмножество Phrasing content. Это вещи, которые не являются частью языка HTML, но их надо отрисовать на странице.
30
Interactive content — интерактивный контент, с которым можно как-то взаимодействовать.
31
Interactive content — интерактивный контент, с которым можно как-то взаимодействовать.
32
Можно ли тег <p> вложить в тег <li>?
Алгоритм работы:
1.Проверяем модель содержания (поле content model) тега, в который вкладывается другой тег. Чаще всего там перечисляются категории тегов, которые можно вкладывать внутрь, но бывают и дополнительные требования. В нашем случае у тега <li> в content model находится flow content.
2.Проверяем категории (поле categories) тега, который вкладываем в другой тег. В нашем случае у тега <p> категории flow и palpable.
3.Если есть совпадения между моделью содержания родительского тега и категориями дочернего тега, то вкладывать можно. В нашем случае в <li> можно вкладывать flow content, а <p> к этой категории принадлежит, значит, и <p> в <li> вкладывать можно.
33
34
Прозрачная модель содержания
35
Можно ли вложить <h1> в <a>?
Алгоритм работы:
1. Проверяем модель содержания тега a. Она transparent, прозрачная. Также есть дополнительные ограничения, что в ссылку нельзя вставлять другие ссылки и интерактивные элементы.
!!! На первом шаге мы встретили прозрачную модель, поэтому алгоритм немного усложняется.
2.Проверяем модель содержания родительского тега, то есть того тега, в который вложен тег <a>. Допустим, это был тег <p>, у которого модель содержания — phrasing content.
3.Проверяем категории (поле categories) тега <h1> — это flow и heading.
4.В <p> можно вкладывать phrasing content, а <h1> к этой категории не принадлежит, значит <h1> в <p> вкладывать нельзя, и <h1> в <a> тоже нельзя вкладывать.
36