Пошук уроків, статей та іншого контенту
Пояснює, як семантичні елементи описують структуру документа та чому вони кращі за безіменні div.
Семантичний HTML — це використання HTML-елементів відповідно до їхнього змісту та призначення.
Наприклад:
<nav> описує навігацію;
<main> містить основний вміст сторінки;
<article> описує самостійну публікацію;
<footer> містить нижню частину сторінки;
<button> описує кнопку.
Семантичний елемент не лише визначає, як виглядає сторінка. Він пояснює браузеру, пошуковим системам і допоміжним технологіям, яку роль виконує певна частина документа.
div<div> — універсальний контейнер без власного змістового значення. Він групує елементи, але не пояснює, що саме міститься всередині.
<div class="header">
<div class="navigation">
<a href="/">Головна</a>
<a href="/about">Про нас</a>
</div>
</div>
<div class="content">
<div class="article">
<h1>Як вивчати HTML</h1>
<p>HTML описує структуру вебсторінки.</p>
</div>
</div>
<div class="footer">
<p>© 2026</p>
</div>Людина, яка читає цей код, може здогадатися про його структуру за назвами класів. Але самі елементи <div> не повідомляють браузеру, що один блок є заголовком сторінки, інший — навігацією, а ще один — статтею.
Той самий документ можна описати семантично.
<header>
<nav>
<a href="/">Головна</a>
<a href="/about">Про нас</a>
</nav>
</header>
<main>
<article>
<h1>Як вивчати HTML</h1>
<p>HTML описує структуру вебсторінки.</p>
</article>
</main>
<footer>
<p>© 2026</p>
</footer>У другому прикладі структура документа зрозуміла навіть без назв класів.
<header><header> позначає вступну частину сторінки або окремого розділу.
У ньому часто розміщують:
логотип;
назву сайту;
основну навігацію;
заголовок розділу;
короткий опис.
<header> може бути не лише один на сторінці. Наприклад, окремий <article> також може мати власний заголовок.
<header>
<a href="/">Мій блог</a>
<nav>
<a href="/articles">Статті</a>
<a href="/contacts">Контакти</a>
</nav>
</header><nav><nav> містить основний набір навігаційних посилань.
<nav>
<a href="/">Головна</a>
<a href="/courses">Курси</a>
<a href="/about">Про платформу</a>
</nav>Не кожну групу посилань потрібно обов’язково обгортати в <nav>. Цей елемент призначений саме для важливих блоків навігації, наприклад головного меню або меню розділу.
<main><main> містить головний унікальний вміст сторінки.
На сторінці зазвичай має бути один основний елемент <main>. У ньому розміщують вміст, заради якого користувач відкрив сторінку.
<main>
<h1>Курс HTML та CSS</h1>
<p>На цьому курсі ви вивчите основи створення вебсторінок.</p>
</main>Повторювані на різних сторінках блоки, наприклад головне меню або нижній колонтитул, зазвичай не належать до <main>.
<section><section> описує тематичний розділ документа.
Розділ зазвичай має заголовок:
<section>
<h2>Що ви вивчите</h2>
<p>Ви навчитеся створювати структуровані HTML-документи.</p>
</section>Використовуйте <section>, коли частина документа має окрему тему. Якщо потрібен лише технічний контейнер для стилів або розкладки, доречнішим буде <div>.
<article><article> описує самостійний фрагмент вмісту. Його можна було б прочитати або використати окремо від решти сторінки.
Приклади:
стаття в блозі;
новина;
допис користувача;
картка товару;
коментар;
публікація на форумі.
<article>
<h2>Що таке HTML?</h2>
<p>HTML — це мова розмітки для опису структури вебсторінок.</p>
</article>Кілька статей можна розмістити в одному розділі:
<section>
<h2>Останні статті</h2>
<article>
<h3>Знайомство з HTML</h3>
<p>Почнемо з основ структури документа.</p>
</article>
<article>
<h3>Заголовки та абзаци</h3>
<p>Навчимося правильно організовувати текст.</p>
</article>
</section><aside><aside> містить додатковий вміст, пов’язаний з основним, але не обов’язковий для його розуміння.
Наприклад:
бічна панель;
список популярних статей;
рекламний блок;
коротка довідка;
пов’язані матеріали.
<aside>
<h2>Корисна довідка</h2>
<p>Семантичні елементи допомагають описати роль частин документа.</p>
</aside><footer><footer> позначає нижню частину сторінки або окремого розділу.
У ньому можуть бути:
інформація про авторські права;
контактні дані;
додаткові посилання;
інформація про автора статті.
<footer>
<p>© 2026 Навчальна платформа</p>
</footer>Як і <header>, елемент <footer> може належати як усій сторінці, так і окремій статті.
Семантична розмітка стосується не лише великих блоків. Важливо правильно використовувати елементи для тексту.
HTML має шість рівнів заголовків: від <h1> до <h6>.
<h1>Основи веброзробки</h1>
<h2>HTML</h2>
<h3>Семантичні елементи</h3>
<h2>CSS</h2>
<h3>Селектори</h3><h1> зазвичай описує головну тему сторінки. Нижчі рівні використовують для підрозділів.
Не варто обирати рівень заголовка лише через його розмір. Вигляд заголовків змінюють за допомогою CSS, а рівень визначає структуру документа.
Для звичайного абзацу використовуйте <p>:
<p>
Семантична розмітка робить структуру сторінки зрозумілішою.
</p>Не слід використовувати <div> або <br> замість абзацу.
Посилання <a> веде на іншу адресу або частину документа:
<a href="/profile">Відкрити профіль</a>Кнопка <button> виконує дію на поточній сторінці:
<button type="button">Показати більше</button>Ці елементи можуть виглядати однаково після стилізації, але мають різний зміст і поведінку. Для переходу використовують <a>, а для дії — <button>.
Програми читання з екрана та інші допоміжні технології можуть використовувати семантичну структуру сторінки.
Користувач може швидко перейти до:
головного вмісту;
навігації;
заголовків;
статей;
додаткових розділів.
Якщо всю сторінку побудовано з безіменних <div>, допоміжній технології складніше визначити роль кожного блоку.
Семантичні елементи допомагають розробникам швидше зрозуміти структуру документа:
<main>
<article>
<h1>Історія HTML</h1>
<p>...</p>
</article>
<aside>
<h2>Пов’язані матеріали</h2>
</aside>
</main>Такий код легше читати й підтримувати, ніж набір однакових <div> із різними назвами класів.
Семантика допомагає пошуковим системам краще розуміти призначення частин сторінки. Це не гарантує певної позиції в результатах пошуку, але робить структуру документа чіткішою.
Коли структура описана правильними елементами, простіше:
змінювати дизайн;
знаходити потрібний блок;
додавати нові розділи;
пояснювати код іншим розробникам.
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блог про веброзробку</title>
</head>
<body>
<header>
<a href="/">Блог про веброзробку</a>
<nav aria-label="Основна навігація">
<a href="/">Головна</a>
<a href="/articles">Статті</a>
<a href="/about">Про блог</a>
</nav>
</header>
<main>
<section>
<h1>Останні статті</h1>
<article>
<header>
<h2>Що таке Semantic HTML</h2>
<p>Опубліковано 29 липня 2026 року</p>
</header>
<p>
Семантичний HTML описує зміст і структуру частин вебсторінки.
</p>
<footer>
<p>Автор: Олена</p>
</footer>
</article>
<article>
<h2>Перші кроки в CSS</h2>
<p>
CSS відповідає за зовнішній вигляд HTML-документа.
</p>
</article>
</section>
<aside>
<h2>Популярні теми</h2>
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Блог про веброзробку</p>
</footer>
</body>
</html>У цьому прикладі:
<header> містить назву блогу та навігацію;
<nav> містить основні посилання;
<main> містить головний вміст сторінки;
<section> об’єднує список останніх статей;
кожен <article> є окремою публікацією;
<aside> містить додаткову інформацію;
<footer> завершує сторінку;
вкладений <header> містить заголовок і дату окремої статті;
вкладений <footer> містить інформацію про автора статті.
<div><div> не є неправильним елементом. Він потрібен, коли:
для групи немає відповідного семантичного елемента;
контейнер використовується лише для CSS-стилів;
елементи потрібно об’єднати для роботи з розкладкою;
група не має окремого змістового призначення.
<div class="cards">
<article class="card">
<h2>HTML</h2>
<p>Мова розмітки документів.</p>
</article>
<article class="card">
<h2>CSS</h2>
<p>Мова стилів для вебсторінок.</p>
</article>
</div>У цьому прикладі <div class="cards"> є контейнером для стилізації та розкладки. Для нього не обов’язково існує окремий семантичний елемент.
Головне правило:
Спочатку обирайте елемент за змістом, а не за зовнішнім виглядом. Якщо відповідного семантичного елемента немає, використовуйте
<div>.
<div> для всієї сторінки<div class="header">...</div>
<div class="main">...</div>
<div class="footer">...</div>Якщо блоки справді є шапкою, основним вмістом і нижньою частиною сторінки, краще використати відповідні семантичні елементи.
<h1>Маленький підпис</h1>Розмір тексту не визначає рівень заголовка. Обирайте <h1>–<h6> за структурою документа, а вигляд змінюйте через CSS.
<h1>Веброзробка</h1>
<h4>HTML</h4>Якщо HTML є підрозділом Веброзробка, логічніше використати <h2>. Заголовки мають відображати ієрархію змісту.
<section> для будь-якого контейнера<section> — це тематичний розділ, а не універсальна заміна <div>. Якщо блок не має власної теми або заголовка, для нього може бути достатньо <div>.
<a> замість <button><a href="#" onclick="showMessage()">Показати повідомлення</a>Якщо елемент виконує дію, а не переходить на іншу адресу, використовуйте <button>:
<button type="button" onclick="showMessage()">
Показати повідомлення
</button>Семантичний HTML описує зміст і роль частин документа.
<header>, <nav>, <main>, <section>, <article>, <aside> і <footer> допомагають будувати зрозумілу структуру.
Семантична розмітка покращує доступність, читабельність і підтримку коду.
Заголовки потрібно обирати за ієрархією змісту, а не за розміром тексту.
<a> використовують для переходів, а <button> — для дій.
<div> доречний для нейтральних контейнерів без окремого семантичного значення.
Семантичний HTML не замінює CSS, а описує структуру, яку CSS може стилізувати.