Урок 49 із 239
21%
← Назад

Споріднені зв’язки тегів в HTML

Розбираємо поняття батьківських елементів, нащадків та безпосередніх зв’язків між HTML-тегами.

Споріднені зв’язки тегів в HTML

У цьому уроці ми розберемо термінологію споріднених зв’язків HTML-тегів. Кожен тег залежно від свого положення в 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. Тег li є безпосереднім батьківським елементом для i, а тег ul є батьківським елементом вищого рівня.

Теги li є нащадками тега ul і одночасно є батьківськими елементами для тегів i. Тег ul є батьківським елементом для тегів li та i.

📌 Завдання:
  1. №1
  3. Дано наступний код:
  5. <ul>
  6. <li>text <a href="">link</a></li>
  7. <li>text <a href="">link</a></li>
  8. <li>text <a href="">link</a></li>
  9. <li>text <a href=""><b>bold link</b></a></li>
  10. </ul>
  12. Розкажіть, які батьківські зв’язки ви бачите.
💡 Показати підказку

Пам’ятайте: тег, який знаходиться всередині іншого тега, є його нащадком. Тег, який містить інший тег всередині, є батьківським.

✅ Показати відповідь
ul є батьківським елементом для li. li є безпосереднім батьківським елементом для a. У останньому елементі b є нащадком a, а a є нащадком li.
📌 Завдання:
  1. №2
  3. Дано наступний код:
  5. <table>
  6. <tr>
  7. <td>cell 1</td>
  8. <td>cell 2</td>
  9. <td>cell 3</td>
  10. </tr>
  11. </table>
  13. Розкажіть, які батьківські зв’язки ви бачите.
✅ Показати відповідь
table є батьківським елементом для tr. tr є безпосереднім батьківським елементом для td. Теги td є нащадками tr та table.
📌 Завдання:
  1. №3
  3. Дано наступний код:
  5. <p>
  6. This is a paragraph with text
  7. <i><b>bold italic</b></i>
  8. <a href="">link <i>italic</i></a>.
  9. </p>
  11. Які нащадки є у абзацу?
  12. Які безпосередні нащадки є у абзацу?
✅ Показати відповідь
Нащадки p: i, b, a та другий i. Безпосередні нащадки p: i та a.
📌 Завдання:
  1. №4
  3. Дано наступний код:
  5. <p>
  6. <a href="">link <i><b>bold italic</b></i></a>
  7. </p>
  9. Які батьківські елементи є у тега b?
  10. Хто є його безпосереднім батьківським елементом?
✅ Показати відповідь
Для b батьківськими елементами є i, a та p. Безпосередній батьківський елемент тега b — це i.