HTML элемент

HTML-документ состоит из ряда HTML-элементов, формирующих основу структуры веб-страницы.

Что такое HTML-элемент?

HTML-элементы — это отначального тегадоконечного тегаполная структура между ними.

Начальный тег Содержимое элемента Конечный тег
<p> Это абзац </p>
<a href="default.htm.html"> Это ссылка </a>
<br> Перенос строки (пустой элемент) Отсутствует

Описание:

  • Начальный тег также называетсяоткрывающим тегом
  • Конечный тег также называетсязакрывающим тегом

Правила синтаксиса HTML-элементов

  • Элемент начинается сОткрывающий тегначинается сЗакрывающий тегКонец
  • Содержимое элемента располагается между открывающим и закрывающим тегами.
  • Некоторые элементы являютсяпустыми элементами, без содержимого
  • Пустые элементы обычно самозакрываются в открывающем теге (например,<br />）
  • Большинство элементов могут содержатьАтрибуты

Совет:Атрибуты будут подробно рассмотрены в следующих главах.

Вложенность HTML-элементов

HTML-элементы могут быть вложены друг в друга, образуя древовидную структуру:

  • Элемент может содержать другие элементы
  • HTML-документ по сути представляет собой вложенную структуру (DOM-дерево).

Пример HTML-документа

<!DOCTYPE html>
<html>

  <body>
<p>Это первый абзац.</p>
  </body>

</html>

Пример содержит 3 основных элемента:html、body、p。

Разбор примера

Элемент <p> (абзац)

<p>Это первый абзац.</p>

Определяет абзац, содержащий текстовое содержимое.

Элемент <body> (body)

<body>
<p>Это первый абзац.</p>
</body>

Определяет основное содержимое страницы и может содержать несколько дочерних элементов.

Элемент <html> (корневой элемент)

<html>

  <body>
<p>Это первый абзац.</p>
  </body>

</html>

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

О закрывающем теге

В некоторых случаях браузер автоматически добавляет отсутствующие закрывающие теги:

<p>Это абзац
<p>Это другой абзац

Хотя это может отображаться нормально,не рекомендуется полагаться на такое поведение, что может привести к:

  • Нарушенная структура
  • Аномалии стилей
  • Проблемы совместимости

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

Пустые элементы — это элементы без содержимого, например:

  • <br>(разрыв строки)
  • <img>(изображение)
  • <input>(поле ввода)

Рекомендуемый синтаксис:

<br />

Этот синтаксис совместим с HTML, XHTML и XML и является более стандартизированным.

Лучшая практика: использовать теги в нижнем регистре

HTML-тегнечувствителен к регистру, но рекомендуется:

  • Использовать единообразнотеги в нижнем регистре
  • Соответствует спецификациям W3C
  • Улучшает читаемость кода и согласованность
Другие расширения