Пошук уроків, статей та іншого контенту
Вчить розмічати самодостатні матеріали, які можна поширювати або повторно використовувати, через article.
article<article> — семантичний HTML-елемент для самодостатнього матеріалу. Це частина сторінки, яку можна:
прочитати окремо від іншого вмісту;
поширити або повторно використати;
показати в стрічці новин, пошуку чи добірці;
зберегти як окремий запис.
Типові приклади:
стаття в блозі;
новина;
допис у соціальній мережі;
відгук користувача;
коментар;
картка товару;
публікація на форумі.
Назва article не означає лише «велика стаття». Головна ознака — самодостатність вмісту.
Усередині article зазвичай розміщують заголовок і основний матеріал:
<article>
<h2>Як виростити базилік на підвіконні</h2>
<p>
Базилік добре росте на сонячному підвіконні та потребує регулярного поливу.
</p>
</article>Цей матеріал має власну тему й залишається зрозумілим, навіть якщо його видалити з батьківської сторінки.
Заголовок допомагає користувачам і допоміжним технологіям зрозуміти призначення матеріалу. Для самостійного article зазвичай додають один із заголовків: h1, h2, h3 тощо — залежно від структури всієї сторінки.
На сторінці блогу кожен окремий допис можна розмітити власним article:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Новини технологій</title>
<style>
body {
max-width: 700px;
margin: 0 auto;
padding: 24px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
article {
margin-bottom: 24px;
padding: 20px;
border: 1px solid #d0d7de;
border-radius: 8px;
}
article h2 {
margin-top: 0;
}
time {
color: #667085;
font-size: 0.9rem;
}
</style>
</head>
<body>
<main>
<h1>Новини технологій</h1>
<article>
<h2>Вийшла нова версія браузера</h2>
<time datetime="2026-07-20">20 липня 2026 року</time>
<p>
Нова версія браузера отримала покращену підтримку сучасних стандартів CSS.
</p>
</article>
<article>
<h2>Як працює семантична розмітка</h2>
<time datetime="2026-07-18">18 липня 2026 року</time>
<p>
Семантичні HTML-елементи допомагають описати призначення частин сторінки.
</p>
</article>
</main>
</body>
</html>Кожен article у цьому прикладі є окремою новиною. Його можна було б показати в іншому списку новин без втрати основного змісту.
article і заголовок матеріалуМатеріал часто містить:
заголовок;
дату публікації;
автора;
основний текст;
зображення;
додаткову інформацію.
Наприклад:
<article>
<h2>Поради для вивчення HTML</h2>
<p>
<strong>Автор:</strong> Олена Коваль
</p>
<p>
Починайте з базової структури документа, а потім поступово додавайте
семантичні елементи.
</p>
</article>Усі ці частини належать одному самодостатньому матеріалу, тому їх логічно об’єднати в article.
articleОдин матеріал може містити інші самодостатні матеріали. Наприклад, стаття може мати коментарі. Основна стаття є зовнішнім article, а кожен коментар — вкладеним:
<article>
<h1>Що таке семантичний HTML</h1>
<p>
Семантичний HTML описує призначення вмісту за допомогою відповідних елементів.
</p>
<section>
<h2>Коментарі</h2>
<article>
<h3>Марія</h3>
<p>Дуже зрозуміле пояснення.</p>
</article>
<article>
<h3>Андрій</h3>
<p>Тепер я краще розумію різницю між елементами.</p>
</article>
</section>
</article>Кожен коментар можна розглядати як окремий матеріал, який має власного автора й текст.
article відрізняється від звичайного контейнераЕлемент <div> не має спеціального змістового значення. Він використовується як універсальний контейнер, наприклад для стилізації або групування елементів.
Елемент <article> повідомляє браузеру та допоміжним технологіям, що всередині розташовано окремий матеріал.
<!-- Універсальне групування без конкретного змістового значення -->
<div class="card">
<h2>Новина</h2>
<p>Текст новини.</p>
</div>
<!-- Самодостатня новина -->
<article>
<h2>Новина</h2>
<p>Текст новини.</p>
</article>Якщо блок можна уявити як окремий запис, допис або матеріал, для нього може підходити article. Якщо блок потрібен лише для оформлення чи технічного групування, зазвичай достатньо div.
articleНе кожен блок із текстом має бути article.
Не варто використовувати його для:
окремого декоративного контейнера;
оболонки навколо всього вмісту сторінки;
частини матеріалу, яка не має самостійного сенсу;
звичайного блоку, створеного лише для CSS.
Наприклад, це не обов’язково article:
<div class="button-group">
<button type="button">Зберегти</button>
<button type="button">Скасувати</button>
</div>Цей контейнер лише групує кнопки й не є самостійним матеріалом.
article та section<article> використовують для самодостатнього матеріалу.
<section> використовують для тематичного розділу сторінки або матеріалу. Розділ не обов’язково можна поширити окремо.
<article>
<h1>Посібник із догляду за рослинами</h1>
<section>
<h2>Полив</h2>
<p>Поливайте рослину, коли верхній шар ґрунту висохне.</p>
</section>
<section>
<h2>Освітлення</h2>
<p>Поставте рослину в місце з достатньою кількістю світла.</p>
</section>
</article>У цьому прикладі весь посібник є самодостатнім article, а «Полив» і «Освітлення» — його тематичні розділи.
Під час використання article дотримуйтеся таких правил:
Використовуйте article для матеріалу, який має окремий зміст.
Додавайте заголовок, якщо матеріал має назву.
Розміщуйте всередині весь вміст, що належить цьому матеріалу.
Для списку дописів створюйте окремий article для кожного допису.
Не використовуйте article лише тому, що блок має рамку або фон.
Не замінюйте article на div, якщо самостійність матеріалу важлива для структури сторінки.
article для кожного контейнера<article class="page-wrapper">
<article class="content">
<p>Текст сторінки.</p>
</article>
</article>Не кожна оболонка є матеріалом. Для технічних контейнерів доречніше використати div, а article залишити для самодостатнього вмісту.
<article></article>Порожній article не має користі. Усередині має бути самостійний матеріал, бажано з відповідним заголовком.
article<article>
<h1>Новини</h1>
<h2>Перша новина</h2>
<p>...</p>
<h2>Друга новина</h2>
<p>...</p>
</article>Якщо новини є окремими записами, кожну з них краще розмітити власним article, а заголовок сторінки залишити поза ними.
article лише для візуального оформленняСемантичний елемент обирають за змістом, а не за виглядом. Рамку, відступи чи фон можна додати CSS до будь-якого елемента, але це не робить його самодостатнім матеріалом.
<article> позначає самодостатній матеріал.
Матеріал можна поширити, повторно використати або показати окремо.
Типові приклади — новини, дописи, статті, коментарі та відгуки.
Кожен окремий допис у списку зазвичай має власний article.
Заголовок допомагає зрозуміти тему матеріалу.
article не слід використовувати лише як стилістичний контейнер.
Для технічного групування без семантичного значення підходить div.