Ієрархія в HTML

HTML-документ - це як велике сімейне древо, з батьками, братами, дітьми, предками і нащадками.

Все це відбувається з можливості вкладати одні елементи HTML всередину інших.

Вкладення

Приклад:

p>Сер <strong>Алекс Фергюсон</strong> якось сказав про Філіпо Індзагі: 
<q>Цей хлопець  повинен був народитись в положенні поза грою</q>.</p>

У цій структурі:

• елемент <strong> задає слова «Алекс Фергюсон» більш важливими;
• <Q> відзначає його цитату про Індзагі. 

Той факт, що <strong> відображається жирним шрифтом, є тільки поведінкою браузера за замовчуванням. Пам'ятайте, що ви повинні вибирати елементи HTML відповідно до їх значення, а не як вони виглядають.

В даному випадку:

<P> - батьківський елемент для <strong> і <q>;
<Strong> і <q> - дочірні елементи для <p>;
<Strong> і <q> - братські елементи.

Порядок

Як працює вкладення, залежить від розташування відкриваючих і закриваючих тегів.

Оскільки елемент HTML містить відкриває тег, що закриває тег і все між ними, дочірній елемент повинен бути закритий до закриття батьківського елемента.

<!-- Це НЕВІРНИЙ код! :-( -->
<p>
  Цей код HTML не буде працювати, тому що тег strong  відкрито тут, 
  <strong>але закрито його тільки після абзацу.
</p></strong>

Оскільки <strong> був відкритий після <p> (і, таким чином, вважається нащадком <р>), елемент <strong> повинен бути закритий перед батьківським </р>.

<!-- Це правильний код. :-) -->
<p>
  Цей код HTML працюватиме, тому що тег strong відкрито <strong>і 

закрто</strong> правильно.
</p>

Глибина

Оскільки дочірні елементи самі по собі можуть містити інші дочірні елементи, то можна написати більш глибоку ієрархію всередині HTML-документа.

Наш абзац вище може бути частиною статті блогу:

<Article>
   <H1> Відомі футбольні цитати </h1>
   <P>
     Сер <strong> Алекс Фергюсон </strong> одного разу сказав про Філіппо Індзагі:
     <Q> Цей хлопець мав народитися в положенні поза грою </q>.
   </P>
   <P>
     При критиці з боку Джона Карью, <strong> Златан Ібрагімович </strong> відповів:
     <Q> Те, що робить Кар'ю з м'ячем, я можу зробити з апельсином. </ Q>
   </P>
   <P>
     <Strong> Джордж Бест </strong> сказав:
     <Q> Я витратив багато грошей на випивку, дівчат і швидкі автомобілі.
        Останнє я просто змарнував </q>, -
     коли його запитали про його спосіб життя.
   </P>
</Article>

У цій структурі:

<Article> є предком для будь-якого іншого елемента;
<Article> є батьком для <h1> і трьох <р>;
<H1> і три <p> є братніми один для одного;
кожен <p> є батьком для <strong> і <q>, які в них містяться;
кожен <h1>, <p>, <strong> і <q> - це все нащадки <article>.
Аналогія з сімейним древом також застосовується при проходженні декількох шарів вкладень в HTML:

• нащадок елемента X - це будь-який елемент всередині X;
• дитина - це просто прямий нащадок;
• предком елемента Y є будь-який елемент;
• батько - це лише перший прямий предок.

Вкладення блоків і рядків

Блокові елементи можуть містити блокові або рядкові елементи.

Однак, малі елементи можуть містити тільки інші малі елементи (за винятком елемента <a>).

<!-- Це невірний код! :-( -->
<strong>
  <p>Ви не можете помістити абзац всередину тега strong.
</strong>

Просто запам'ятайте - предок / нащадок, батько / дитина, брати. Ця ієрархія буде корисна в CSS.

 Завдання

<article>
<h1>Астрономія</h1>
<section>
<h2>Далекий Тукан</h2>
<p>Безперечно, ефективний діаметр оцінює Тукан.</p>
</section>
</article>

Для данного кода, який елемент є батьківським <h2>?