1.Структурные теги
| Тег | Назначение | Пример |
|---|---|---|
| <header> | Заголовок страницы или раздела | <header><h1>Мой сайт</h1></header> |
| <footer> | Нижний колонтитул, информация об авторе или копирайт | <footer>© 2026 Nikovit</footer> |
| <main> | Основной контент страницы | <main><article>...</article></main> |
| <section> | Логический раздел страницы | <section><h2>Новости</h2></section> |
| <article> | Независимый блок контента: статья, пост, новость | <article><h2>Статья</h2><p>...</p></article> |
| <nav> | Навигационное меню | <nav><ul><li><a href="/">Главная</a></li></ul></nav> |
| <aside> | Боковая панель, дополнительная информация | <aside>Реклама, ссылки, виджеты</aside> |
| <figure> | Блок с изображением и подписью | <figure><img src="img.jpg" alt=""><figcaption>Описание</figcaption></figure> |
| <address> | Контактная информация | <address>г. Омск, ул. Ленина</address> |
2.Текстовые семантические теги
| Тег | Назначение | Пример |
|---|---|---|
| <h1> – <h6> | Заголовки разных уровней | <h1>Главная</h1> |
| <p> | Абзац текста | <p>Привет, мир!</p> |
| <blockquote> | Цитата | <blockquote>Цитата великого человека</blockquote> |
| <cite> | Источник цитаты | <cite>Ницше</cite> |
| <mark> | Выделение текста | <p>Обратите внимание на <mark>важное</mark></p> |
| <strong> | Важный текст | <strong>Срочно!</strong> |
| <em> | Акцент на слове | <em>Не пропустите</em> |
| <code> | Фрагмент кода | <code>console.log('Hello');</code> |
| <time> | Время или дата | <time datetime="2026-03-09">9 марта 2026</time> |
3.Таблицы и списки
Остальные таблицы можно обернуть так же: <div class="blog-table-wrap">...</div>.
6.Семантические атрибуты
- alt — описание изображения
- title — подсказка при наведении
- lang — язык содержимого
- datetime — дата и время для <time>
Совет: всегда используйте семантические теги там, где это возможно.
- Улучшается SEO — поисковики лучше понимают структуру страницы.
- Доступность — экранные читалки лучше ориентируются.
- Код чище и понятнее для разработчиков.
Комментарии