Вложенность тегов

Вложенность тегов

Если мы снова посмотрим на приведенный в листинге 1.2 фрагмент HTML-кода, то заметим, что одни теги вложены в другие. Так, тег <STRONG> вложен в тег <P>, являясь частью его содержимого. Тег <P>, в свою очередь, вложен в тег <BODY>, а тот — в "глобальный" тег <HTML>. (Теги <BODY> и <HTML> мы рассмотрим чуть позже.) Такая вложенность тегов в HTML — обычное явление.

Когда Web-обозреватель встречает тег, вложенный в другой тег, он как бы накладывает действие "внутреннего" тега на эффект "внешнего". Так, действие тега <STRONG> будет наложено на действие тега <P>, и фрагмент абзаца окажется выделенным полужирным шрифтом, при этом оставаясь частью этого абзаца.

Давайте для примера текст "Web-дизайн", который мы недавно поместили в тег <EM>, заключим еще и в тег <STRONG>. Вот так:

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM><STRONG>Web-дизайном</STRONG></EM>! Здесь вы сможете найти

.

В этом случае данный текст будет выделен полужирным курсивом. Иными словами, действие тега <STRONG> будет наложено на действие тега <EM>.

Теперь — внимание! Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи.

Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти

.

Web-обозреватель может отобразить нашу Web-страницу неправильно.

НА ЗАМЕТКУ

Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера. Но именно мелкие!

Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем. В свою очередь, тег, вложенный в данный тег, называется дочерним, или потомком. Так, для тега <EM> в приведенном далее примере тег <P> — родительский, а тег <STRONG> — дочерний. Любой тег может иметь сколько угодно дочерних тегов, но только один родительский (что, впрочем, понятно — не может же он быть непосредственно вложен одновременно в два тега).

Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, — дочерним, или потомком. То же самое, что и в случае тегов.

Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег <P>, то тег <EM> будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег <P>. Тег <STRONG> же будет иметь второй уровень вложенности, поскольку он вложен в тег <EM>, а тот, в свою очередь, — в тег <P>. В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.

Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов (листинг 1.3). На отображение Web-страницы они никак не влияют.

Листинг 1.3

<BODY>

<H1>Справочник по HTML</H1>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>

</BODY>

Здесь сразу видно, что теги <H1> и <P> вложены в тег <BODY>, — видно по отступам.

Данный текст является ознакомительным фрагментом.