HTML организован как коллекция родословных. Когда элемент содержится внутри другого элемента, он считается дочерним элементом этого элемента. Дочерний элемент называется вложенным в родительский элемент.
<body>
<p>This paragraph is a child of the body</p>
</body>
В приведенном выше примере элемент <p> вложен в элемент <body>. Элемент <p> считается дочерним элементом элемента <body>, а элемент <body> считается родительским. Вы также можете видеть, что мы добавили два пробела (используя пробел) для лучшей читаемости.
Поскольку может быть несколько уровней вложенности, эта аналогия может быть распространена на внуков, правнуков и не только. Отношения между элементами и их предками, и потомками известны как иерархия.
Давайте рассмотрим более сложный пример, который использует несколько новых тегов:
<body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>
В этом примере элемент <body> является родителем элемента <div>. Оба элемента <h1> и <p> являются дочерними элементами элемента <div>. Поскольку элементы <h1> и <p> находятся на одном уровне, они считаются братьями и сестрами и являются внуками элемента <body>.
Понимание иерархии HTML важно, потому что дочерние элементы могут наследовать поведение и стиль от своего родительского элемента. Вы узнаете больше об иерархии веб-страниц, когда начнете копаться в CSS.
