У чому різниця між <main> і <section>?
Різниця між <main> і <section> - у рівні та призначенні їхньої смислової ролі в структурі сторінки.
Обидва теги допомагають задати семантику, але використовуються в різних контекстах.
<main> - основний контент сторінки
Це головна смислова частина сайту, заради якої користувач узагалі відкрив сторінку. Вона має містити те, що є унікальним і центральним: статтю, новини, товари, блог тощо.
Приклад:
<main>
<h1>Новини технологій</h1>
<article>
<h2>Нова мова програмування</h2>
<p>Розробники представили новий стандарт...</p>
</article>
</main>Особливості:
- На сторінці може бути лише один
<main>. - Він не повинен містити шапку, меню, футер і бічні панелі.
- Його сенс: «головний вміст, заради якого існує сторінка».
<section> - тематичний розділ усередині сторінки
<section> використовується для розбиття контенту на смислові блоки, кожен з яких має свій заголовок або тему.
Зазвичай це частина всередині <main> або <article>.
Приклад:
<main>
<section>
<h2>Новини компанії</h2>
<p>Ми запустили новий проєкт...</p>
</section>
<section>
<h2>Відгуки клієнтів</h2>
<p>"Чудова робота!"</p>
</section>
</main>Особливості:
- На сторінці може бути багато
<section>. - Кожен розділ має бути логічно завершеним і мати свій заголовок.
- Він допомагає структурувати основний контент.
Головна відмінність:
| Характеристика | <main> | <section> |
|---|---|---|
| Призначення | Основний контент сторінки | Окремий розділ усередині контенту |
| Кількість | Тільки один на сторінці | Може бути декілька |
| Обов'язковий заголовок | Не обов'язковий | Бажаний (<h2> і нижче) |
| Розташування | Містить основну інформацію | Знаходиться всередині <main> або <article> |
| Приклад аналогії | Головна сцена | Окремі епізоди |
Коротко:
<main> - це все головне,
а <section> - частини всередині цього головного, логічні розділи з власним сенсом.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.