Теги для верстки структури контенту

Конспект лекції: семантичні теги, блочна модель, рядкові та блочні елементи

Тег <div> — універсальний контейнер

<div> — блочний елемент для групування вмісту. Не несе жодного семантичного значення.
Використовується, коли жоден семантичний тег не підходить, але потрібно згрупувати елементи або застосувати спільні стилі.
Якщо є більш відповідний семантичний тег (<main>, <section>, <article>, <aside>) — використовуйте його замість <div>.

Принцип: спочатку семантика, потім <div>. Не обгортайте все підряд у <div> — шукайте тег із відповідним значенням.

Іменування класів

Англійською мовою — це стандарт індустрії. Класи українською чи іншими мовами не прийнятні.
Семантичні назви — клас описує призначення елемента, а не його зовнішній вигляд.
kebab-case — слова розділяються дефісом: course-card, main-nav, article-preview.

✅ Правильно

course-card
article-preview
sidebar-widget
main-content

❌ Неправильно

red-block (колір може змінитися)
big-text (візуальний опис)
left-column (позиція може змінитися)
kartka-kursu (не англійською)

Ніколи не називайте класи за зовнішнім виглядом. Дизайн змінюється — назви залишаються. Клас red-button стане безглуздим, якщо кнопку перефарбують у синій.

Тег <main> — основний вміст

<main> позначає основний унікальний контент сторінки — те, заради чого користувач відкрив сторінку.
Має бути один на сторінку.
Не включає шапку, підвал, навігацію, бічну панель — лише основний контент.
На сторінці статті — це текст статті. На головній сторінці блогу — стрічка публікацій.

На сайті Smashing Magazine основний контент — це текст статті. Бічна панель з рекомендаціями, шапка з навігацією — все це за межами <main>.

<body>
    <header>...</header>
    <main>
        <!-- Основний контент сторінки -->
        <h1>Заголовок статті</h1>
        <p>Текст статті...</p>
    </main>
    <footer>...</footer>
</body>

Тег <aside> — супутній контент

<aside> позначає контент, пов'язаний з основним, але не є його частиною.
Може бути всередині <main> (врізка в статті, пов'язана рекламна пропозиція) або ззовні (бічна панель, sidebar).
На сторінці може бути кілька <aside>.
Ключовий критерій — зв'язок з основним контентом. Якщо блок ніяк не пов'язаний із <main>, це не <aside>.

Стаття про штучний інтелект, а поруч — рекламний блок курсу з Data Science. Він опосередковано пов'язаний зі змістом статті → <aside>.

<!-- aside всередині main -->
<main>
    <article>...</article>
    <aside>Пов'язаний курс</aside>
</main>

<!-- aside ззовні main -->
<main>...</main>
<aside>Бічна панель</aside>

Тег <section> — тематична група

<section> — тематично згрупований контент, що має заголовок.
На відміну від <article>, <section> не є самостійним — він частина більшого контексту.
Якщо вирвати <section> зі сторінки, він може втратити сенс.
<section> може містити інші <section> або <article>.

Простий орієнтир: <section> — це, по суті, <div> із заголовком і тематичним змістом. Є заголовок і група пов'язаних елементів — використовуйте <section>.

<section>
    <h2>Інші курси</h2>
    <article>Картка курсу 1</article>
    <article>Картка курсу 2</article>
    <article>Картка курсу 3</article>
</section>

Тег <article> — незалежний контент

<article> — самостійна, незалежна одиниця контенту, яку можна вирвати зі сторінки й використати окремо.
У <article> обов'язково має бути заголовок.
Типові приклади: картка товару, новина в стрічці, пост у блозі, коментар.
<article> не може містити інший <article>.

<article>

Незалежний від контексту
Можна перенести в інше місце
Обов'язковий заголовок
Не вкладається сам у себе

<section>

Частина більшого контексту
При винесенні може втратити сенс
Заголовок бажаний
Може вкладатися сам у себе

Пріоритет семантичних тегів

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

<main> — виділіть основний контент сторінки.
<aside> — знайдіть блоки, пов'язані з основним контентом.
<article> — визначте незалежні самодостатні елементи.
<section> — згрупуйте тематичні блоки із заголовками.
<div> — все, що не підійшло під семантичні теги.

Не потрібно «страждати семантикою» і засовувати семантичні теги всюди. Основне призначення — дати загальне уявлення про структуру сторінки пошуковим системам та скрінрідерам.

Приклад розмітки сторінки

Уявімо сторінку новинного сайту зі статтею та рекомендаціями:

<body>
    <header>Шапка сайту</header>

    <main>
        <!-- Стаття — основний контент -->
        <section>
            <h1>Заголовок статті</h1>
            <p>Перша частина тексту...</p>
        </section>
        <section>
            <h2>Другий розділ</h2>
            <p>Друга частина тексту...</p>
        </section>

        <!-- Пов'язана пропозиція -->
        <aside>Спецкурс із теми статті</aside>
    </main>

    <!-- Блок рекомендованих курсів -->
    <section>
        <h2>Інші курси</h2>
        <article>Картка курсу 1</article>
        <article>Картка курсу 2</article>
    </section>

    <footer>Підвал сайту</footer>
</body>

Вивчайте розмітку якісних сайтів (наприклад, Smashing Magazine) через інспектор браузера — це допоможе розвинути «професійний погляд» на структуру сторінки.

Блочна модель (Box Model)

Кожен елемент на сторінці — це прямокутник (бокс). Браузер будує розкладку, спираючись на розміри цих боксів.

Складові елемента

Контентна область (content) — область, де розміщується текст або дочірні елементи.
Внутрішні відступи (padding) — простір між контентом і межею.
Межа (border) — видима рамка елемента.

Елемент = content + padding + border

Що таке бокс?

Бокс = елемент + зовнішні відступи (margin). Саме боксами елементи «бачать» одне одного і взаємодіють на сторінці.

margin

border

padding

content

Формули розрахунку

Ширина елемента = width + padding-left + padding-right + border-left + border-right
Висота елемента = height + padding-top + padding-bottom + border-top + border-bottom
Ширина боксу = ширина елемента + margin-left + margin-right

Якщо сума ширин дочірніх елементів перевищує ширину батьківського — елементи переносяться на новий рядок. Навіть 1 зайвий піксель спричинить перенос.

Властивість box-sizing

box-sizing змінює, на що саме впливають властивості width і height.

Значення	`width` задає	Розрахунок
`content-box` (за замовчуванням)	ширину контентної області	Загальна ширина = width + padding + border
`border-box`	ширину всього елемента	Браузер автоматично зменшить контентну область

Задано width: 300px і padding: 50px.
При content-box: загальна ширина = 300 + 50 + 50 = 400px.
При border-box: загальна ширина = 300px (контент автоматично = 200px).

box-sizing не впливає на margin — це властивість боксу, а не елемента. box-sizing змінює лише поведінку width та height.

box-sizing не успадковується. Його потрібно задавати кожному елементу окремо (або через універсальний селектор *).

Рядкові та блочні елементи

Властивість display визначає, як елемент поводиться на сторінці.

display: inline (рядкові)

Поводяться як слова в реченні — вишиковуються одне за одним у рядок.
Не застосовується блочна модель: width, height, вертикальні margin — не працюють.
padding відображається, але не взаємодіє з сусідніми елементами (налізає на текст).
Розмір визначається лише внутрішнім вмістом.

Приклади: <a>, <span>, <strong>, <em>, <time>.

display: block (блочні)

Займають всю ширину контентної області батька за замовчуванням.
Застосовується повна блочна модель: width, height, margin, padding, border.
Кожен блочний елемент починається з нового рядка.

Приклади: <div>, <h1>–<h6>, <ul>, <ol>, <li>, <section>, <article>.

Особливий випадок: <p>

Тег <p> має рядковий контекст форматування (всередині — тільки рядкові елементи), але до нього застосовується блочна модель (width, margin, padding працюють).

Як перевірити тип елемента: якщо елемент за замовчуванням займає всю ширину — він блочний. Якщо його ширина дорівнює вмісту — рядковий. Або відкрийте довідник на MDN.

Зміна типу елемента

Рядковий елемент можна зробити блочним (і навпаки) через display:

/* Зробити посилання блочною */
a {
    display: block;
    width: 375px;
    margin-top: 20px;
}

Після display: block посилання:

Займає всю ширину батька (або задану width).
Реагує на margin-top, padding.
Починається з нового рядка.

Вирівнювання тексту: text-align

text-align вирівнює рядковий вміст всередині блочного елемента.
Застосовується до батьківського блочного елемента, а не до самого тексту.
Не працює для рядкових елементів (інлайнових) — вони вже частина рядка.

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

text-align:
center

обгортці.

<div class="action">
    <a href="#">Читати далі</a>
</div>

<!-- CSS -->
.action { text-align: center; }

Центрування блочного елемента

Щоб відцентрувати блочний елемент горизонтально, потрібні дві умови:

Елементу задано явну ширину (width).
Задано автоматичні бокові margin.

.news {
    width: 485px;
    margin-left: auto;
    margin-right: auto;
}

Браузер автоматично розподілить вільний простір порівну між лівим і правим margin.

Якщо ширина не задана — блочний елемент і так займає всю ширину батька, і центрування не має сенсу.

Не використовуйте скорочення margin: auto — воно перезапише вертикальні відступи. Задавайте margin-left: auto і margin-right: auto окремо.

Один auto-margin

margin-left: auto — притискає елемент вправо.
margin-right: auto — нічого не змінює (елемент і так ліворуч).
Обидва auto — елемент по центру.

Вертикальні auto-margin (margin-top: auto, margin-bottom: auto) не працюють для центрування в нормальному потоці.

Успадкування властивостей

Текстові властивості успадковуються: font-family, font-size, color, line-height, text-align тощо.
Задайте їх на body — і всі дочірні елементи отримають ці значення.
Властивості блочної моделі НЕ успадковуються: margin, padding, border, width, height, box-sizing.

body {
    font-family: "Segoe UI", sans-serif;
    color: #333;
    line-height: 1.6;
    /* Усі дочірні елементи успадкують ці значення */
}

Підсумок

Тема	Ключове
`<div>`	Універсальний контейнер без семантики
`<main>`	Основний контент, один на сторінку
`<aside>`	Супутній контент, пов'язаний з основним
`<article>`	Незалежний контент із заголовком
`<section>`	Тематична група із заголовком
Box Model	content + padding + border = елемент; + margin = бокс
`box-sizing`	`content-box`: width → контент; `border-box`: width → весь елемент
Рядкові vs Блочні	Inline: без блочної моделі; Block: повна блочна модель
Центрування блока	`width` + `margin-left/right: auto`
Успадкування	Текстові — так; блочна модель — ні