HTML-теги
Что такое HTML-тег: открывающие и закрывающие теги, разница между тегами, элементами и атрибутами, пустые элементы и правила вложенности.
HTML-тег — это ключевое слово (имя тега), заключённое в угловые скобки, например <p> или <img>. Теги являются строительными блоками HTML: они сообщают браузеру, где начинается и где заканчивается фрагмент содержимого, а также какого рода это содержимое. Браузер читает теги и строит из них страницу, но сами теги никогда не отображаются.
На этой странице объясняется, что такое тег, чем открывающий тег отличается от закрывающего тега, как теги объединяются в элементы с атрибутами, какие теги стоят отдельно (пустые элементы) и каковы правила правильной вложенности тегов.
Открывающие и закрывающие теги
Большинство тегов идут парами: открывающий тег и закрывающий тег. Закрывающий тег идентичен открывающему, но начинается с косой черты (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- Открывающий тег отмечает начало содержимого.
- Закрывающий тег отмечает конец содержимого.
Всё, что находится между двумя тегами, — это содержимое, к которому теги применяются.
Тег, элемент и атрибут
Эти три термина нередко путают, поэтому полезно дать им точные определения.
- Тег — это ключевое слово в угловых скобках само по себе:
<p>или</p>. - Элемент — это полная единица: открывающий тег, содержимое и закрывающий тег вместе.
- Атрибут — это дополнительная информация, размещённая внутри открывающего тега, которая настраивает элемент.
Вот один элемент абзаца, разобранный на части:
<p class="intro">Hello world</p>| Часть | Что это |
|---|---|
<p ...> | открывающий тег |
class="intro" | атрибут (имя class, значение "intro") |
Hello world | содержимое |
</p> | закрывающий тег |
| вся строка | элемент |
Таким образом, <p> — это тег, а <p>Hello world</p> — это элемент. Подробнее см. в разделах HTML-элементы и HTML-атрибуты.
Пример полного элемента
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Пустые элементы
Некоторые элементы не имеют содержимого и, следовательно, не имеют закрывающего тега. Такие элементы называются пустыми элементами (void elements). Они состоят из единственного тега.
Наиболее распространённые пустые элементы:
<br>— перенос строки<hr>— тематический разрыв (горизонтальная линия)<img>— изображение<input>— поле формы
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">В HTML пустой элемент записывается как одиночный тег без косой черты, например <br>. Самозакрывающаяся форма <br /> также допустима и обязательна в XHTML, но в HTML она необязательна.
Теги не чувствительны к регистру
Имена HTML-тегов не зависят от регистра: <P>, <p> и <P> означают одно и то же. Тем не менее, по соглашению теги пишутся в нижнем регистре — это рекомендуемый стиль.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Правильная вложенность тегов
Теги могут содержать другие теги. В таком случае они должны быть правильно вложены: внутренний элемент должен полностью открываться и закрываться внутри родительского. Перекрестие тегов недопустимо.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>В неправильном примере <em> открывается внутри <p>, но закрывается за его пределами. Браузеры пытаются исправить подобные ошибки, однако результат непредсказуем, поэтому всегда сначала закрывайте самый внутренний тег.
Чтобы узнать о примечаниях, которые браузер игнорирует вместо отображения, см. HTML-комментарии.
Историческая заметка: в 1990-х годах авторы иногда оборачивали содержимое скриптов в маркеры HTML-комментариев, чтобы скрыть их от очень старых браузеров, не понимавших
<script>. Эта техника устарела и не должна применяться сегодня.