Какие бывают категории HTML-тегов?

Вопрос

Как классифицируются HTML-теги: чем блочные элементы отличаются от строчных, что такое void-элементы и в чём разница между замещаемыми (replaced) и незамещаемыми элементами?

Короткий ответ

Основное деление — block (занимают всю ширину, начинаются с новой строки) и inline (занимают только необходимое место в потоке текста). Отдельно выделяют void-элементы, у которых нет закрывающего тега и содержимого (<img>, <br>, <input>), и replaced-элементы, чьё содержимое рендерится не HTML/CSS-движком, а внешним ресурсом (<img>, <video>, <iframe>).

Подробный ответ

Block vs inline (по умолчанию, через CSS display):

• Block-level (div, p, h1–h6, section, ul) — начинается с новой строки, растягивается на всю доступную ширину родителя, принимает width/height/вертикальные margin.
• Inline (span, a, strong, em) — не создаёт разрыва строки, ширина/высота определяются содержимым, вертикальные margin/padding визуально не влияют на соседние строки.
• Inline-block — не CSS-стандарт HTML-тегов, а значение display, гибрид: течёт в строке, но принимает width/height как блочный.

Важно: это поведение по умолчанию, заданное браузерным UA-стилем, а не фиксированное свойство тега — display можно переопределить в CSS.

Void-элементы (пустые элементы):

Не имеют содержимого и закрывающего тега: <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <col>, <embed>, <source>, <track>, <wbr>. В HTML5 слэш в конце (<br />) необязателен, но допустим для совместимости с XHTML/XML-парсерами.

Replaced vs non-replaced элементы:

• Replaced — браузер подставляет содержимое из внешнего источника, и CSS не может «заглянуть» внутрь: <img>, <video>, <audio>, <iframe>, <embed>, отчасти <input> и <textarea>. Их внешний вид зависит от внутреннего рендерера ресурса, а не от обычных CSS-правил (например, ::before/::after к ним не применяются или применяются ограниченно).
• Non-replaced — содержимое формируется самим HTML/CSS-движком из дочерних узлов: <p>, <div>, <span> и большинство остальных тегов.

Это разделение важно для CSS: у replaced-элементов есть intrinsic dimensions (внутренние размеры, например у <img> — исходное разрешение картинки), которые влияют на расчёт layout при отсутствии явных width/height.

Пример

<!-- block -->
<div>Блочный элемент — своя строка, вся ширина</div>

<!-- inline -->
<p>Текст с <span>строчным</span> и <a href="#">строчным</a> элементом</p>

<!-- void-элементы: без содержимого и закрывающего тега -->
<img src="photo.jpg" alt="Фото" />
<br />
<input type="text" name="username" />

<!-- replaced-элемент: рендерится внешним движком (декодером изображений) -->
<img src="cat.png" alt="Кот" width="200" height="150" />

Дополнительные вопросы

• Чем display: inline-block отличается от display: inline и display: block?
• Почему <textarea> считают частично replaced-элементом?
• Как отсутствие width/height у <img> влияет на CLS (Cumulative Layout Shift)?