Абзацы HTML

Вы уже используете заголовки для названий и разделов. Большая часть читаемого текста тела страницы относится к абзацам. Этот урок посвящён элементу p — как его писать, как браузер его показывает и чем он отличается от пустых строк в редакторе.

Что такое абзац HTML?

Абзац HTML — это блок текста, отмеченный элементом p. Вы открываете <p>, пишете текст и закрываете </p>. Абзацы нужны для обычных предложений и коротких блоков текста тела, а не для заголовков страницы (для них — headings).

Прямой ответ

Оборачивайте каждый блок текста тела в свои теги p. Браузер считает каждый p абзацем и обычно добавляет отступ до и после него. Многократный Enter в HTML-файле не создаёт такой же интервал — браузер сжимает лишние пробелы в исходнике, если вы не используете нужные элементы.

Читаем пример

• Первый <p>…</p> — один абзац
• Второй <p>…</p> — другой абзац
• Браузер показывает их как отдельные блоки, обычно с промежутком между ними
• Текст между тегами — содержимое, которое видят читатели

Пробелы в исходнике — не вёрстка

В редакторе можно нажимать Enter, чтобы HTML-файл было легче читать. Это не значит, что браузер покажет пустые строки как большие пустые зазоры. Для настоящего разрыва абзацев используйте отдельные элементы p. Для перевода строки внутри одной мысли — например короткого адреса или строки стиха — можно использовать <br> (кратко встречалось с элементами).

Лучше абзацы, чем трюки с пустым пространством

Не наслаивайте пустые теги <p></p> только чтобы сдвинуть контент вниз. Не кладите целую статью в один гигантский абзац, если это несколько идей. Делите идеи на ясные блоки p. Позже CSS управляет отступами и шрифтами; HTML должен отмечать реальную структуру текста.

Попробуйте сами

1. Откройте базовый каркас HTML
2. Добавьте h1 и два коротких абзаца под ним
3. Добавьте третий абзац с <br> для короткого многострочного адреса
4. Сохраните и откройте страницу в браузере
5. Сравните то, что видите, с пустыми строками исходного файла

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

• Полагаться на пустые строки в исходнике вместо отдельных тегов p
• Использовать заголовки, когда нужны только обычные предложения тела
• Создавать пустые абзацы только для вертикального отступа
• Забывать закрывающий </p> у длинного абзаца
• Класть целую страницу несвязанных идей в один p

Итог

• Текст тела обычно принадлежит элементу p
• Каждый абзац должен быть своим блоком <p>…</p>
• Браузеры обычно добавляют отступ между абзацами
• Лишние Enter в исходнике не равны реальному интервалу вёрстки
• При необходимости используйте <br> для переноса строки внутри абзаца
• Держите структуру в HTML; уточняйте отступы позже с CSS