Все теги HTML можно разделить на две большие группы: блочные и строчные. Их главное отличие — как они располагаются на странице и как взаимодействуют с соседями.

1. Блочные теги

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

<p>Первый абзац</p>
<p>Второй абзац</p>
<h1>Заголовок</h1>
<div>Обычный блок</div>

Как это выглядит в браузере:

Каждый элемент начинается с новой строки. Между абзацами браузер добавляет небольшие отступы — это особенность тега <p>.

Самые распространённые блочные теги

• <div> — универсальный блок
• <p> — абзац
• <h1>...<h6> — заголовки
• <ul>, <ol>, <li> — списки
• <table> — таблица
• <form> — форма
• <header>, <footer>, <section>, <article> — смысловые блоки

2. Строчные теги (inline)

Строчный тег не переносит строку ни до, ни после. Он располагается в той же строке, что и окружающий текст, и занимает ровно столько места, сколько нужно его содержимому.

<strong>Жирный текст</strong>
<em>Курсив</em>
<a href="#">Ссылка</a>
<span>Обычный кусок текста</span>

Как это выглядит в браузере:

Все элементы идут друг за другом в одну строку. Если они не помещаются по ширине, браузер перенесёт часть на следующую строку.

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

• <span> — универсальный контейнер для текста
• <a> — ссылка
• <strong> — сильное выделение (жирный)
• <em> — смысловое выделение (курсив)
• <img> — изображение
• <button> — кнопка
• <input> — поле ввода
• <label> — подпись к полю

3. Сравнение блочных и строчных

<div>Это блок</div><div>И это блок</div>
<span>Это строчный</span><span>И это строчный</span>

Как это выглядит в браузере:

Два блока — каждый на новой строке. Два строчных — на одной строке друг за другом.

4. Важное правило: вложенность

Блочные теги могут содержать внутри любые теги — и блочные, и строчные.

Строчные теги должны содержать только строчные теги или текст. Нельзя вкладывать блочный тег внутрь строчного.