Пошук уроків, статей та іншого контенту
Пояснює, як позначати додатковий або бічний вміст сторінки елементом aside.
<aside>Елемент <aside> позначає додатковий вміст, який пов’язаний з основним вмістом сторінки, але не є його центральною частиною.
Найчастіше в <aside> розміщують:
бічну панель;
список пов’язаних статей;
коротку довідку;
блок із корисними посиланнями;
рекламу;
інформацію про автора;
примітку або додаткове пояснення.
Назва елемента походить від англійського слова aside — «убік», «додатково».
<aside>
<h2>Пов’язані матеріали</h2>
<ul>
<li><a href="/html">Вступ до HTML</a></li>
<li><a href="/css">Вступ до CSS</a></li>
</ul>
</aside>Елемент <aside> є семантичним. Це означає, що він описує призначення вмісту, а не його зовнішній вигляд.
Сам по собі <aside> не обов’язково розташовується збоку. Щоб розмістити його праворуч або ліворуч, потрібно використати CSS.
<aside> всередині статтіДодатковий вміст може стосуватися всієї сторінки або лише окремої статті.
Наприклад, у статті про HTML можна додати примітку про семантичні елементи:
<article>
<h1>Що таке HTML?</h1>
<p>
HTML використовують для створення структури вебсторінок.
</p>
<aside>
<h2>Корисно знати</h2>
<p>
HTML відповідає за структуру сторінки, а CSS — за її оформлення.
</p>
</aside>
<p>
Документ HTML складається з елементів, які описують його вміст.
</p>
</article>У цьому прикладі примітка стосується саме статті. Вона не є основним текстом, але допомагає краще зрозуміти тему.
<aside> для бічної панелі сторінки<aside> часто використовують як бічну панель поруч з основним вмістом:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сторінка зі статтею</title>
<style>
.page {
display: flex;
gap: 24px;
max-width: 900px;
margin: 0 auto;
padding: 24px;
}
main {
flex: 1;
}
aside {
width: 240px;
padding: 16px;
background-color: #f1f5f9;
border-radius: 8px;
}
aside ul {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="page">
<main>
<h1>Як працює вебсторінка</h1>
<p>
Вебсторінка складається з HTML-структури та CSS-стилів.
</p>
<p>
HTML визначає заголовки, абзаци, списки та інші частини документа.
</p>
</main>
<aside>
<h2>На цій сторінці</h2>
<ul>
<li>HTML-структура</li>
<li>CSS-стилі</li>
<li>Семантичні елементи</li>
</ul>
</aside>
</div>
</body>
</html>У цьому прикладі:
<main> містить основний вміст сторінки;
<aside> містить додаткову навігацію;
CSS розташовує ці елементи поруч;
властивість flex визначає гнучку ширину основного вмісту.
Важливо: бічне розташування не є обов’язковою умовою для використання <aside>. На вузьких екранах бічна панель може розташовуватися під основним вмістом.
<aside>Використовуйте <aside>, якщо вміст:
є додатковим;
пов’язаний з основним вмістом;
може бути зрозумілим окремо від головного тексту;
не є головною частиною сторінки.
Приклади:
<aside>
<h2>Про автора</h2>
<p>Автор навчальних матеріалів про веброзробку.</p>
</aside><aside>
<h2>Термін дня</h2>
<p><strong>Браузер</strong> — програма для перегляду вебсторінок.</p>
</aside><aside>
<h2>Пов’язані статті</h2>
<ul>
<li><a href="/article-1">Що таке HTML</a></li>
<li><a href="/article-2">Що таке CSS</a></li>
</ul>
</aside>Якщо <aside> містить окремий інформаційний блок, часто варто додати до нього заголовок:
<aside>
<h2>Додаткова інформація</h2>
<p>Цей блок містить пояснення до основного матеріалу.</p>
</aside>Заголовок допомагає користувачам зрозуміти призначення блоку. Він також важливий для доступності, оскільки допоміжні технології можуть використовувати заголовки для навігації сторінкою.
Рівень заголовка обирають відповідно до структури документа. Для самостійного блоку на сторінці часто використовують <h2>.
<aside> і <div><div> — це універсальний контейнер без конкретного семантичного значення.
<div class="sidebar">
<h2>Пов’язані статті</h2>
</div>Такий код може бути правильним з погляду відображення, але він не пояснює призначення блоку.
Якщо контейнер містить додаткову інформацію, краще використати <aside>:
<aside class="sidebar">
<h2>Пов’язані статті</h2>
</aside>Клас sidebar можна додати для CSS, а <aside> — для семантики. Ці два підходи не суперечать один одному.
<aside> і <main>Елемент <main> містить головний, унікальний вміст сторінки. Елемент <aside> містить додатковий вміст.
<main>
<h1>Основна стаття</h1>
<p>Це головний текст сторінки.</p>
</main>
<aside>
<h2>Читайте також</h2>
<p>Це додаткова інформація.</p>
</aside>Якщо без певного блоку сторінка втрачає свій основний зміст, цей блок, імовірно, має бути в <main, а не в <aside>.
<aside>Не використовуйте <aside> лише тому, що елемент має вигляд бічної панелі.
Наприклад, основна форма оформлення замовлення не є додатковим вмістом, навіть якщо її візуально розташовано збоку:
<main>
<h1>Оформлення замовлення</h1>
<form>
<label>
Ім’я
<input type="text" name="name">
</label>
<button type="submit">Підтвердити замовлення</button>
</form>
</main>Ця форма є частиною головного завдання сторінки, тому її не потрібно переносити в <aside>.
<aside> для будь-якого блоку збокуПозиція елемента на сторінці не визначає його семантику.
Неправильно вважати, що будь-який блок праворуч автоматично має бути <aside>. Спочатку потрібно визначити роль його вмісту.
<aside> замість <main>Якщо блок містить основний текст сторінки, він не має бути <aside>.
<!-- Неправильно -->
<aside>
<h1>Основна стаття</h1>
<p>Головний текст сторінки.</p>
</aside>Краще:
<main>
<h1>Основна стаття</h1>
<p>Головний текст сторінки.</p>
</main><aside> призначений для пов’язаного додаткового вмісту. Не варто використовувати його для випадкових елементів, які не стосуються сторінки або статті.
HTML-елемент <aside> не створює бічну панель автоматично. Для розташування, відступів, кольорів та ширини потрібен CSS.
<aside> позначає додатковий або пов’язаний із основним вміст.
Він може містити бічну панель, примітку, пов’язані матеріали чи інформацію про автора.
<aside> можна розміщувати на рівні всієї сторінки або всередині <article>.
Бічне розташування задається CSS, а не HTML.
Для стилізації можна одночасно використовувати <aside> і атрибут class.
Основний вміст сторінки потрібно розміщувати в <main>, а не в <aside>.
Заголовок усередині <aside> допомагає зрозуміти призначення додаткового блоку.