Исполняемые доки HTML: Теги HTML

Q: Чем тег HTML отличается от элемента HTML?

Тег это разметка, которую вы пишете, например или . Элемент это то, что браузер из нее строит целиком: открывающий тег, его атрибуты, содержимое и закрывающий тег. Hi это два тега, которые образуют один элемент p.

Q: Важен ли регистр в тегах HTML?

Нет. и создают один и тот же элемент, как и любое сочетание заглавных и строчных букв. Стандартный стиль это строчные буквы, их же выводит большинство форматтеров.

Что такое тег HTML

Тег HTML это имя в угловых скобках, которое размечает кусок содержимого. Большинство тегов идут парами: открывающий тег, например <p>, и закрывающий тег с косой чертой, например </p>. Все, что между ними, это содержимое, а вся конструкция целиком называется элементом.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Замените <h1> на <h2> (и в открывающем, и в закрывающем теге), и заголовок станет меньше. Именно имя тега говорит браузеру, что это за содержимое.

Устройство: теги, атрибуты и элементы

<a href="/docs/html/links" class="nav">Links</a>

Часть	В примере
Открывающий тег	`<a href="/docs/html/links" class="nav">`
Имя тега	`a`
Атрибуты	`href="/docs/html/links"` и `class="nav"`
Содержимое	`Links`
Закрывающий тег	`</a>`
Элемент	все перечисленное вместе

Атрибуты всегда пишут в открывающем теге, никогда в закрывающем. О них рассказывает страница про атрибуты.

Имена тегов не зависят от регистра: <P> и <p> одинаковы. Пишите их строчными буквами.

Одиночные теги: без закрывающего тега

Некоторые элементы не могут ничего содержать, поэтому у них есть только открывающий тег. Их называют пустыми элементами (void elements), а в русскоязычной среде чаще одиночными или самозакрывающимися тегами:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

Полный список: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Их можно писать как <br /> с косой чертой. В HTML эта черта ничего не делает; она разрешена, чтобы код в стиле XHTML продолжал работать. Косая черта у обычного тега, например <div />, тоже игнорируется, то есть div остается открытым.

Вложенность тегов

Элементы можно вкладывать в другие элементы. Правило такое: закрывайте теги в порядке, обратном открытию. Последний открытый закрывается первым.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Браузеры не отвергают неправильную вложенность. Они ее исправляют, и исправление не всегда совпадает с тем, что вы имели в виду. Этот пример отдает парсеру браузера два фрагмента с ошибками вложенности и выводит структуру, которую он на самом деле построил:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Происходят два исправления. Перекрывающиеся <b> и <i> разбиваются на дополнительные элементы. А <p> не может содержать <div>, поэтому браузер закрывает абзац перед div и превращает лишний </p> в новый пустой абзац. Когда CSS или JavaScript ведут себя странно, неправильная вложенность одна из первых вещей, которые стоит проверить.

Блочные и строчные элементы

Большинство тегов делятся на две группы отображения. Блочные элементы (div, p, h1...h6, ul, section) начинаются с новой строки и занимают всю ширину. Строчные элементы (span, a, strong, em, code) стоят внутри строки текста и занимают ровно ширину своего содержимого.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Синие блоки растягиваются на всю страницу, янтарные охватывают только свой текст. CSS может это изменить через свойство display, но у каждого тега есть значение по умолчанию. Два универсальных контейнера описаны на страницах div и span.

Самые распространенные теги HTML

Тег	Назначение
`<html>`, `<head>`, `<body>`	Каркас документа
`<title>`, `<meta>`, `<link>`	Информация о странице в head
`<h1>`...`<h6>`	Заголовки
`<p>`	Абзац
`<a>`	Ссылка
`<img>`	Изображение
`<ul>`, `<ol>`, `<li>`	Списки
`<strong>`, `<em>`	Важный и выделенный текст
`<br>`, `<hr>`	Перенос строки, тематический разрыв
`<div>`, `<span>`	Универсальные блочный и строчный контейнеры
`<table>`, `<tr>`, `<th>`, `<td>`	Таблицы
`<form>`, `<input>`, `<label>`, `<button>`	Формы
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Структура страницы со смыслом

Список на одну страницу, который можно распечатать, есть в шпаргалке по HTML.

Несуществующие теги

Если написать тег, которого браузер не знает, ошибки не будет. Он создаст неизвестный элемент, покажет его содержимое и будет считать его строчным:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Неизвестный тег ничего не значит для поисковиков и программ чтения с экрана, поэтому лучше выбрать настоящий тег. Если вы делаете собственный компонент на JavaScript, дайте ему имя с дефисом (user-badge): имена с дефисом зарезервированы для пользовательских элементов и никогда не пересекутся с будущими тегами HTML.

Частые ошибки

Забытый закрывающий тег. Без </a> или </strong> весь остаток страницы станет ссылкой или жирным текстом. Некоторые теги браузер закрывает сам (</p>, </li>), но не эти.
Закрытие одиночного тега. </br> и </img> некорректны. Браузеры даже читают </br> как открывающий <br>, поэтому <br></br> дает два переноса строки.
Перекрывающиеся теги. Закрывайте в обратном порядке: <b><i>x</i></b>, а не <b><i>x</b></i>.
Блок внутри абзаца. <div>, список или заголовок внутри <p> досрочно завершают абзац. В качестве внешнего контейнера используйте <div>.
Выбор тега по внешнему виду. Используйте <h2>, потому что это заголовок, а не потому что он крупный. Размер и насыщенность шрифта задаются в CSS.

Часто задаваемые вопросы

Чем тег HTML отличается от элемента HTML?

Тег это разметка, которую вы пишете, например <p> или </p>. Элемент это то, что браузер из нее строит целиком: открывающий тег, его атрибуты, содержимое и закрывающий тег. <p>Hi</p> это два тега, которые образуют один элемент p.

Каким тегам HTML не нужен закрывающий тег?

Пустые (void) элементы не могут иметь содержимого, поэтому закрывающего тега у них нет: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> и <embed>.

Как писать: <br> или <br />?

Оба варианта корректны. Косая черта в конце разрешена у пустых элементов, и браузер ее игнорирует. У обычного тега вроде <div /> косая черта тоже игнорируется, поэтому div остается открытым до </div>.

Важен ли регистр в тегах HTML?

Нет. <P> и <p> создают один и тот же элемент, как и любое сочетание заглавных и строчных букв. Стандартный стиль это строчные буквы, их же выводит большинство форматтеров.

Сколько всего тегов в HTML?

Действующий стандарт HTML описывает больше 100 элементов, но на обычных страницах используют примерно от 20 до 30 из них: заголовки, абзацы, ссылки, картинки, списки, div, span, формы и семантические теги разметки.

Что будет, если написать несуществующий тег?

Браузер все равно создаст для него элемент, покажет содержимое и будет считать его строчным элементом без особого смысла. Пользовательские элементы разрешены, если в имени есть дефис, например <user-card>.

Связанные концепции