Что означает термин вложенные теги
Перейти к содержимому

Что означает термин вложенные теги

  • автор:

Словарь терминов

Вложенность тегов (от англ. tag – бирка, метка, ярлык) —- это способ построения и создания языка разметки гипертекста (в формате HTML, XML и др.), при котором происходит вложение одного тега в другой.

Теги (дескрипторы) — это ключевые слова, с помощью которых строится контент на веб-страницах и в программном обеспечении. В формате XML теги являются элементом документа, а текст, расположенный между первым (начальным) и последним (конечным) тегом, является его содержанием.

Используют начальный (открывающий тег) вместе с конечным (закрывающим) тегом. Пример пустого элемента: HR>/HR>

Свойства тегов

Теги имеют дополнительные свойства в виде атрибутов, которые помогают разнообразить редактирование и форматирование текста, наделяют теги дополнительными возможностями. С помощью атрибутов тегов создается кодировка web-страницы. Например, при использовании тега font> и его атрибутов можно выделить часть текста другим шрифтом. Для этого необходимо внести данные о размере шрифта и его наименовании: font face=»Times, Calibry» size=8> выделяемый текст /font>

Часто одни теги вкладываются в другие. Это делается для того, чтобы действие внутреннего (вложенного) тега накладывалось на действие внешнего тега. Например, P>Добро пожаловать всем EM>STRONG>Участникам форума!/STRONG>/EM>. /P>

Здесь мы видим, что текст «…участникам форума» заключен в тег STRONG> для того, чтобы выделить его жирным шрифтом. Далее тег STRONG> вложен в тег EM> для того, чтобы текст выделился курсивом. И все это вложено в тег P>, чтобы текст «Добро пожаловать всем Участникам форума!» начинался с новой строки.

Вложенность дает возможность наиболее полно и разнообразно использовать свойства тегов. Каждый тег имеет свое значение, вся интерпретация определена организацией W3C.

Доска почета

Сайт отеля OCEANA The Palm Jumeirah

Вложенные HTML теги

Делать вложенными можно не только строчные теги. Блочные теги тоже подходят. Например, тег может использоваться для объединения двух параграфов:

div> p>Первые вложенный параграф.p> p>А это второй вложенный параграф.p> div> 

Несколько блочных элементов можно разместить внутри другого блочного элемента — все зависит от структуры, которую ты задумал.

Но помни — не все теги можно вкладывать в другие. Например, тег заголовка нельзя вкладывать в тег параграфа

.

А можно ли сделать текст, отображаемый курсивом, жирным? Конечно, это всего лишь очередная вложенность тегов:

div> p>Первый вложенный параграф.p> p>А это второй вложенный параграф. b>i>Этот текст будет и жирным, и написанный курсивомi>b> p> div> 

Как думаешь, а можно ли поменять местами теги и местами и сделать — родительским тегом?

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

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

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

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

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

Web-дизайном! Здесь вы сможете найти

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

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

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

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

Web-дизайном! Здесь вы сможете найти

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

НА ЗАМЕТКУ

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

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

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

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

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

Листинг 1.3

Справочник по HTML

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

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

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

Продолжение на ЛитРес

Читайте также

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

Назначение имен тегов и атрибутов зависит от регистра В документах 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*) template ‹class T›inline ptrdiff_t* distance_type(const T*) Тогда, если мы хотим осуществить обобщённую функцию

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

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

Вложенные теги HTML

Если вы посмотрите на разметку HTML для любой веб-страницы сегодня, вы увидите элементы HTML, содержащиеся в других элементах HTML. Эти элементы, которые находятся «внутри» других элементов, известны как вложенные элементы , и они необходимы для создания любой веб-страницы сегодня.

Что значит вкладывать теги HTML?

Самый простой способ понять вложение — это думать о HTML-тегах как о полях, в которых содержится ваш контент. Ваш контент может включать в себя текст, изображения и связанные медиа. HTML-теги — это блоки вокруг содержимого. Иногда вам нужно разместить коробки внутри других коробок. Эти «внутренние» коробки вложены в другие.

Если у вас есть блок текста, который вы хотите выделить внутри абзаца, у вас будет два HTML-элемента, а также сам текст.

Пример: это предложение текста.

Этот текст — то, что мы будем использовать в качестве нашего примера. Вот как это будет написано в HTML:

 

Пример. Это текстовое предложение.

Чтобы сделать предложение слова жирным, добавьте открывающие и закрывающие теги до и после этого слова.

 

Пример. Это предложение текста.

Как видите, у нас есть один блок (абзац), который содержит содержание предложения, плюс второй блок ( пара сильных тегов), который отображает это слово как жирный.

Когда вы вкладываете теги, закрывайте теги в том порядке, в котором вы их открыли. Сначала вы открываете

, а затем , что означает, что вы изменили его и закрыли , а затем .

Еще один способ думать об этом — снова использовать аналогию с блоками. Если вы поместите коробку в другую коробку, вы должны закрыть внутреннюю, прежде чем сможете закрыть внешнюю или содержащую коробку.

Добавление дополнительных вложенных тегов

Что если вы хотите, чтобы одно или два слова были выделены жирным шрифтом, а другое — курсивом ? Вот как это сделать.

 

Пример. Это предложение текста, а также текст , выделенный курсивом .

Вы можете видеть, что наш внешний блок

теперь содержит два вложенных тега — и . Они оба должны быть закрыты, прежде чем та коробка, в которой они находятся, может быть закрыта.

 

Пример. Это предложение текста, а также текст курсив .

Это еще один абзац. < / p>

В этом случае у нас есть коробки внутри коробок! Самым внешним полем является или деление . Внутри этого поля есть пара вложенных тегов абзаца , а внутри первого абзаца у нас есть следующая пара тегов и .

Почему вы должны заботиться о вложенности

Главная причина, по которой вы должны заботиться о вложенности, — это если вы собираетесь использовать CSS. Каскадные таблицы стилей полагаются на то, что теги должны быть последовательно вложены в документ, чтобы он мог определить, где начинаются и заканчиваются стили. Неправильное вложение мешает браузеру знать, где применять эти стили. Давайте посмотрим на некоторые HTML:

Используя приведенный выше пример, если мы хотим написать стиль CSS, который будет влиять на ссылку внутри этого раздела, и только на эту ссылку (в отличие от любых других ссылок в других разделах страницы), нам потребуется использовать вложение для записи этот стиль как таковой:

.main-content a  
color: # F00;
>

Другие соображения

Доступность и совместимость с браузерами тоже важны. Если ваш HTML-код неправильно вложен, он не будет таким же доступным для программ чтения с экрана и более старых браузеров — и он может даже полностью нарушить визуальный вид страницы, если браузеры не смогут понять, как правильно отобразить страницу, поскольку элементы и теги HTML не на своем месте.

Наконец, если вы хотите написать полностью правильный и правильный HTML, вам нужно использовать правильное вложение. В противном случае каждый валидатор пометит ваш HTML как неправильный.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *