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