Текст, Заголовки і Абзаци

З поверненням.

У попередньому уроці ти вивчив структуру HTML-документа.

Тепер переходимо до самого контенту.

Текст.

Заголовки.

Абзаци.

Те, що люди насправді читають.

Бо вебсторінка без організованого тексту — це просто стіна слів.

А ніхто не хоче битися зі стіною слів до сніданку.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

• як працюють заголовки в HTML;
• різницю між h1, h2, h3 та іншими рівнями;
• як писати абзаци через p;
• як виділяти важливий текст через strong і em;
• коли використовувати br;
• коли використовувати hr;
• як робити структуру тексту зрозумілою і читабельною.

Заголовки в HTML

HTML має шість рівнів заголовків:

<h1>Головний Заголовок</h1>
<h2>Заголовок Розділу</h2>
<h3>Заголовок Підрозділу</h3>
<h4>Менший Заголовок</h4>
<h5>Ще Менший Заголовок</h5>
<h6>Найменший Заголовок</h6>

Найважливіший заголовок — h1.

Зазвичай сторінка має один головний h1.

Думай про нього як про назву сторінки.

Потім використовуй h2 для великих розділів, h3 для підрозділів і так далі.

Як у книзі:

Назва Книги
  Розділ
    Секція
      Менша частина

HTML-заголовки — це не просто розмір тексту.

Вони описують структуру.

Це важливо для:

• читачів;
• screen readers;
• пошукових систем;
• організації сторінки;
• майбутнього тебе, який пізніше буде намагатися зрозуміти сторінку.

Хороша Структура Заголовків

Приклад:

<h1>Мій Блог про Подорожі</h1>

<h2>Подорож до Рима</h2>
<p>Рим повний історії, їжі і людей, які переходять дорогу так, ніби мають дипломатичний імунітет.</p>

<h2>Подорож до Мілана</h2>
<p>Мілан елегантний, швидкий і чомусь завжди має кращі черевики, ніж ти.</p>

<h3>Улюблені Місця в Мілані</h3>
<p>Собор, галереї і кожне місце, де кава з’являється швидко.</p>

Ця структура має сенс.

h1 — тема сторінки.

Елементи h2 — головні розділи.

h3 — менший розділ всередині одного з цих розділів.

Хороша структура спокійна.

Погана структура — це пакет з магазину, повний тегів.

Не Пропускай Рівні Заголовків

Старайся не стрибати з h1 одразу до h4.

Це не ідеально:

<h1>Моя Сторінка</h1>
<h4>Малий Розділ</h4>

Краще:

<h1>Моя Сторінка</h1>
<h2>Малий Розділ</h2>

Рівні заголовків мають іти логічно.

Не тому, що браузер вибухне.

Не вибухне.

А тому, що контент буде легше зрозуміти.

А ми любимо контент, який не поводиться як пазл, придуманий втомленим єнотом.

Абзаци

Абзаци створюються тегом p:

<p>Це абзац.</p>

Абзац — це блок тексту.

Приклад:

<p>HTML допомагає нам чітко структурувати вебсторінки.</p>
<p>Кожен абзац має містити одну думку або маленьку групу пов’язаних думок.</p>

Не клади весь текст в один гігантський абзац.

Це боляче:

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

Краще:

<p>Це перша думка.</p>
<p>Це друга думка.</p>
<p>Це третя думка.</p>

Читабельний текст — дружній текст.

Важливий Текст

Використовуй strong для важливого тексту:

<p>Це <strong>дуже важливо</strong>.</p>

Браузер зазвичай показує strong жирним шрифтом.

Але значення важливіше за вигляд.

strong означає, що текст має сильну важливість.

Використовуй його, коли щось справді важливе.

Не кожні три слова.

Якщо все важливе, тоді нічого не важливе.

І сторінка починає кричати.

Виділений Текст

Використовуй em для акценту:

<p>Мені <em>дуже</em> подобається чистий HTML.</p>

Браузер зазвичай показує em курсивом.

Але знову ж таки, значення важливе.

em змінює акцент у реченні.

Приклад:

<p>Я сказав, що люблю HTML.</p>
<p>Я сказав, що <em>люблю</em> HTML.</p>

Друге речення підкреслює слово “люблю”.

Маленький тег.

Інше відчуття.

HTML буває хитрим.

Перенесення Рядка

Тег br створює перенесення рядка:

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

br не потребує закриваючого тегу.

Він може бути корисний для:

• адрес;
• віршів;
• коротких переносів, де перенос має значення.

Приклад:

<p>
  Viktor Holovin<br>
  Vigevano, Italy<br>
  Web Developer
</p>

Не використовуй br просто для створення простору між секціями.

Це не добре:

<p>Перший абзац.</p>
<br>
<br>
<p>Другий абзац.</p>

Для відступів краще CSS.

HTML — для структури.

CSS — для вигляду.

Не змушуй HTML робити роботу CSS.

У нього вже є робота.

Горизонтальна Лінія

Тег hr створює тематичну паузу:

<hr>

Він означає зміну або розділення контенту.

Приклад:

<h2>Про Мене</h2>
<p>Я створюю сайти і вивчаю технології крок за кроком.</p>

<hr>

<h2>Контакт</h2>
<p>Можна зв’язатися зі мною через email.</p>

Використовуй hr, коли є реальне розділення контенту.

Не тільки тому, що сторінка виглядає порожньою.

Це вже декорація.

CSS займеться декораціями пізніше.

Нехай HTML зберігає гідність.

Створи Сторінку для Практики

Створи новий файл:

touch text.html

Додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Тексту</title>
</head>
<body>
  <h1>Практика Тексту</h1>

  <h2>Про Цю Сторінку</h2>
  <p>Ця сторінка допомагає мені практикувати заголовки й абзаци в HTML.</p>
  <p>Хороша структура тексту робить сторінку легшою для читання.</p>

  <h2>Важлива Нотатка</h2>
  <p>HTML — це про <strong>структуру</strong>, а не декорацію.</p>
  <p>Я вивчаю його <em>крок за кроком</em>.</p>

  <hr>

  <h2>Контакт</h2>
  <p>
    Viktor Holovin<br>
    Web Developer<br>
    Italy
  </p>
</body>
</html>

Відкрий її в браузері.

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

Маленька сторінка.

Правильно структурована сторінка.

Дуже солідно.

Типові Помилки

Використовувати Заголовки Тільки для Розміру

Це неправильне мислення:

<h1>Великий текст</h1>
<h6>Малий текст</h6>

Заголовки — це не просто розмір шрифту.

Це структура.

Використовуй їх для організації контенту.

Забагато h1

Зазвичай сторінка має мати один головний h1.

Краще:

<h1>Моя Сторінка</h1>
<h2>Про Мене</h2>
<h2>Контакт</h2>

Не так:

<h1>Моя Сторінка</h1>
<h1>Про Мене</h1>
<h1>Контакт</h1>

Сторінці не потрібно три королі.

Одного достатньо.

Використовувати br для Layout

Не використовуй багато br, щоб створювати відступи.

Погано:

<br>
<br>
<br>

Для візуальних відступів пізніше буде CSS.

HTML має описувати значення.

Практика

Створи сторінку про хобі.

Вона має містити:

• один h1;
• мінімум два розділи h2;
• один підрозділ h3;
• чотири абзаци;
• один елемент strong;
• один елемент em;
• один hr;
• один приклад з br.

Приклади тем:

• карате;
• програмування;
• йога;
• подорожі;
• кулінарія;
• вивчення мов.

Обери щось реальне, якщо можеш.

Реальний текст кращий за фейковий.

Фейковий текст не має душі.

Міні-Завдання

Створи файл:

article.html

Побудуй просту сторінку статті.

Вона має містити:

• title у вкладці браузера;
• назву статті як h1;
• вступний абзац;
• три розділи з h2;
• один підрозділ з h3;
• виділені слова;
• важливі слова;
• фінальну горизонтальну лінію;
• короткий блок автор/контакт з br.

Без CSS.

Без JavaScript.

Тільки чиста HTML-структура тексту.

Підсумок

Сьогодні ти дізнався, що:

• HTML має шість рівнів заголовків від h1 до h6;
• h1 зазвичай є головним заголовком сторінки;
• рівні заголовків мають іти логічно;
• p створює абзаци;
• strong позначає важливий текст;
• em позначає текст з акцентом;
• br створює змістовне перенесення рядка;
• hr створює тематичну паузу;
• HTML-текст має бути організованим, читабельним і змістовним.

Текст — серце більшості вебсторінок.

Якщо структура ясна, сторінка одразу стає кращою.

Навіть до того, як CSS прийде в сонцезахисних окулярах.

Наступний Урок

У наступному уроці ми вивчимо списки й організацію.

Бо іноді контенту потрібен порядок.

А іноді йому потрібні маркери.

Дуже драматичні маркери.