Як зробити абзац в HTML — це базове питання для всіх, хто починає верстати сторінки або редагувати контент у CMS. Найпростіший і правильний спосіб — використовувати тег <p>, який позначає окремий текстовий абзац.
Що означає абзац у HTML
Абзац у HTML — це логічно завершений фрагмент тексту, який браузер відображає з відступами зверху і знизу. Тег <p> допомагає розділяти текст на смислові блоки, щоб сторінка читалася легше і виглядала акуратно.
На відміну від простого переносу рядка, абзац у HTML має семантичне значення. Пошукові системи, скрінрідери та редактори контенту краще розуміють структуру сторінки, коли текст розмічений правильно.
Як зробити абзац в HTML за допомогою тега p
Як зробити абзац в HTML правильно — обгорнути текст у відкривальний і закривальний тег <p>.
<p>Це перший абзац тексту.</p>
<p>Це другий абзац тексту.</p>
Кожен новий абзац потрібно писати окремим тегом. Браузер сам додасть візуальний проміжок між ними, тому вручну ставити кілька порожніх рядків не потрібно.
Коли використовувати p, а коли br
Тег <p> використовують для окремих думок або блоків тексту, а <br> — лише для переносу рядка всередині одного абзацу, наприклад у адресі або вірші.
- <p> — для повноцінного абзацу.
- <br> — для одиночного переносу рядка.
- <div> — для контейнера без семантики абзацу.
Як виглядає правильна структура тексту на сторінці
Правильна структура тексту на сторінці складається з заголовків, абзаців і, за потреби, списків. Текст не варто звалювати в один великий блок, бо його важко читати на екрані телефону.
Для статті, опису товару або інструкції зазвичай працює проста схема: заголовок розділу, один-два абзаци пояснення, далі список або приклад. Такий підхід робить контент зрозумілішим і для людей, і для пошуку.
Типові помилки під час створення абзаців
Типові помилки під час створення абзаців пов’язані з неправильним використанням тегів і зайвими переносами рядків.
- Використання кількох <br> замість одного нормального абзацу.
- Пропуск закривального тега </p>.
- Вкладання блочних елементів усередину <p>, що може ламати верстку.
- Створення абзаців пробілами або порожніми рядками в редакторі без HTML-розмітки.
Щоб перевірити результат, відкрийте сторінку в браузері та подивіться, чи кожен абзац відокремлений візуально і чи текст не зливається в суцільну стіну. Якщо розмітка виглядає неправильно, перевірте теги <p> і <br> в коді або візуальному редакторі.
Короткий приклад для практики
Короткий приклад показує, як зробити абзац в HTML у реальному коді без зайвих елементів.
<p>Перший абзац пояснює тему.</p>
<p>Другий абзац додає нову думку.</p>
<p>Третій абзац завершує фрагмент.</p>
Якщо після вставки коду абзаци не відображаються окремо, перевірте, чи HTML не вставлено всередину елемента, який скидає стилі, або чи редактор не замінює теги на звичайний текст.
