НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

HTML5 Підручник

HTML СТАРТ HTML Вступ HTML Редактори HTML Основні приклади HTML Елементи HTML Атрибути HTML Заголовки HTML Параграфи HTML Стилі HTML Форматування HTML Цитати HTML Коментарі HTML Кольори HTML CSS HTML Посилання HTML Зображення HTML Таблиці HTML Списки HTML Блоки HTML Класи HTML Ідентифікатори HTML Фрейми HTML JavaScript HTML Шляхи файлів HTML Голова веб-сторінки HTML Макети HTML Адаптивність HTML Комп'ютерний код HTML Символьні об'єкти HTML Символи HTML Кодування HTML URL кодування HTML XHTML

HTML Форми

HTML Форми HTML Елементи форми HTML Типи вводу HTML Атрибути вводу

HTML5

HTML5 Вступ HTML5 Підтримка HTML5 Нові елементи HTML5 Семантичні елементи HTML5 Перехід з HTML4 HTML5 Гід по стилю

HTML Графіка

HTML Canvas HTML SVG

HTML Медіа

HTML Медіа HTML Відео HTML Аудіо HTML Плагіни HTML YouTube

HTML API

HTML Геолокація HTML Drag/Drop HTML Web сховище HTML Web робітники HTML SSE

HTML Приклади

HTML Приклади HTML Вікторина HTML Вправи HTML Сертифікат HTML Резюме HTML Доступність

HTML Довідники

HTML Список тегів HTML Атрибути HTML Глобальні атрибути HTML Події HTML Кольори HTML Canvas HTML Аудіо/Відео HTML Діючі Doctype HTML Набори символів HTML URL кодування HTML Кодування мови HTTP Повідомлення HTTP Методи PX в EM Конвертер Гарячі клавіши

HTML5. Уроки для початківців

HTML Параграфи



HTML Параграфи

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

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

Приклад

<p>Це параграф.</p>
<p>Це інший параграф.</p>
Спробуйте самі »

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


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

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

Приклади

<p>
Цей параграф
містить багато рядків
у вихідному коді,
але браузер
ігнорує їх.
</p>

<p>
Цей параграф
містить         багато місця
у вихідному коді        
але        браузер
ігнорує його.
</p>
Спробуйте самі »

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

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

Приклад

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

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

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


HTML Розриви рядків

HTML елемент <br> визначає розрив рядка.

Використовуйте тег <br> якщо необхідно перервати рядок (створити новий рядок), не починаючи новий параграф:

Приклад

<p>Цей<br>параграф<br>має розриви рядка.</p>
Спробуйте самі »

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


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

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

Приклад

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

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

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

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

HTML елемент <pre>

HTML елемент <pre> визначає форматований текст.

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

Приклад

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

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

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

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

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Використовуйте коректний HTML тег, щоб додати параграф з текстом "Hello World!".

<html>
<body>

</body>
</html>

Почати вправу


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

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

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

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