# Родственные связи тегов в HTML

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

Рассмотрим для примера следующий код:

`<ul> <li>paragraph <i>italic</i></li> <li>paragraph <i>italic</i></li> <li>paragraph <i>italic</i></li> <li>paragraph <i>italic</i></li> </ul>`

В данном случае мы можем сказать, что теги `i` в этом коде являются потомками тегов `li`, а также являются потомками тега `ul`. При этом для каждого нашего тега `i` тег `li` является непосредственным родителем (отцом), а тег `ul` - дедушкой.

Что можно сказать про наши теги `li`? Они являются потомками тега `ul` и при этом сами являются родительскими для тегов `i`. Ну, а тег `ul` является родителем тегам `li` и тегам `i`. При этом для тегов `li` наш тег `ul` - непосредственный родитель.

Дан следующий код:

`<ul> <li>text <a href="">link</a></li> <li>text <a href="">link</a></li> <li>text <a href="">link</a></li> <li>text <a href=""><b>bold link</b></a></li> </ul>`

Расскажите какие родительские связи вы видите.

Дан следующий код:

`<table> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> </tr> <tr> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> <tr> <td>cell 7</td> <td>cell 8</td> <td>cell 9</td> </tr> </table>`

Расскажите какие родительские связи вы видите.

Дан следующий код:

`<p> This is a paragraph with text <i><b>bold italic</b></i> <a href="">link <i>italic</i></a>. </p>`

Какие потомки есть у абзаца? Какие непосредственные потомки есть у абзаца?

Дан следующий код:

`<p> <a href="">link <i><b>bold italic</b></i></a> </p>`

Расскажите, какие родители есть у тега `b`. Кто является его непосредственным родителем?

← →
↑