Загрузка...
Семантические элементы HTML
После div и class/id семантика именует области по смыслу.
Смысл прежде коробок
CSS стилизует любой тег; семантика фиксирует намерение.
Прямой ответ
Landmarks при совпадении смысла. Один main. Не оборачивайте весь сайт в один article.
📊 Core landmarks
| Element | Typical meaning |
|---|---|
| header | Introductory or banner content for a page or section |
| nav | Major navigation links |
| main | Dominant unique content of this page |
| article | Independent composition (post, story, card that could stand alone) |
| section | Thematic grouping, usually with a heading |
| aside | Side note related to the surrounding content |
| footer | Closing content for a page or section |
Простой каркас
Шапка и ссылки, уникальный контент в main, footer в конце.
Simple semantic skeleton
html
HTML Code
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>Читаем каркас
- header часто с nav
- один main
- footer закрывает
article, section и aside
В main: самостоятельный фрагмент, тематические блоки, боковая заметка.
Article section and aside
html
HTML Code
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>Читаем второе демо
- article может стоять отдельно
- section с заголовком
- aside — не второй main
Landmark vs div
Стандартная роль? landmark. Только обёртка вёрстки? div.
Практика
- header/nav/main/footer
- история только в main
- один article
- ровно один main
Частые ошибки
- несколько main
- section без темы
- случайные landmarks
Кратко
- Семантика именует смысл
- один main
- landmark когда роль подходит
🧠 Проверьте Свои Знания
Готов к Началу
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
6
Вопросы
70%
Для Прохождения
∞
Время
∞
Попытки
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху