Текстове форматування та списки

HTML текстове форматування — друкарська майстерня з набірними блоками різного розміру

У попередньому уроці ми створили свою першу HTML-сторінку з базовою структурою. Тепер розберемо детально заголовки, параграфи, форматування тексту та списки.

Заголовки <h1> — <h6>

HTML має 6 рівнів заголовків — від найважливішого <h1> до найменш важливого <h6>:

<h1>Заголовок 1 рівня — головний заголовок сторінки</h1>
<h2>Заголовок 2 рівня — розділ</h2>
<h3>Заголовок 3 рівня — підрозділ</h3>
<h4>Заголовок 4 рівня</h4>
<h5>Заголовок 5 рівня</h5>
<h6>Заголовок 6 рівня — найменший</h6>

Правила використання заголовків

• <h1> — один на сторінку, описує тему всієї сторінки
• <h2> — основні розділи сторінки
• <h3> — підрозділи всередині <h2>
• <h4>—<h6> — використовуються рідше, для глибшої вкладеності

<!-- ✅ Правильна ієрархія -->
<h1>Рецепти української кухні</h1>
  <h2>Перші страви</h2>
    <h3>Борщ</h3>
    <h3>Солянка</h3>
  <h2>Другі страви</h2>
    <h3>Вареники</h3>

<!-- ❌ Неправильно — пропущено рівень -->
<h1>Рецепти</h1>
  <h3>Борщ</h3>  <!-- Пропущено h2! -->

Детальніше про заголовки: W3Schools — HTML Headings

Параграфи <p>

Тег <p> (paragraph) — основний блок тексту на сторінці:

<p>Це перший параграф. Браузер автоматично додає відступи зверху та знизу.</p>
<p>Це другий параграф. Між параграфами завжди є проміжок.</p>

Важливі особливості <p>

1. Перенос рядків ігнорується:

<!-- Браузер відобразить це в один рядок! -->
<p>
  Цей текст написаний
  на кількох рядках
  у коді, але браузер
  покаже його в один.
</p>

Якщо потрібен розрив рядка всередині параграфу — використовуй <br>:

<p>Рядок перший<br>Рядок другий</p>

2. Зайві пробіли стискаються:

<!-- Браузер покаже тільки один пробіл між словами -->
<p>Слово     з     пробілами</p>
<!-- Результат: "Слово з пробілами" -->

3. <p> — блоковий елемент:

Параграф завжди починається з нового рядка і займає всю доступну ширину. Не можна вкладати блокові елементи всередину <p> (наприклад, <div> або інший <p>).

Детальніше про параграфи: W3Schools — HTML Paragraphs

Форматування тексту

Жирний та курсивний текст

Два найпоширеніші способи виділити текст:

<strong>Жирний текст</strong> — для важливої інформації
<em>Курсивний текст</em> — для наголосу або акценту

Результат:

• Жирний текст — для важливої інформації
• Курсивний текст — для наголосу або акценту

<strong> і <em> — це семантичні теги. Вони не просто змінюють вигляд, а вказують на значення тексту. Браузери та скрін-рідери розуміють, що цей текст важливий.

Детальніше: W3Schools — HTML Text Formatting

Застарілі теги <b> та <i>

Ви можете зустріти теги <b> (bold) та <i> (italic). Вони виглядають так само, але не несуть семантичного значення:

<!-- ✅ Рекомендовано — семантичні теги -->
<strong>Увага!</strong> Це <em>важливо</em>.

<!-- ⚠️ Не рекомендовано — лише візуальне оформлення -->
<b>Увага!</b> Це <i>важливо</i>.

Завжди використовуйте <strong> та <em> замість <b> та <i>.

Інші корисні теги форматування

<mark>Виділений текст</mark> — підсвічування (жовтий фон)

<del>Закреслений текст</del> — видалена інформація

<ins>Підкреслений текст</ins> — додана інформація

<sub>Підрядковий</sub> текст — наприклад H<sub>2</sub>O

<sup>Надрядковий</sup> текст — наприклад E = mc<sup>2</sup>

<code>Код</code> — для фрагментів коду в тексті

Списки

Списки — це один з найважливіших елементів HTML. Вони використовуються скрізь: меню, навігація, перелік товарів, кроки інструкцій тощо.

Невпорядкований список <ul>

Unordered List — список без нумерації (маркери). Детальніше: W3Schools — HTML Lists

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Результат:

• HTML
• CSS
• JavaScript

Впорядкований список <ol>

Ordered List — нумерований список. Детальніше: W3Schools — Ordered Lists

<ol>
  <li>Відкрити редактор коду</li>
  <li>Створити файл index.html</li>
  <li>Написати структуру HTML</li>
  <li>Відкрити файл у браузері</li>
</ol>

Результат:

1. Відкрити редактор коду
2. Створити файл index.html
3. Написати структуру HTML
4. Відкрити файл у браузері

<ol> має корисні атрибути:

<!-- Починати нумерацію з 5 -->
<ol start="5">
  <li>П'ятий пункт</li>
  <li>Шостий пункт</li>
</ol>

<!-- Зворотня нумерація -->
<ol reversed>
  <li>Третє місце</li>
  <li>Друге місце</li>
  <li>Перше місце!</li>
</ol>

<!-- Нумерація літерами -->
<ol type="a">
  <li>Варіант а</li>
  <li>Варіант б</li>
</ol>

Правила роботи зі списками

<!-- ✅ Правильно -->
<ul>
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ul>

<!-- ❌ Неправильно -->
<ul>
  <p>Це не можна робити</p>
  Просто текст теж не можна
</ul>

Але всередині <li> може бути будь-який контент — текст, зображення, посилання і навіть інші списки!

Вкладені списки

Списки можна вкладати один в одний. Це корисно для створення ієрархічних структур:

<ul>
  <li>Фронтенд
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Бекенд
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Java</li>
    </ul>
  </li>
</ul>

Результат:

• Фронтенд
  • HTML
  • CSS
  • JavaScript
• Бекенд
  • Node.js
  • Python
  • Java

Можна також комбінувати <ul> та <ol>:

<ol>
  <li>Вивчити основи
    <ul>
      <li>HTML — структура</li>
      <li>CSS — стилі</li>
    </ul>
  </li>
  <li>Перейти до JavaScript</li>
  <li>Вивчити фреймворк</li>
</ol>

Детальніше: W3Schools — Nested Lists

Комбінування форматування

Теги форматування можна комбінувати між собою та використовувати всередині списків:

<ul>
  <li><strong>HTML</strong> — мова <em>розмітки</em></li>
  <li><strong>CSS</strong> — мова <em>стилів</em></li>
  <li><strong>JavaScript</strong> — мова <em>програмування</em></li>
</ul>

Приклад: сторінка рецепту

Давайте поєднаємо все, що знаємо, у реалістичному прикладі:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Рецепт борщу</title>
</head>
<body>
  <h1>Український борщ</h1>
  <p>Класичний рецепт <strong>українського борщу</strong> з пампушками.</p>

  <h2>Інгредієнти</h2>
  <ul>
    <li>Буряк — 2 шт.</li>
    <li>Картопля — 3 шт.</li>
    <li>Капуста — <em>половина качана</em></li>
    <li>М'ясо — 500 г</li>
    <li>Цибуля — 1 шт.</li>
    <li>Морква — 1 шт.</li>
  </ul>

  <h2>Кроки приготування</h2>
  <ol>
    <li>Зварити бульйон з м'яса</li>
    <li>Нарізати овочі</li>
    <li>Додати картоплю в бульйон</li>
    <li>Зробити зажарку з буряка, моркви та цибулі</li>
    <li>Додати капусту та зажарку</li>
    <li>Варити ще <strong>15 хвилин</strong></li>
  </ol>

  <p><mark>Подавати гарячим зі сметаною та пампушками!</mark></p>
</body>
</html>

Список визначень <dl>

Є ще один тип списку — список визначень (definition list). Він корисний для словників та глосаріїв. Детальніше: W3Schools — Description Lists

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — мова розмітки для веб-сторінок</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — мова стилів для оформлення HTML</dd>

  <dt>JavaScript</dt>
  <dd>Мова програмування для створення інтерактивних веб-сторінок</dd>
</dl>

Розрив рядка та горизонтальна лінія

Два корисні самозакриваючі теги:

<!-- Розрив рядка — переносить текст на новий рядок -->
<p>Рядок перший<br>Рядок другий</p>

<!-- Горизонтальна лінія — візуальний розділювач -->
<p>Секція 1</p>
<hr>
<p>Секція 2</p>

<br> та <hr> — це самозакриваючі теги (void elements). Вони не мають закриваючого тегу та не містять контенту.

Детальніше: W3Schools — br | W3Schools — hr

Корисні посилання

• W3Schools — HTML Elements Reference — повний довідник всіх HTML тегів
• W3Schools — HTML Text Formatting — форматування тексту
• W3Schools — HTML Lists — списки
• MDN Web Docs — HTML — документація Mozilla (є українською!)

Підсумок

У цьому уроці ми вивчили:

• Заголовки <h1>—<h6> — ієрархія заголовків, правило одного <h1> на сторінку
• Параграфи <p> — основний текстовий блок, особливості пробілів та переносів
• Форматування тексту — <strong>, <em>, <mark>, <del>, <code> та інші
• Невпорядковані списки — <ul> з маркерами
• Впорядковані списки — <ol> з нумерацією, атрибути start, reversed, type
• Вкладені списки — списки всередині списків
• Список визначень — <dl>, <dt>, <dd>
• Самозакриваючі теги — <br> та <hr>

Що далі?

У наступному уроці ми вивчимо посилання та зображення — як створювати навігацію між сторінками та додавати зображення.