Вложенность и родственные связи

Посмотрим на страницу, которую мы построили на данный момент:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Моя первая страница</title>
	</head>
	<body>
	</body>
</html>

Одни элементы находятся внутри других: head и body — внутри html, а meta и title — внутри head. Помните, что содержимым элемента могут быть другие элементы. Когда мы помещаем один элемент внутрь другого, мы говорим, что вкладываем его.

Чтобы описать, как связаны между собой вложенные элементы, мы берём слова из мира семьи:

• Родитель — элемент, внутри которого непосредственно находится другой элемент. html — родитель для head и body.
• Потомок (дочерний элемент) — элемент, который находится непосредственно внутри другого элемента. title — потомок head.
• Соседние элементы (братья) — элементы с одним и тем же родителем. head и body соседние, как и meta с title.

Теперь давайте добавим потомков в body, чтобы на нашей странице наконец что-то появилось. Кроме заголовка h1 мы используем элемент p — от слова paragraph, «абзац». Абзацы мы рассмотрим подробнее на следующем уроке.