Пошук уроків, статей та іншого контенту
Створите абзаци за допомогою p, розберете перенесення рядків і правила поділу тексту на логічні блоки.
Абзац — це логічно завершений блок тексту. У HTML для створення абзацу використовують елемент <p>.
<p>HTML описує структуру вебсторінки.</p>
<p>CSS відповідає за її зовнішній вигляд.</p>Браузер зазвичай додає невеликий відступ між сусідніми абзацами, щоб їх було легше читати.
pЕлемент <p> складається з відкривального та закривального тегів:
<p>Текст абзацу</p>Текст між цими тегами належить до одного абзацу.
Кожен окремий фрагмент думки варто розміщувати у власному абзаці.
<p>
HTML використовують для створення структури вебсторінки.
</p>
<p>
За допомогою HTML можна додавати заголовки, абзаци, списки та посилання.
</p>Перенесення тексту в HTML-файлі не створює нового абзацу. Важливі саме теги <p>:
<p>
Це один абзац,
навіть якщо його текст записано
в кількох рядках HTML-коду.
</p>У браузері цей текст буде показано як один суцільний абзац.
Поділ тексту на абзаци:
робить текст зрозумілішим;
допомагає читачеві знаходити логічні частини;
дає змогу стилізувати кожен блок;
покращує структуру документа.
Наприклад:
<p>Вебсторінка складається з HTML-елементів.</p>
<p>Кожен елемент має власне призначення.</p>
<p>Правильна структура допомагає підтримувати код.</p>Це краще, ніж розміщувати весь текст в одному великому абзаці.
brІноді потрібно перенести текст на новий рядок, але не починати новий логічний абзац. Для цього використовують елемент <br>.
<p>
вул. Шевченка, 10<br>
Київ, Україна
</p>У результаті адреса відобразиться у два рядки:
вул. Шевченка, 10
Київ, Україна<br> не створює новий абзац. Він лише вставляє перенесення рядка всередині поточного абзацу.
Для рядків, які мають зберігати поділ, можна використати <br>:
<p>
Тихий вечір над містом,<br>
світло вікон мерехтить.
</p>У цьому випадку всі рядки залишаються частиною одного абзацу, але відображаються окремо.
p, а коли brВикористовуйте <p>, якщо:
починається нова думка;
текст утворює окремий логічний блок;
між частинами потрібен проміжок;
абзаци мають бути незалежними.
Використовуйте <br>, якщо:
потрібно перенести частину тексту на новий рядок;
текст повинен залишатися одним логічним блоком;
створюється адреса, підпис або рядки вірша.
Порівняйте:
<!-- Два окремі абзаци -->
<p>Це перша думка.</p>
<p>Це інша думка.</p>
<!-- Один абзац із перенесенням рядка -->
<p>
Це перша частина адреси.<br>
Це друга частина адреси.
</p>Браузер зазвичай об’єднує кілька пробілів і переносів рядка в один пробіл.
<p>
У цьому тексті
багато
пробілів.
</p>На сторінці це буде приблизно так:
У цьому тексті багато пробілів.Тому для структури тексту потрібно використовувати HTML-елементи:
<p> — для абзаців;
<br> — для перенесення рядка.
Не варто створювати відступи за допомогою великої кількості пробілів або порожніх рядків у коді.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Абзаци</title>
</head>
<body>
<h1>Мій навчальний день</h1>
<p>
Сьогодні я вивчаю HTML і створюю свою першу вебсторінку.
</p>
<p>
Спочатку я навчився додавати заголовки та абзаци.
Потім дізнався, як переносити текст на новий рядок.
</p>
<p>
Час навчання: 10:00<br>
Місце: домашній комп'ютер
</p>
</body>
</html>У цьому прикладі:
<h1> створює заголовок;
кожен <p> створює окремий логічний блок;
<br> переносить час і місце на різні рядки;
перенесення рядків у коді всередині <p> не створюють нових абзаців.
<br> замість <p>Не варто створювати великі тексти за допомогою багатьох <br>:
<p>
Перша думка.<br><br>
Друга думка.<br><br>
Третя думка.
</p>Краще використати окремі абзаци:
<p>Перша думка.</p>
<p>Друга думка.</p>
<p>Третя думка.</p>Так структура документа буде зрозумілішою.
pПишіть повну пару тегів:
<p>Текст абзацу</p>Не залишайте абзац без закривального тегу:
<p>Текст абзацуБраузер іноді спробує виправити таку помилку, але результат може бути неочікуваним.
Не використовуйте порожні елементи <p> для створення вертикального простору:
<p>Перший текст</p>
<p></p>
<p>Другий текст</p>Елемент <p> має містити текстовий блок, а не слугувати порожнім відступом.
Створіть HTML-сторінку про себе. Додайте:
заголовок сторінки;
два або три абзаци про свої інтереси;
окремий абзац із контактною інформацією;
перенесення рядка між містом і країною за допомогою <br>.
Приклад структури:
<h1>Про мене</h1>
<p>Мене звати Олена. Я вивчаю веброзробку.</p>
<p>
У вільний час я читаю книги та вивчаю програмування.
</p>
<p>
Львів<br>
Україна
</p>Для створення абзацу використовують елемент <p>.
Кожен <p> має містити окремий логічний блок тексту.
Перенесення рядка в HTML-коді саме по собі не створює новий абзац.
Елемент <br> переносить текст на новий рядок, але не створює нового абзацу.
Не варто використовувати багато <br> або порожні <p> для поділу великих текстів.
Правильний поділ тексту покращує читабельність і структуру вебсторінки.