Иерархия в HTML

HTML-документ — это как большое семейное древо, с родителями, братьями, детьми, предками и потомками.

Всё это происходит из возможности вкладывать одни элементы HTML внутрь других.

Вложения

Давайте напишем простой абзац и улучшим его путём разделения частей текста, вставив два строчных элемента:

<p>Сэр <strong>Алекс Фергюсон</strong> однажды сказал о Филиппо Индзаги: 
<q>Этот парень должен был родиться в положении вне игры</q>.</p>

В этой структуре:

• элемент <strong> задаёт слова «Алекс Фергюсон» более важными;
• <q> отмечает его цитату об Индзаги.

Тот факт, что <strong> отображается жирным шрифтом, является только поведением браузера по умолчанию. Помните, что вы должны выбирать элементы HTML в соответствии с их значением, а не как они выглядят.

В данном случае:

• <p> — родительский элемент для <strong> и <q>;
• <strong> и <q> — дочерние элементы для <р>;
• <strong> и <q> — братские элементы.

Порядок

Как работает вложение, зависит от расположения открывающего и закрывающего тегов.

Поскольку элемент HTML содержит открывающий тег, закрывающий тег и всё между ними, дочерний элемент должен быть закрыт до закрытия родительского элемента.

<!-- Это НЕВЕРНЫЙ код! :-( -->
<p>
  Этот код HTML не будет работать, потому что тег strong я открыл здесь, 
  <strong>но закрыл его только после абзаца.
</p></strong>

Поскольку <strong> был открыт после <р> (и, таким образом, считается потомком <р>), элемент <strong> должен быть закрыт перед родительским </р>.

<!-- Это правильный код. :-) -->
<p>
  Этот код HTML будет работать, потому что тег strong я открыл <strong>и закрыл</strong> правильно.
</p>

Глубина

Поскольку дочерние элементы сами по себе могут содержать другие дочерние элементы, то можно написать более глубокую иерархию внутри HTML-документа.

Наш абзац выше может быть частью статьи блога:

<article>
  <h1>Известные футбольные цитаты</h1>
  <p>
    Сэр <strong>Алекс Фергюсон</strong> однажды сказал о Филиппо Индзаги: 
    <q>Этот парень должен был родиться в положении вне игры</q>.
  </p>
  <p>
    При критике со стороны Джона Карью, <strong>Златан Ибрагимович</strong> ответил: 
    <q>То, что делает Карью с мячом, я могу сделать с апельсином.</q>
  </p>
  <p>
    <strong>Джордж Бест</strong> сказал: 
    <q>Я потратил много денег на выпивку, девчонок и быстрые автомобили. 
       Остальное я просто промотал</q>, —  
    когда его спросили о его образе жизни.
  </p>
</article>

В этой структуре:

• <article> является предком для любого другого элемента;
• <article> является родителем для <h1> и трёх <р>;
• <h1> и три <р> являются братскими друг для друга;
• каждый <р> является родителем для <strong> и <q>, которые в них содержатся;
• каждый <h1>, <p>, <strong> и <q> — это всё потомки <article>.

Аналогия с семейным древом также применяется при прохождении нескольких слоёв вложений в HTML:

• потомок элемента X — это любой элемент внутри X;
• ребёнок — это просто прямой потомок;
• предком элемента Y является любой элемент;
• родитель — это лишь первый прямой предок.

Вложения блоков и строк

Блочные элементы могут содержать блочные или строчные элементы.

Однако, строчные элементы могут содержать только другие строчные элементы (за исключением элемента <a>).

<!-- Это НЕВЕРНЫЙ код! :-( -->
<strong>
  <p>Вы не можете поместить абзац внутрь тега strong.
</strong>

Просто запомните — предок/потомок, родитель/ребёнок, братья. Эта иерархия будет полезна в CSS.