HTML обычно структурируется как набор родословных связей. Каждый элемент может быть родителем, ребёнком или sibling (родственным элементом) по отношению к другим элементам.
Пример
<body>
<header>
<h1>Мое недавнее путешествие</h1>
</header>
<main>
<h2>Обзор</h2>
<h3>
<ol>
<li>Москва</li>
<li>Маршрут поездки</li>
</ol>
</h3>
</main>
</body>
В примере выше:
-
Элемент <h2>Обзор</h2> является дочерним по отношению к <main>.
-
Элементы <li>Москва</li> и <li>Маршрут поездки</li> находятся на одном уровне — они являются sibling-элементами (родственными).
-
И <header>, и <main> являются дочерними элементами по отношению к <body>.
Иерархия HTML играет важную роль, особенно при изучении CSS. Дочерние элементы наследуют поведение и стили от своих родительских элементов, что делает понимание структуры HTML ключевым для создания эффективных и красивых веб-страниц.