Заголовки та абзаци

Вітаємо на курсі "Основи HTML"! Я дуже радий супроводжувати тебе у твоїй подорожі у веброзробці. Сьогодні ми вивчимо, як організовувати текст на вебсторінці. Якщо ти колись писав есе або читав книжку, ти вже знаєш базові принципи структурування контенту.

Поїхали!

Навіщо потрібні текстові теги

Можливо, ти думаєш: Навіщо нам спеціальні теги? Чому не можна просто набрати слова прямо на екрані?

Якщо ти просто введеш слова в HTML-документі й натискатимеш "Enter", щоб зробити нові рядки, браузер проігнорує ці відступи та зіллє все в один великий, незручний для читання блок тексту. Саме тому ми використовуємо спеціальні HTML-теги.

Теги надають тексту структуру і значення, пояснюючи браузеру, яку роль виконує кожна частина тексту. Ця структура потрібна не лише для вигляду; вона дуже важлива щонайменше з двох причин:

• Пошукові системи: Теги допомагають пошуковикам (наприклад, Google) зрозуміти, про що твоя сторінка, щоб правильно її ранжувати.
• Скрінрідери: Люди з порушеннями зору часто користуються скрінрідерами - це спеціальні програми, які озвучують сторінки. Вони використовують теги як орієнтири, щоб допомогти швидко навігувати сайтом.

Абзаци (<p>)

Для звичайного основного тексту ми використовуємо тег абзацу, який записується як <p>.

Коли ти хочеш написати звичайне речення або групу пов'язаних речень, просто обгорни їх у теги абзацу. Коли браузер бачить тег <p>, він розуміє, що цей текст треба згрупувати, і автоматично додає трохи порожнього простору зверху та знизу. Такий природний відступ робить макет чистішим, а текст - легшим для читання.

Ієрархія заголовків (<h1> до <h6>)

Заголовки - це назви та підназви твоєї вебсторінки. HTML має шість рівнів заголовків: від <h1> (найвищий і найважливіший рівень) до <h6> (найнижчий і найменш важливий).

Сприймай ці заголовки як структуру газети або підручника:

• Назва книжки: Головна назва на обкладинці - це твій <h1>.
• Розділи: Основні назви розділів усередині книжки - це теги <h2>.
• Підтеми: Якщо розділ поділено на менші частини, це вже теги <h3>, і так далі.

Золоті правила семантики

Коли ми говоримо про "семантику" у веброзробці, мається на увазі просте правило: використовуй правильний тег для правильної задачі, щоб код мав чіткий зміст. Працюючи із заголовками, завжди дотримуйся таких золотих правил:

• Лише один <h1> на сторінці: Сприймай <h1> як головну назву документа. Оскільки сторінка зазвичай має одну головну тему, то й тег <h1> зазвичай повинен бути один.
• Не пропускай рівні: Заголовки мають іти в суворому послідовному порядку. Наприклад, не варто стрибати одразу з <h2> на <h4>. Пропуск рівнів створює заплутану структуру і для пошуковиків, і для скрінрідерів.
• Ніколи не використовуй заголовки лише для стилю: НІКОЛИ не став тег заголовка тільки тому, що хочеш зробити текст великим або жирним. Заголовки призначені лише для структури сторінки. Якщо потрібно змінити розмір чи товщину звичайного тексту, це завдання для CSS (Cascading Style Sheets - окрема мова, яку ми використовуємо саме для оформлення сайтів).

Зрозумілий приклад

Ось короткий і легкий для читання приклад, який показує, як поєднувати заголовки та абзаци для створення правильно структурованої вебсторінки:

<h1>Повний гід про собак</h1>
<p>Собаки - популярні домашні улюбленці в усьому світі. Вони відомі своєю відданістю та грайливим характером.</p>

<h2>Як обрати правильну породу собаки</h2>
<p>Перш ніж приводити собаку додому, важливо обрати породу, яка підходить твоєму способу життя.</p>

<h2>Базове тренування собак</h2>
<p>Тренування цуценяти потребує терпіння та послідовності. Завжди використовуй позитивне підкріплення!</p>

Підсумок

Ти впорався! Ось головні висновки цього уроку:

• Ми використовуємо текстові HTML-теги, щоб браузери, пошукові системи та скрінрідери могли правильно розуміти й відображати контент.
• Використовуй тег <p> для звичайного основного тексту та речень.
• Використовуй теги <h1> до <h6>, щоб створити логічну структуру сторінки, подібно до розділів у підручнику.
• Завжди використовуй лише один <h1> на сторінку, не пропускай рівні заголовків і ніколи не використовуй заголовки лише для того, щоб зробити текст великим або жирним.

Чудова робота сьогодні! Ти будуєш дуже міцну основу у веброзробці.