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 ключевым для создания эффективных и красивых веб-страниц.