Элементы HTML

Элемент HTML состоит из открывающего тега, некоторого содержимого и закрывающего тега. Элемент — это всё, что находится от открывающего тега до закрывающего. Например, <h1>Мой первый заголовок</h1> и <p>Мой первый абзац.</p> — это элементы.

Примечание: У некоторых элементов нет содержимого, например у <br>. Они называются пустыми элементами, и у них нет закрывающего тега.

Синтаксис элемента

Общая форма элемента: открывающий тег, содержимое и закрывающий тег.

<tagname>Content goes here...</tagname>

Вложенные элементы HTML

Элементы HTML можно вкладывать друг в друга, то есть один элемент может содержать другие элементы. Каждый HTML-документ строится из вложенных элементов.

В примере <html> — корневой элемент, охватывающий весь документ. Внутри него находится <body>, содержащий видимое содержимое. Внутри body находятся два элемента: <h1> для заголовка и <p> для абзаца.

Пример

Документ с четырьмя вложенными элементами: html, body, h1 и p.

Базовый HTML-документ, показывающий вложенные элементы: html содержит body, а body содержит h1 «Мой Первый Заголовок» и абзац «Мой первый абзац.»

> Результат: полная HTML-страница

Prompt

Базовый HTML-документ, показывающий вложенные элементы: html содержит body, а body содержит h1 «Мой Первый Заголовок» и абзац «Мой первый абзац.»

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вложенные Элементы</title>
</head>
<body>

<h1>Мой Первый Заголовок</h1>
<p>Мой первый абзац.</p>

</body>
</html>

Никогда не пропускайте закрывающий тег

Некоторые элементы всё равно отображаются правильно, даже если вы забыли закрывающий тег, но никогда не стоит на это полагаться. Отсутствие закрывающих тегов может привести к неожиданным результатам и ошибкам.

Пример

Абзацы, написанные без закрывающих тегов. Они могут отображаться, но это плохая практика.

Страница с двумя абзацами, написанными БЕЗ закрывающих тегов p, чтобы показать, что браузеры всё же могут их отображать (хотя на это никогда не следует полагаться). Каждая строка гласит «Это абзац».

> Результат: полная HTML-страница

Prompt

Страница с двумя абзацами, написанными БЕЗ закрывающих тегов p, чтобы показать, что браузеры всё же могут их отображать (хотя на это никогда не следует полагаться). Каждая строка гласит «Это абзац».

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отсутствующий Закрывающий Тег</title>
</head>
<body>

<p>Это абзац
<p>Это абзац

</body>
</html>

Пустые элементы HTML

Элементы без содержимого называются пустыми элементами. Тег <br>, создающий перенос строки, — пустой элемент без закрывающего тега.

Пример

Абзац с переносом строки, созданным с помощью <br>.

Абзац, содержащий перенос строки, сделанный с помощью пустого элемента br: «Это <br> абзац с переносом строки.»

> Результат: полная HTML-страница

Prompt

Абзац, содержащий перенос строки, сделанный с помощью пустого элемента br: «Это абзац с переносом строки.»

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пустой Br</title>
</head>
<body>

<p>Это <br> абзац с переносом строки.</p>

</body>
</html>

HTML не чувствителен к регистру

Теги HTML не чувствительны к регистру, поэтому <P> означает то же, что и <p>. Стандарт не требует строчных букв, но PromptCookbook рекомендует их, а более строгие типы документов, такие как XHTML, требуют этого. PromptCookbook всегда использует строчные имена тегов.

Справочник тегов HTML

Справочник тегов PromptCookbook содержит больше подробностей о каждом теге и его атрибутах. Несколько распространённых: <html> определяет корень документа, <body> определяет тело документа, а <h1> до <h6> определяют заголовки.