← к списку статей

07.11.10 (последнее изменение 30 ноября 2010)

HTML-теги (не закончена)

Синтаксис. (Вторая статья из цикла «HTML»)

Для чего нужны HTML-теги?

HTML-теги придуманы для того, чтобы «размечать» текст. Поясню, что это значит.

Представьте, что вы слушаете лекцию и конспектируете ее. Вы слышите просто слова, которые можно было бы записать — предложение за предложением — в виде сплошного текста. Но вы делаете иначе: записывая текст, вы форматируете его таким образом, чтобы вам было легче читать свой конспект впоследсвии. Вы без подсказок лектора понимаете, когда с помощью заголовка нужно начать новую тему, когда абзацем отделить одну мысль от другой, когда обвести рамкой важное правило или обозначить новый термин. Все это и есть разметка.

Текст на веб-странице подобен лекции в тетради. Только для разметки заголовков, абзацев, терминов и прочих элементов исползьуются не визуальные приемы, а html-теги, которые помещаются прямо внутрь сплошного текста. Количество тегов ограничено и каждый из них имеет свое предназначение. Последняя спецификация HTML версии 4.01 содержит 91 тег.

Как записываются HTML-теги?

Латиницей в угловых скобках

Всякий тег имеет свое название. Названия эти происходят от английских слов и записываются без пробелов маленькими латинскими буквами. Иногда слова берутся целиком:

  • strong
  • blockquote

Хотя чаще используются сокращения:

  • p (от paragraph)
  • br (от break

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

  • <strong>
  • <blockquote>
  • <p>
  • <br>

(Здесь имело бы смысл рассказать о специальных символах, но это уведет нас от темы статьи. Лучше написать про них отдельно, а в этом месте дать ссылку.)

Открывающий тег и закрывающий

Как уже говорилось выше, с помощью тегов можно размечать заголовки, абзацы и прочие текстовые элементы. Чтобы произвести такую разметку, соответствующий фрагмент текста помещают внутрь тега. Поместить внутрть тега это все равно что поместить в скобки, только в роли открывающей скобки нужно использовать открывающий тег, а в роли закрывающей скобки — закрывающий тег. В приведенном примере показано как размечается один абзац текста. Обратите внимание, закрывающий тег содержит слэш перед именем.

Что же это получается, один тег состоит из двух тегов?

Не совсем так. В данном случае речь идет о разных частях одного и того же тега, нас сбила с толку терминология. Открывающий тег (Start tag) — это термин, который обозначает начало тега. Соответственно закрывающий тег (End tag) — термин, обозначающий конец тега. Фактически, открывающий и закрывающий — это части целого тега, тогда как тег целиком включает в себя обе эти части и все что находится между ними.

Матрешка

Теги могут вкладываться друг в друга, как матрешки. И тут важно соблюдать одно правило: при закрытии тегов сперва нужно закрывать внутренний тег, а затем внешний.

<a><b></b></a> — правильно

<a><b></a></b> — НЕ правильно

И еще немного терминологии. В любой паре тегов, где один расположен внутри другого, внешний принято называть родительским (Parent tag), внутренний — дочерним (Children tag).

Атрибуты

Большая часть тегов может содержать атрибуты — специальные слова, позволяющие управлять поведением тега или его внешним видом. Например, тег <A> может иметь атрибут href или атрибут name. Эти атрибуты определяют поведение тега: в первом случае тег будет ссылкой, во втором — якорем на странице.

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

Как отображаются пробелы

Это последнее, что следует рассказать о синтаксисе HTML. Когда вы формируете код страницы, вы можете как угодно использовать пробелы, табуляцию и переносы строк. Как угодно — значит ставить их в любых местах и в любых количествах. Браузер при отображении страницы заменит все подряд идущие пробельные символы на один пробел.

Пользуйтесь этой особенностью для формирования кода страниц. Старайтесь располагать дочерниые теги с отступом в одну табуляцию по отношению к родительским. То есть старайтесь делать матрешки. В таком коде вам будет легче разобраться и легче заметить ошибку.

Теги — одиночки

Такие теги не содержат внутри себя никакого текста, потому что они не предназначены для разметки текста. Вместо этого они сами являются видимыми на экране. Например тег <img> используется для вывода изображений.

Поскольку самостоятельные теги не могут размечать текст, то им и не нужен закрывающий тег.

← к списку статей