2.1 Знакомство с тегами

В основе разметки HTML-документов лежат теги. Что же такое тег?

Теги были придуманы еще в 70-е годы для того, чтобы люди могли добавлять в документы служебную информацию, для программ, которые эти документы обрабатывают.

Тег – это ключевое (служебное) слово, чаще всего на английском, которое обрамлялось в угловые скобочки (символы больше и меньше), чтобы программы не путали теги и обычные слова на английском.

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

Пример текста с тегом:


 <a href="http://javarush.com/about">
    Ссылка на что-то интересное
</a>

В данном примере мы видим текст, тег «a», а также служебную информацию – атрибуты тега. Ниже вы узнаете о них подробнее.

2.2 Виды тегов: открывающий, закрывающие, пустой тег

Теги бывают разных типов. Во-первых, они бывают одиночные и парные. Чаще всего встречаются парные теги. И как ты, наверное, уже догадался, они всегда идут в паре. Их еще называют открывающий и закрывающий.

Открывающий тег – это просто ключевое слово в треугольных скобках. Пример:


<h1>

Закрывающий тег похож на открывающий, но перед ключевым словом стоит косая черта. Пример:


</h1>

Открывающий тег может содержать служебную информацию – атрибуты, закрывающий – нет. Открывающий тег всегда первый в паре. НЕ может сначала в тексте идти закрывающий тег, а затем – открывающий. Такой HTML-документ будет не валидный.

Одиночные теги не имеют закрывающего тега. Список таких тегов определяется HTML-стандартом. Примеры таких тегов:

  • <br> – перенос строки;
  • <img> – картинка.

Кстати, парный тег, если он не содержит информации внутри, можно записать в сокращенном виде. Пример:


<h1/>

Это не одиночный тэг, а пустой парный тег. Это как бы и закрытый и открытый теги одновременно. От закрытого тега он отличается тем, что косая черта стоит в конце (перед второй треугольной скобочкой).

2.3 Дерево тегов

И еще важная информация про парные теги. В документе их может быть много и они могут быть вложенные. Что это значит? Это значит, что любой текст в HTML-документе может быть обрамлен (обернут) тегами, даже если он содержит другие теги. Пример:


<html>
    Обычный текст
        <a href="http://javarush.com/about">
            Ссылка на что-то интересное
          </a>
     еще какой-то текст
</html>

Грубо говоря, в html-тексте может встретиться последовательность тегов:


        <h1> <h2> </h2> </h1>

    

Но не может быть:


        <h1> <h2> </h1> </h2> 

    

Если открывающие тег <h2> находится внутри пару <h1>-тегов, то и его парный закрывающий тег </h2> тоже должен находиться внутри пары <h1>-тегов.

Таким образом все теги документа образуют некое дерево тегов. Сначала идет тег верхнего уровня, который обрамляет весь документ, обычно он называется <html>, у него есть дочерние пары тегов, у них свои и т.д.

Собственно программа, которая обрабатывает документ с тегами, именно так его видит – как дерево тегов с каким-то текстом внутри.

2.4 Атрибуты

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

Тег может содержать несколько атрибутов, и они имеют такой общий вид:


        <tag name1="value1" name2="value2">
    

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

Но опытный программист сразу задаст вопрос: что делать если в качестве значения атрибута нужно использовать текст, содержащий символы «<», «>» или кавычки?

Название символа Символ HTML-запись
Кавычка двойная " "
Амперсанд & &
Символ меньше < &lt;
Символ больше > &gt;
Пробел &nbsp;
Одинарная кавычка ' &#39;