2.3. Открывающие и закрывающие теги, теги-контейнеры
Теги могут быть открывающими (начальными) и закрывающими (конечными). Открывающие теги состоят из знаков «<» и «>» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).
Большинство HTML-тегов являются парными — имеют обязательные открывающий и закрывающий теги, например: <STRONG> и </STRONG>. Некоторые имеют только открывающий тег, например <BR>, и называются пустыми. Другие же могут иметь открывающий тег, а закрывающий можно указывать, а можно и нет, тогда браузер сам определит, где заканчивается действие тега.
Теги, которые имеют обязательный или необязательный закрывающий тег принято называть теги-контейнеры или элементы-контейнеры.
Все теги HTML не чувствительны к регистру, то есть можно указывать <STRONG> и <strong> или вообще <sTRonG>.
Пример использования тегов
<b>Жирный шрифт</b><i>Курсивный шрифт</i>
Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B и I. Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.
Теги можно указывать в одну строку, а можно в несколько
Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов — все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:
Пример
<b>Жирный шрифт</b>
<i> Курсивный шрифт </i>
Правильная вложенность тегов
Многие теги можно вкладывать друг в друга, чтобы они вместе воздействовали на один и тот же элемент страницы. Но при этом важно соблюдать правильную вложенность — тег, появляющийся раньше, должен закрываться позже. Кстати, ошибка вложенности является одной из самой распространенной среди новичков.
<тег1><тег2><тег3>...</тег3></тег2></тег1> — правильно
<тег1><тег2><тег3>...</тег1></тег3></тег2> — неправильно
Пример использования вложенных тегов
<b><i>Жирный курсивный шрифт</i></b>
Родительские и дочерние теги, потомки и предки
Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
Родительские теги — тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере <ТЕГ1> является родительским для <ТЕГ2> и <ТЕГ3>, но не является для тега <ТЕГ4>. А вот <ТЕГ3> родитель <ТЕГ4>.
Дочерние теги — обратно родительским. <ТЕГ2> и <ТЕГ3> дочерние для <ТЕГ1>, а <ТЕГ4> для тега <ТЕГ3>.
Предки — тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности. <ТЕГ1> предок для всех тегов, а <ТЕГ3> предок <ТЕГ4>.
Потомки — обратно предкам. Все теги — потомки тега <ТЕГ1>, но <ТЕГ4> еще и потомок тега <ТЕГ3>.
Как вы уже знаете, теги можно вкладывать друг в друга и, соответственно, одни могут содержать другие. Но тут есть один небольшой, но очень важный момент, которому новички часто не уделяют должного внимания. Давайте возьмем уже знакомый нам пример:
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй — дочерним и никак иначе, то есть в нашем примере <ТЕГ1> содержит <ТЕГ2> и <ТЕГ3>, но не содержит <ТЕГ4>. А вот <ТЕГ3> как раз и содержит <ТЕГ4>. Немного необычно, правда? Но своя логика в этом есть, согласитесь.
Каждый HTML-элемент может содержать только определенный набор тегов, а некоторые вообще не могут содержать ничего кроме текста. Все это зависит от типа, к которому относится тег, поэтому, перед тем как вкладывать теги, проверьте — может ли один из них содержать другой.