👋 Привіт! У цьому матеріалі зібрав поширені особливості застосування блокових HTML-елементів у сучасній верстці сайтів.
- 🧱 Основні блокові елементи сторінки сайту
- 📏 Особливості роботи та застосування
- 🔢 Займана ширина та поведінка у потоці
- 📐 Сучасна блокова модель (Box Model)
- ↕️ Динамічна висота та сучасний Overflow
- ↩️ Потік документа та скасування inline-властивостей
- ⚡ Сучасний контекст (Flexbox, Grid та Container Queries)
🧱 Основні блокові елементи сторінки сайту
Блокові елементи формують структурний "скелет" веб-сторінки. Окрім класичних тегів, у сучасному веб-розробленні активно використовуються семантичні блокові теги HTML5 та новіші специфікації, які допомагають SEO, покращують доступність (a11y) та спрощують підтримку коду.
| HTML-тег | Значення |
|---|---|
<address> | контактна інформація автора чи власника ресурсу |
<article> | самостійний, автономний блок контенту (стаття, пост у блозі, картка товару) |
<aside> | бічна панель або додатковий контент, опосередковано пов'язаний із основним |
<blockquote> | цитата з розгортанням у окремий блок |
<div> | універсальний несемантичний контейнер для стилізації або групування |
<fieldset> | групування логічних елементів форми разом із тегом <legend> |
<form> | інтерактивна форма для збору та відправки даних |
<footer> | нижня частина (підвал) сайту, секції або картки |
<header> | шапка сайту або вступний розділ конкретного блоку |
<hr> | тематичний розрив вмісту (візуально відображається як горизонтальна лінія) |
<h1>-<h6> | заголовки різних рівнів ієрархії |
<main> | головний, унікальний контент сторінки (може бути лише один на сторінці в межах DOM) |
<menu> | список команд або інтерактивних елементів управління |
<nav> | блок основної навігації по сайту |
<ol> | впорядкований (нумерований) список |
<p> | текстовий абзац (параграф) |
<pre> | блок попередньо відформатованого тексту (зберігає всі пробіли та переноси) |
<section> | автономний тематичний розділ документа (зазвичай містить свій заголовок) |
<table> | табличні дані |
<ul> | невпорядкований (маркований) список |
📏 Особливості роботи та застосування
🔢 Займана ширина та поведінка у потоці
Блокові теги за замовчуванням мають властивість display: block і займають 100% доступної ширини свого батьківського контейнера. Їх можна уявити як стопку коробок, що складаються одна на одну вертикально.
- Якщо елемент лежить безпосередньо в
<body>, він займає всю ширину вікна перегляду (viewport). - Якщо блоковий елемент розміщений усередині іншого блоку, його ширина обмежується контентною областю батька.
📐 Сучасна блокова модель (Box Model)
Повна підсумкова ширина елемента складається з кількох компонентів: width, padding, border та margin.
- Класичний розрахунок (
box-sizing: content-box). Властивістьwidthвизначає лише ширину контенту. Якщо додатиpadding: 20pxтаborder: 2px, реальний блок стане ширшим на44px, що нерідко ламає сітку. - Сучасний стандарт (
box-sizing: border-box). У сучасній верстці це правило зазвичай застосовують через глобальне очищення стилів CSS (CSS Reset) для всіх елементів* { box-sizing: border-box; }. При цьому значенняwidthвже включає в себеpaddingiborder, роблячи верстку максимально прогнозованою.
↕️ Динамічна висота та сучасний Overflow
- Висота блоку (
height) автоматично розраховується браузером на основі його вмісту та змінюється динамічно при масштабуванні чи зміні шрифтів. - Якщо встановити точну висоту через
heightабоmax-height, і вміст переповнить блок, контент почне "випадати" назовні. Для керування цим використовуються властивостіoverflow: auto,overflow: hiddenабоoverflow: clip.
↩️ Потік документа та скасування inline-властивостей
Блоковий елемент завжди починається з нового рядка та змушує наступний елемент переходити на новий рядок. Через це на блокові елементи не діють властивості, розраховані суто на рядкові (inline) елементи — наприклад, vertical-align (за винятком випадків, коли блок переведено в display: table-cell або inline-block).
⚡ Сучасний контекст (Flexbox, Grid та Container Queries)
Хоча базово блокові елементи розміщуються вертикально один під одним, їхню поведінку в сучасній верстці легко контролювати:
- Встановлення батьківському блоку
display: flexабоdisplay: gridперетворює його дочірні блокові елементи на flex- або grid-ітеми, дозволяючи будувати гнучкі багатоколонкові макети без використання застарілихfloatчиdisplay: inline-block. - Сучасні веб-стандарти також підтримують Container Queries (
container-type: inline-size), що дозволяє блоковим елементам змінювати свої стилі залежно від розміру свого батьківського блоку, а не лише від розміру екрана пристрою.
