3.1 Тег <main>
HTML5 додав купу нових семантичних елементів, які допомагають розробникам створювати більш структуровані і зрозумілі веб-сторінки. Серед них особливе місце займають теги <main> і <aside>, які використовуються для створення контейнерів для основного та додаткового контенту відповідно.
Тег <main> позначає основний вміст документа. Він використовується для розміщення унікального і ключового для цієї сторінки контенту. Контент, який знаходиться всередині тега <main>, має бути унікальним для кожної сторінки і не містити елементи, які повторюються на всіх сторінках, такі як логотипи, бокові панелі, навігаційні посилання або футери.
Синтаксис:
<main>
<!-- Основний вміст сторінки -->
</main>
Приклад використання:
<body>
<header>
<h1>Заголовок сайту</h1>
<nav>
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#about">Про нас</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Заголовок статті</h2>
<p>Це основний вміст статті.</p>
</article>
</main>
<footer>
<p>© 2024 Приклад сайту</p>
</footer>
</body>
Основні особливості:
- Вміст: тег
<main>має містити основний контент сторінки, який унікальний для цієї сторінки. - Розташування: на сторінці має бути лише один тег
<main>. - Доступність: тег
<main>покращує доступність сторінки, допомагаючи допоміжним технологіям (таким як програми екранного зчитування) швидше знаходити основний контент.
Застосування:
- Основний контент сторінки
- Унікальний контент, пов’язаний із поточною сторінкою
Переваги:
- Семантична розмітка: допомагає пошуковим системам і допоміжним технологіям зрозуміти, що є основним контентом сторінки
- Покращення структури сторінки: чітко відокремлює основний контент від інших частин сторінки, таких як заголовки, бокові панелі і футери
Особливості:
- Має містити унікальний для сторінки контент
- Не повинен включати елементи, які повторюються на інших сторінках (наприклад, навігаційні панелі, бокові панелі, футери)
3.2 Тег <aside>
Тег <aside> використовується для позначення додаткового вмісту, який пов'язаний із основним, але не є частиною основного потоку документа. Зазвичай він використовується для бокових панелей, які містять рекламу, посилання на пов’язані статті, біографії авторів і інші допоміжні елементи.
Синтаксис:
<aside>
<!-- Додатковий вміст -->
</aside>
Приклад використання:
<main>
<article>
<h2>Заголовок статті</h2>
<p>Це основний вміст статті.</p>
</article>
<aside>
<h3>Пов’язані статті</h3>
<ul>
<li><a href="#related1">Пов’язана стаття 1</a></li>
<li><a href="#related2">Пов’язана стаття 2</a></li>
</ul>
<h3>Про автора</h3>
<p>Коротка біографія автора.</p>
</aside>
</main>
Основні особливості:
- Вміст: тег
<aside>містить додаткову інформацію, пов’язану з основним контентом, але не є частиною основного потоку документа. - Розташування: може бути розташований всередині або поза тегом
<main>, залежно від контексту. - Застосування: використовується для бокових панелей, рекламних блоків, посилань на пов’язані статті та іншої допоміжної інформації.
Застосування:
- Бокові панелі з додатковою інформацією
- Рекламні блоки
- Посилання на пов’язані ресурси
- Додаткові матеріали, пов’язані з основним вмістом
Переваги:
- Семантична розмітка: допомагає пошуковим системам і допоміжним технологіям зрозуміти, що це допоміжний контент стосовно основного вмісту
- Покращення структури сторінки: чітко відокремлює додатковий контент від основного, роблячи сторінку більш організованою і зручною для сприйняття
Особливості:
- Містить контент, який пов'язаний з основним, але не є його частиною
- Може використовуватися для бокових панелей, рекламних блоків, підписок та інших додаткових матеріалів
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ