Тег <div> — універсальний контейнер
<div> — блочний елемент для групування вмісту. Не несе жодного семантичного значення.- Використовується, коли жоден семантичний тег не підходить, але потрібно згрупувати елементи або застосувати спільні стилі.
- Якщо є більш відповідний семантичний тег (
<main>, <section>, <article>, <aside>) — використовуйте його замість <div>.
Принцип: спочатку семантика, потім <div>. Не обгортайте все підряд у <div> — шукайте тег із відповідним значенням.
Іменування класів
- Англійською мовою — це стандарт індустрії. Класи українською чи іншими мовами не прийнятні.
- Семантичні назви — клас описує призначення елемента, а не його зовнішній вигляд.
- kebab-case — слова розділяються дефісом:
course-card, main-nav, article-preview.
✅ Правильно
course-cardarticle-previewsidebar-widgetmain-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). Саме боксами елементи «бачать» одне одного і взаємодіють на сторінці.
Формули розрахунку
- Ширина елемента = 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 |
| Успадкування |
Текстові — так; блочна модель — ні |
