Урок №8. HTML. Параграфи (абзаци)

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Параграфи в HTML. Як зробити параграфи на веб-сторінках?

Елемент HTML <p> визначає параграф (абзац):

Примітка: Слово paragraph зазвичай перекладається, як абзац. Але в середовищі веб-розробників частіше використовують слово параграф, тобто відступ тексту з нового рядка. Тут і далі буде використовуватись саме слово параграф.

Приклад:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Спробуйте самі! »

Примітка: Браузери автоматично додають пробіл (margin) до і після параграфу.


Відображення HTML

Ви не можете знати впевнено, де саме буде відображатись ваша веб-сторінка, на яких дисплеях чи пристроях. Великі або малі екрани та розміри вікон створюють різні результати. За допомогою HTML-коду ви не можете змінювати вихідне відображення, додаючи додаткові пробіли або додаткові рядки у вашому HTML-коді. Під час відображення сторінки веб-браузер видаляє будь-які додаткові пробіли та додаткові рядки:

Приклад:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
Спробуйте самі! »

Не забувайте про кінцевий тег

Більшість браузерів відображатиме HTML правильно, навіть якщо ви забудете кінцевий тег:

Приклад:

<p>This is a paragraph.
<p>This is another paragraph.
Спробуйте самі! »

Приклад вище буде працювати в більшості браузерів, але не покладайтеся на нього.

Примітка: Видалення кінцевого тегу може призвести до несподіваних результатів або помилок у відображенні веб-сторінки.


Перерви HTML-рядків

Елемент HTML <br> визначає розрив рядка. Використовуйте функцію <br>, якщо потрібно перервати рядок (створити новий рядок), не починаючи новий параграф:

Приклад:

<p>This is<br>a paragraph<br>with line breaks.</p>
Спробуйте самі! »

Тег <br> - це порожній тег, що означає, що він не має кінцевого тегу.


Проблема відображення поезії

Цей вірш відображатиметься в одному рядку:

Приклад:

<p>
  Зродились ми великої години,

  З пожеж війни і з полум'я вогнів,

  Плекав нас біль по втраті України,

  Кормив нас гнів і злість на ворогів.
</p>
Спробуйте самі! »

Елемент HTML <pre>

Елемент HTML <pre> визначає попередньо відформатований текст. Текст всередині елемента <pre> відображається шрифтом фіксованої ширини (зазвичай Courier), і він зберігає пробіли і розриви рядків так, як написано:

Приклад:

<pre>
  І ось ідем у бою життєвому

  Міцні, тверді, незломні мов граніт,

  Бо плач не дав свободи ще нікому,

  А хто борець, той здобуває світ.
</pre>
Спробуйте самі! »

Перевірте себе вправами!


Довідник HTML тегів

Довідник HTML тегів на сайті W3Schools містить додаткову інформацію про HTML елементи та їх атрибути.

Тег Опис
<p> Визначає параграф (абзац)
<br> Вставляє один розрив рядка
<pre> Визначає попередньо відформатований текст

Довідник HTML тегів

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.