Один тэг внутри другого

Теги в HTML можно вкладывать друг в друга, создавая структуру, где один тег становится родителем, а вложенный тег — ребёнком. Это основа для создания сложных веб-страниц.

История: Семья тегов

Представь, что у нас есть семья тегов. Родительский тег — это большой дом, а внутри него живут дети, которые выполняют разные роли. Например, в доме <div> может быть стол <table>, а за ним сидит текст <p>.

Пример с вложенностью:

Создаём меню, где список (<ul>) — это "родитель", а каждый пункт меню (<li>) — это "ребёнок".

<div>
  <h1>Магическое меню</h1>
  <ul>
    <li><a href="https://example.com">Портал в другой мир</a></li>
    <li><a href="#treasures">Портал к сокровищам</a></li>
    <li><a href="mailto:wizard@example.com">Портал к магу</a></li>
  </ul>
</div>

Разбор:

1. <div> — это "родительский контейнер", внутри которого живут все элементы.
2. <ul> — "родитель" для своих детей <li>.
3. <li> — "родитель" для своих детей <a>.
4. <a> — "ребёнок", который выполняет роль ссылки.

Задание: Построй свою семью тегов

Шаги:

1. Создай файл family.html. Это будет дом для твоей семьи тегов.

2. Добавь родительский тег <div>.
Напиши в нём заголовок и текст описания:

<div> 
   <h1>Дом семьи тегов</h1> 
   <p>В этом доме живут различные теги: родители и их дети.</p> 
</div> 

3. Создай список детей.
Добавь список (<ul>), где каждый элемент (<li>) представляет ребёнка:

<ul> 
   <li>Старший ребёнок: <a href="https://example.com">Ссылка на внешний ресурс</a></li> 
   <li>Средний ребёнок: <a href="#info">Ссылка на описание</a></li> 
   <li>Младший ребёнок: <a href="mailto:parent@example.com">Ссылка для связи с родителем</a></li> 
</ul> 

4. Создай ссылку на внутренний раздел.
Внизу страницы добавь раздел с описанием, на который указывает ссылка:

<h2 id="info">Описание семьи тегов</h2> 
<p>Родительские теги могут содержать детей, а дети могут быть родителями для других тегов.</p> 

Итог:

У тебя получится HTML-страница, где:

• <div> — родитель всех элементов.
• <ul> — родитель для <li>.
• <li> — родитель для <a>.

Теги создают дерево, где каждый вложенный элемент выполняет свою роль. Такой подход помогает организовать структуру страниц в HTML.

Оставляю ссылку на доки html, css, js: https://doka.guide/
Очень важно, после каждого прочитанного материала, зайти и почитать по этой ссылке, в поиске вводите тэг который хотите разобрать.