Структура документа и сайта
header, nav, main, article, section, aside, footer.
Все уроки · Уроки HTML: учимся с нуля
Семантические разделы
Есть элементы, делящие страницу на осмысленные части: <header> — шапка или область логотипа, <nav> — основная навигация, <main> — главное содержимое (один на странице), <article> — самостоятельный материал, <section> — тематический блок, <aside> — боковая информация, <footer> — подвал.
<body>
<header><h1>My Blog</h1></header>
<nav><a href="/">Home</a> <a href="/posts">Posts</a></nav>
<main>
<article>
<h2>First post</h2>
<p>Text of the post…</p>
</article>
<aside>Related links</aside>
</main>
<footer>© Nibras Code</footer>
</body>Почему это важно
Экранные дикторы быстро переходят между этими частями, поисковики лучше понимают страницу, а код читается яснее. Универсальные <div> и <span> применяют, только когда нет подходящего смыслового элемента и нужна группа для CSS.
- Сохраняйте иерархию заголовков и внутри секций.
- Меню оформляйте списком внутри <nav>.
- У каждого <section> должен быть заголовок.
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Планирование сайта
Перед кодом набросайте на бумаге блоки страницы: верх, навигация, основное содержимое, боковая панель, низ. Затем подберите каждому блоку подходящий семантический элемент. Когда одна схема повторяется по всему сайту, посетителю комфортно.