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-запись |
---|---|---|
Кавычка двойная | " | " |
Амперсанд | & | & |
Символ меньше | < | < |
Символ больше | > | > |
Пробел | | |
Одинарная кавычка | ' | ' |
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ