Ієрархія в HTML
HTML-документ - це як велике сімейне древо, з батьками, братами, дітьми, предками і нащадками.
Все це відбувається з можливості вкладати одні елементи HTML всередину інших.
В даному випадку:
<P> - батьківський елемент для <strong> і <q>;
<Strong> і <q> - дочірні елементи для <p>;
<Strong> і <q> - братські елементи.
Наш абзац вище може бути частиною статті блогу:
У цій структурі:
<Article> є предком для будь-якого іншого елемента;
<Article> є батьком для <h1> і трьох <р>;
<H1> і три <p> є братніми один для одного;
кожен <p> є батьком для <strong> і <q>, які в них містяться;
кожен <h1>, <p>, <strong> і <q> - це все нащадки <article>.
Аналогія з сімейним древом також застосовується при проходженні декількох шарів вкладень в HTML:
Однак, малі елементи можуть містити тільки інші малі елементи (за винятком елемента <a>).
Просто запам'ятайте - предок / нащадок, батько / дитина, брати. Ця ієрархія буде корисна в CSS.
Все це відбувається з можливості вкладати одні елементи HTML всередину інших.
Вкладення
Приклад:p>Сер <strong>Алекс Фергюсон</strong> якось сказав про Філіпо Індзагі:
<q>Цей хлопець повинен був народитись в положенні поза грою</q>.</p>
У цій структурі:- елемент <strong> задає слова «Алекс Фергюсон» більш важливими;
- <Q> відзначає його цитату про Індзагі.
В даному випадку:
<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>
<h1>Астрономія</h1>
<section>
<h2>Далекий Тукан</h2>
<p>Безперечно, ефективний діаметр оцінює Тукан.</p>
</section>
</article>
Для данного кода, який елемент є батьківським <h2>?