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. Зараз такі теги стараються не вводити.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ