[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-html-kakie-semanticheskie-tegi-poyavilis-v-html5":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":20,"progress":21,"seo":22},1250,"kakie-semanticheskie-tegi-poyavilis-v-html5",39,"osnovy-html","Основы HTML","📄","Какие семантические теги появились в HTML5","Семантические теги HTML5 — это элементы разметки, которые описывают смысл (семантику) своего содержимого, в отличие от универсального `\u003Cdiv>`, не несущего смысловой нагрузки.\n\n> Аналогия из жизни: семантические теги — это как таблички на дверях в офисе: «Приёмная», «Переговорная», «Серверная». Без них все двери одинаковые (как `\u003Cdiv>`), и понять, что за ними, можно только заглянув внутрь.\n\n### Основные семантические элементы\n\n| Тег | Назначение | Аналог до HTML5 |\n|-----|-----------|-----------------|\n| `\u003Cheader>` | Шапка страницы или раздела | `\u003Cdiv class=\"header\">` |\n| `\u003Cfooter>` | Подвал страницы или раздела | `\u003Cdiv class=\"footer\">` |\n| `\u003Cnav>` | Блок навигации | `\u003Cdiv class=\"nav\">` |\n| `\u003Cmain>` | Основное содержимое (один на страницу) | `\u003Cdiv id=\"content\">` |\n| `\u003Carticle>` | Самостоятельный контент (статья, пост) | `\u003Cdiv class=\"article\">` |\n| `\u003Csection>` | Логический раздел с заголовком | `\u003Cdiv class=\"section\">` |\n| `\u003Caside>` | Боковое или дополнительное содержимое | `\u003Cdiv class=\"sidebar\">` |\n| `\u003Cfigure>` | Иллюстрация с подписью | `\u003Cdiv class=\"image-wrapper\">` |\n| `\u003Cfigcaption>` | Подпись к `\u003Cfigure>` | `\u003Cp class=\"caption\">` |\n\n### Пример семантической структуры\n\n\u003Cdetails>\n\u003Csummary>Полный пример страницы с семантическими тегами\u003C\u002Fsummary>\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"ru\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Семантическая страница\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cheader>\n        \u003Ch1>Название сайта\u003C\u002Fh1>\n        \u003Cnav>\n            \u003Cul>\n                \u003Cli>\u003Ca href=\"\u002F\">Главная\u003C\u002Fa>\u003C\u002Fli>\n                \u003Cli>\u003Ca href=\"\u002Fabout\">О нас\u003C\u002Fa>\u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Fnav>\n    \u003C\u002Fheader>\n\n    \u003Cmain>\n        \u003Carticle>\n            \u003Ch2>Заголовок статьи\u003C\u002Fh2>\n            \u003Csection>\n                \u003Ch3>Первый раздел\u003C\u002Fh3>\n                \u003Cp>Содержимое раздела.\u003C\u002Fp>\n            \u003C\u002Fsection>\n            \u003Cfigure>\n                \u003Cimg src=\"diagram.png\" alt=\"Диаграмма архитектуры\">\n                \u003Cfigcaption>Рис. 1 — Диаграмма архитектуры приложения\u003C\u002Ffigcaption>\n            \u003C\u002Ffigure>\n        \u003C\u002Farticle>\n\n        \u003Caside>\n            \u003Ch3>Полезные ссылки\u003C\u002Fh3>\n            \u003Cul>\n                \u003Cli>\u003Ca href=\"\u002Fdocs\">Документация\u003C\u002Fa>\u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Faside>\n    \u003C\u002Fmain>\n\n    \u003Cfooter>\n        \u003Cp>© 2026 Все права защищены\u003C\u002Fp>\n    \u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n\u003C\u002Fdetails>\n\n### Зачем это важно\n\n- Доступность (accessibility): экранные читалки используют семантические теги для навигации. Пользователь может перейти сразу к `\u003Cmain>` или `\u003Cnav>`\n- SEO: поисковые системы лучше понимают структуру страницы и точнее индексируют контент\n- Читаемость кода: разработчику проще ориентироваться в разметке, чем в наборе `\u003Cdiv class=\"...\">`\n\n### Частые ошибки\n\n- Использование `\u003Csection>` вместо `\u003Cdiv>` для визуальной обёртки без смысловой нагрузки — `\u003Csection>` подразумевает логический раздел с заголовком\n- Вложение `\u003Cheader>` или `\u003Cfooter>` внутрь себя — запрещено спецификацией\n- Оборачивание всей страницы в `\u003Carticle>` — этот тег для самодостаточного контента\n- Несколько `\u003Cmain>` на странице — допускается только один\n\n### Как используется в 2026\n\nСемантическая разметка — обязательное требование при аудите доступности (WCAG). Java-бэкенд-разработчику важно понимать семантические теги при работе с серверным рендерингом (Thymeleaf, JSP) и при создании REST API, возвращающих HTML-фрагменты.\n\n> **На собеседовании:** перечислите основные теги: `\u003Cheader>`, `\u003Cnav>`, `\u003Cmain>`, `\u003Carticle>`, `\u003Csection>`, `\u003Caside>`, `\u003Cfooter>`. Объясните, что они придают смысл разметке (в отличие от `\u003Cdiv>`), помогают screen readers и улучшают SEO. Упомяните, что `\u003Cmain>` может быть только один на странице.","","middle",[15,16,17,18,19],"семантика","accessibility","html5","html","frontend",[],null,{"title":23,"description":24,"ogTitle":25,"ogDescription":26,"keywords":27,"schemaAnswer":39,"featuredSnippetReady":40},"Какие семантические теги появились в HTML5 — Gymterview","Семантические теги HTML5: header, footer, nav, main, article, section, aside, figure. Зачем нужны: доступность, SEO, читаемость. Частые ошибки использования.","Семантические теги HTML5: header, nav, main, article, section — Gymterview","Обзор семантических тегов HTML5: header, footer, nav, main, article, section, aside, figure. Доступность, SEO, частые ошибки.",[28,29,30,31,32,33,34,35,36,37,16,38],"семантические теги","HTML5","header","footer","nav","main","article","section","aside","figure","SEO","В HTML5 появились теги с семантической нагрузкой: \u003Cheader> (шапка), \u003Cfooter> (подвал), \u003Cnav> (навигация), \u003Cmain> (основной контент, один на страницу), \u003Carticle> (самостоятельный контент), \u003Csection> (логический раздел), \u003Caside> (боковое содержимое), \u003Cfigure>\u002F\u003Cfigcaption> (иллюстрация с подписью). Улучшают доступность (screen readers), SEO и читаемость кода.",true]