8.1 Теги
В основе разметки HTML-документов лежат теги. Так что же такое тег?
Теги были придуманы еще в 70-е годы для того, чтобы люди могли добавлять в документы служебную информацию для программ, которые эти документы обрабатывают.
Тег — это ключевое (служебное) слово, чаще всего на английском, которое обрамлялось в угловые скобочки (символы больше и меньше), чтобы программы не путали теги и обычные слова на английском.
Также тег может содержать различную служебную информацию, которая может быть полезна программе, обрабатывающей документ.
Пример текста с тегом:
<a href="http://javarush.com/about">
Ссылка на что-то интересное
</a>
В данном примере мы видим текст, тег «a», а также служебную информацию — атрибуты тега. Ниже вы узнаете о них подробнее.
Теги бывают разных типов. Во-первых, они бывают одиночные и парные. Чаще всего встречаются парные теги. И как вы, наверное, уже догадались, они всегда идут в паре. Их еще называют открывающий и закрывающий.
Открывающий тег — это просто ключевое слово в треугольных скобках.
<tag>
Пример:
<h1>
Закрывающий тег похож на открывающий, но перед ключевым словом стоит косая черта.
</tag>
Пример:
</h1>
Открывающий тег всегда первый в паре. НЕ может сначала в тексте идти закрывающий тег, а затем открывающий. Такой HTML-документ будет считаться невалидным.
8.2 Дерево тегов
И еще важная информация про парные теги. В документе их может быть много, и они могут быть вложенные. Что это значит? Это значит, что любой текст в HTML-документе может быть обрамлен (обернут) тегами, даже если он содержит другие теги. Пример:
<html>
Обычный текст
<a href="http://javarush.com/about">
Ссылка на что-то интересное
</a>
еще какой-то текст
</html>
Грубо говоря, в HTML-тексте может встретиться последовательность тегов:
<h1><h2></h2></h1>
Но не может быть:
<h1><h2></h1></h2>
Если открывающий тег <h2> находится внутри пары <h1>-тегов, то и его парный закрывающий
тег </h2> тоже должен находиться внутри пары <h1>-тегов.
Таким образом все теги документа образуют некое дерево тегов. Сначала идет тег верхнего уровня, который обрамляет весь
документ, обычно он называется <html>, у него есть дочерние пары тегов, у них свои и т. д.
Собственно программа, которая обрабатывает документ с тегами, именно так его видит — как дерево тегов с каким-то текстом внутри.
8.3 Атрибуты
Открывающий тег может содержать служебную информацию — атрибуты, закрывающий — нет.
Общий вид атрибутов такой:
<tag name1="value1" name2="value2">
Пример тега с атрибутами — ссылка:
<a href="http://javarush.com/about" target="_blank">
Ссылка на что-то интересное
</a>
Каждый атрибут задан в виде пары имя и значение. Атрибутов может быть сколько угодно.
Но опытный программист сразу задаст вопрос: что делать, если в качестве значения атрибута нужно использовать текст, содержащий символы «<», «>» или кавычки?
Внутри HTML-документа их использовать нельзя. Для них существует специальная запись:
| Название символа | Символ | HTML-запись |
|---|---|---|
| Кавычка двойная | " | " |
| Амперсанд | & | & |
| Символ меньше | < | < |
| Символ больше | > | > |
| Пробел | | |
| Одинарная кавычка | ' | ' |
8.4 Одинарные теги
Пустой тег
Если у тега нет содержимого, то обычно он выглядит так:
<tag></tag>
Для таких тегов придумали специальную компактную запись:
<tag/>
Обратите внимание, что этот тег отличается от закрывающего тега — косая черта у него стоит в конце. Это просто сокращенная запись пустой пары тегов. Его так и называют — пустой тег.
Одиночные теги
Однако в HTML есть и специальные одиночные теги. Они не имеют закрывающего тега. Список таких тегов определяется HTML-стандартом. Примеры таких тегов:
<br>— перенос строки<hr>— линия разграничения<img>— картинка
Всего их 14, и половина из них служебные, а вторая половина появилась еще в первой версии HTML. Сейчас такие теги стараются не вводить.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ