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

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

Если мы снова посмотрим на приведенный в листинге 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>, — видно по отступам.

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



Поделитесь на страничке

Похожие главы из других книг:

Назначение имен тегов и атрибутов зависит от регистра

Из книги автора

Назначение имен тегов и атрибутов зависит от регистра В документах HTML имена тегов и атрибутов не зависят от регистра символов, так что, например, запись <TABLE>, <TaBle> или <table> означает один и тот же тег таблицы. Однако в XHTML это разные теги. То же самое касается имен


Атрибуты HTML-тегов

Из книги автора

Атрибуты HTML-тегов Последний важный вопрос, который мы здесь рассмотрим, — атрибуты HTML- тегов. После этого мы пока что закончим с HTML и обратимся к принципам современного Web-дизайна.Посмотрим на тег <META>, задающий кодировку Web-страницы:<META HTTP-EQUIV="Content-Type" CONTENT="text/html;


Дополнительные возможности тегов

Из книги автора

Дополнительные возможности тегов <AUDIO> и <VIDEO> Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому-


Режим активных тегов

Из книги автора

Режим активных тегов В главе 2 мы говорили о расширениях архитектуры PowerPC. Одно из таких расширений — режим активных тегов. Когда процессор PowerPC работает в данном режиме, доступны дополнительные команды, которых нет в режиме неактивных тегов. Всего для AS/400 было добавлено


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

Из книги автора

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


Атрибуты HTML-тегов

Из книги автора

Атрибуты HTML-тегов Последний важный вопрос, который мы здесь рассмотрим, — атрибуты HTML- тегов. После этого мы пока что закончим с HTML и обратимся к принципам современного Web-дизайна.Посмотрим на тег <META>, задающий кодировку Web-страницы:<META HTTP-EQUIV="Content-Type" CONTENT="text/html;


Дополнительные возможности тегов

Из книги автора

Дополнительные возможности тегов <AUDIO> и <VIDEO> Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому-


5.3.1.2. Проигрыватель Rhytmbox. Редактор IDЗ-тегов EasyTag

Из книги автора

5.3.1.2. Проигрыватель Rhytmbox. Редактор IDЗ-тегов EasyTag Проигрыватель Rhytmbox понравится тем, кто привык к Windows Media Player, или тем, кому за годы работы с Windows надоел Winamp. Данный проигрыватель очень хорош в отношении качества воспроизведения, поддерживает расширенное управление списками


Редактирование ID3-тегов

Из книги автора

Редактирование ID3-тегов Пользователи редко задумываются над необходимостью правильного заполнения информационных тегов в музыкальных файлах. Однако с ростом коллекции найти что-либо становится все труднее. Можно рассортировать файлы вручную, переименовывая и копируя


6. Вложенность нормальных форм

Из книги автора

6. Вложенность нормальных форм Что означает вложенность нормальных форм друг в друга?Вложенность нормальных форм – это отношение понятий ослабленной и усиленной формы по отношению друг к другу.Вложенность нормальных форм полностью следует из их соответствующих


Примеры использования тегов итераторов

Из книги автора

Примеры использования тегов итераторов Для всех типов обычных указателей мы можем определить value_type и distance_type с помощью следующего:template ‹class T›inline T* value_type(const T*) {return (T*)(0);}template ‹class T›inline ptrdiff_t* distance_type(const T*) {return (ptrdiff_t*)(0);}Тогда, если мы хотим осуществить обобщённую функцию


11.6. Редактор IDS-тегов EasyTAG

Из книги автора

11.6. Редактор IDS-тегов EasyTAG Звуковые файлы форматов MP3 и OGG могут содержать информацию об исполнителе, альбоме, названии композиции и т. п. Эта информация содержится в так называемых ГО3-тегах. Для редактирования ГО3-тегов служит программа EasyTAG (рис. 11.5), установить которую