Семантический HTML
Тема дорожной карты · Frontend разработчик
Семантический HTML — это практика использования HTML5-элементов, чьи имена тегов точно описывают смысл и роль их содержимого, вместо опоры на универсальные контейнеры <div> и <span>, стилизуемые CSS-классами. Семантические элементы — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time> — передают структуру документа браузерам, экранным читалкам и поисковым роботам, улучшая одновременно и доступность, и SEO. Правильно структурированный семантический HTML позволяет программам экранных читалок формировать точные планы документа и ориентиры навигации, а Googlebot понимать иерархию контента без JavaScript. Frontend-разработчики, создающие React-компоненты или Astro-страницы, должны всегда выбирать семантически верный HTML-элемент — использовать <button> вместо <div onClick>, <ul> для списков и <table> для табличных данных, — прежде чем добавлять role и aria-* атрибуты как вторичный слой.
Как это работает
Семантический HTML — семантическая структура страницы. Элементы описывают смысл, не вид: <article> — статья, <button> — кнопка, <nav> — навигация. Браузер строит DOM-дерево из разметки; CSS таргетит его селекторами; JavaScript манипулирует через DOM API. Семантическая разметка критична для SEO, accessibility (screen reader'ы её разбирают), поддерживаемости. Формы — <form>, инпуты (<input>, <select>, <textarea>), сабмит через HTTP без JS.
Когда применять
Используйте семантические HTML-элементы везде, где есть смысл — <button> вместо <div onclick>, <a> вместо роутинга в JS, <input type="email"> для email. Браузеры (и screen reader'ы, и поисковики) получают keyboard navigation, accessibility, SEO бесплатно. <div>/<span> — только как обёртки последнего средства. Запускайте Lighthouse accessibility-аудит регулярно.
Типичные ошибки
Ловушки Семантический HTML: <div onclick> вместо <button> (нет клавиатуры, screen reader, focus management); пропущенный alt на изображениях (screen reader + SEO); инпуты без <label> (невозможно использовать с assistive tech); вложенный <a> в <a> (невалидный HTML, undefined behaviour); h1-h6 для визуального размера, а не иерархии документа. Браузеры много чинят за вас — это прячет баги от тестов, но не от реальных пользователей.