Как улучшить доступность сайтов с помощью семантического HTML: стандарты семантики

Привет, Хабр. Меня зовут Дмитрий, я Frontend-разработчик в компании Webest. В этой статье расскажу, как эффективно использовать семантический HTML, какие теги (от <header> и <main> до <article> и <aside>) действительно приносят пользу, и в каких ситуациях они работают лучше всего.

Вы узнаете, как правильно выстраивать иерархию заголовков, делать удобную навигацию, создавать доступные формы и даже подключать субтитры к видео. Мы посмотрим на конкретные примеры и разберём, почему семантика — это не просто «опция», а настоящий фундамент для успешного и доступного сайта.

Почему семантика так важна

Семантическая верстка — это стандарт современной веб-разработки. Она напрямую влияет на то, как поисковые системы ранжируют сайт, как специальные устройства считывают контент и насколько логично он структурирован. Но многие все ещё недооценивают его важность.

Если мы говорим о SEO и доступности, тут обязательно всплывает тема WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Этот набор рекомендаций подсказывает, как дополнительно «объяснять» браузерам и скринридерам, что представляют собой элементы интерфейса, какие роли они играют и как их правильно озвучивать. Благодаря таким атрибутам сайт становится удобнее для всех, а ещё может лучше индексироваться в поисковиках.

Кому это будет полезно?

Начинающим разработчикам, которые хотят освоить принципы чистой и доступной вёрстки.
Владельцам сайтов, стремящимся повысить удобство своих проектов и улучшить их SEO.
Фронтенд-разработчикам, которые раньше не углублялись в семантические теги и доступность.

1. Структурирование контента: главные семантические теги

Вместо бесконечных <div> и <span> намного логичнее использовать теги, которые чётко показывают, какую часть сайта вы оформляете. Вот самые основные:

<header> — «шапка» сайта или отдельного блока. Как правило, тут размещаются логотип, название ресурса и главное меню.
<nav> — специально для навигационных ссылок и меню. Делает перемещение по сайту понятным и для людей, и для поисковиков.
<main> — основной и уникальный контент страницы. Идеально для главной части, которую нужно выделить для SEO и фокусного внимания пользователей.
<footer>— «подвал» сайта, где обычно указывают контакты, ссылки на соцсети и другую справочную информацию.
<section> — предназначен для логического деления контента на блоки. Отлично, когда у вас есть отдельные разделы с собственным заголовком.
<address> — тег, в котором обычно пишут контактные данные (например, в футере). Помогает поисковым системам и различным сервисам правильно идентифицировать контактную информацию.

Зачем всё это?

Поисковые роботы лучше понимают, что именно находится на странице, а значит, точнее индексируют и могут повысить ваш сайт в выдаче.
Скринридеры (и другие assistive-технологии) получают «подсказки» о том, где основное меню, а где основной контент.
Код становится чище, а другим разработчикам проще разобраться в вашем проекте.

Пример структуры с этими тегами:

<!DOCTYPE html> <html lang="ru"> <head>     <meta charset="UTF-8">     <title>Пример семантической структуры</title> </head> <body>     <header>         <h1>Название сайта</h1>         <nav>             <ul>                 <li><a href="#">Главная</a></li>                 <li><a href="#">О компании</a></li>                 <li><a href="#">Контакты</a></li>             </ul>         </nav>     </header>      <main>         <section>             <h2>О нас</h2>             <p>Краткое описание компании и её деятельности.</p>         </section>         <section>             <h2>Наши услуги</h2>             <p>Описание услуг, которые предоставляет компания.</p>         </section>     </main>      <footer>         <address>             Email: info@site.ru, Телефон: +7 (999) 111-22-33         </address>         <p>© 2025 Все права защищены.</p>     </footer> </body> </html>

2. Заголовки: почему важна иерархия от <h1> до <h6>

Заголовки (<h1>–<h6>) — это ключ к понятной структуре. Они показывают, какие блоки информации самые важные, а какие второстепенные.

Типичные ошибки:

Использовать заголовки чисто ради оформления. Многие ставят <h2> или <h3> просто потому, что они «красивее» в CSS, не придавая смысла.
Ставить несколько <h1> на одной странице. Тег <h1> — это главный заголовок страницы, и он должен быть только один. Если их несколько, поисковику сложно понять, какой раздел действительно важнее всего.

Зачем соблюдать иерархию?

Поисковым системам проще анализировать содержание. Видя <h2> и <h3>, они понимают вложенность блоков, что положительно влияет на SEO.
Скринридерам удобнее перемещаться между разделами. Люди с ограниченными возможностями могут быстро прыгать по заголовкам и сразу находить нужный раздел контента.

3. Удобная навигация: роль тега <nav>

Навигация — это то, что напрямую влияет на удобство работы с сайтом. Тег <nav> чётко даёт понять и человеку, и браузеру, что в этом блоке лежит меню.

Почему так важен?

Понятность для пользователей. Скринридеры отдельно выделяют <nav>, упрощая переход по пунктам меню.
Плюс к SEO. Поисковики распознают основное меню, индексируют его ссылки и учитывают структуру сайта при ранжировании.
Удобство для разработчика. Меню легко найти в коде, стилизовать или изменить при необходимости.

Можно ли делать несколько ?

Да! Если у вас есть меню в шапке, в футере и ещё мобильное меню, на каждый блок можно (и нужно) поставить <nav>. Единственное — используйте aria-label, чтобы скринридерам было ясно, какое меню главное, а какое дополнительное.

<header>   <nav aria-label="Основное меню сайта">     <ul>       <li><a href="/">Главная</a></li>       <li><a href="/services">Услуги</a></li>       <li><a href="/contacts">Контакты</a></li>     </ul>   </nav> </header>  <footer>   <nav aria-label="Меню в футере">     <ul>       <li><a href="/privacy">Политика конфиденциальности</a></li>       <li><a href="/terms">Пользовательское соглашение</a></li>     </ul>   </nav> </footer>

4. Как структурировать контент с помощью <article>, <section> и <aside>

Часто на странице бывает несколько логических блоков. Для них в HTML есть три полезных тега:

<section> — тематический раздел с заголовком («Услуги компании», «Отзывы клиентов» и т. п.).
<article> — самостоятельный кусок контента, который можно вынести из страницы и опубликовать отдельно (новость, товар, статья).
<aside> — вспомогательная информация (баннеры, ссылки на похожие статьи, реклама).

Когда используем <article>?
Если это самодостаточная единица контента (например, карточка товара, которую можно показать на другой странице без потери смысла).

Когда используем <section>?
Если нужно выделить внутри страницы тему или группу контента. Сама по себе она обычно зависит от общего контекста.

Пример:

<main>   <section>     <h2>Популярные товары</h2>     <div class="products-list">       <article>         <h3>Смартфон Apple iPhone 15</h3>         <p>Описание смартфона Apple iPhone 15.</p>       </article>       <article>         <h3>Умные часы Samsung Galaxy Watch 6</h3>         <p>Описание умных часов Samsung Galaxy Watch 6.</p>       </article>     </div>   </section>    <aside>     <h3>Полезные советы покупателям</h3>     <ul>       <li><a href="#">Как выбрать идеальный смартфон?</a></li>       <li><a href="#">На что обращать внимание при покупке ноутбука?</a></li>     </ul>   </aside> </main>

Таким образом, <article> показывает, что каждая карточка товара — отдельная сущность, а <section> объединяет их по смыслу («Популярные товары»).

5. Доступность изображений: как работать с атрибутом alt

Изображения важны, но нужно учитывать, что не все люди могут их видеть, а иногда картинки и вовсе не загружаются. Атрибут alt решает эту проблему, описывая, что на картинке.

Как писать alt?

Коротко и по делу, например: alt=»Ноутбук Apple MacBook Pro 14, серебристый».
Не пишите «картинка» или «изображение», скринридер это понимает и сам.
Если изображение чисто декоративное и не несёт смысл, ставьте alt=»», чтобы скринридер пропустил его.

Когда лучше фоновое изображение?
Если картинка совсем не связана с содержимым и служит только оформлением, выгоднее вынести её в background-image в CSS. Тогда HTML остаётся «чистым», а поисковики не будут расценивать её как смысловой элемент.

Влияние на SEO
Поисковым системам полезен точный alt, чтобы находить вашу картинку по соответствующим запросам. Если изображение чисто декоративное, лучше не «засорять» выдачу — перенести его в фон через CSS.

6. Формы: как сделать их удобными и доступными

Формы — один из самых важных инструментов для взаимодействия с сайтом (регистрация, обратная связь и прочее). Семантические теги упрощают работу с ними:

<form> — обёртка для всех полей ввода, кнопок и т. д.
<label> — очень важно связать его с полем <input> (через for=»…» и id=»…»), чтобы пользователь мог нажать на текст метки и активировать поле. Людям со скринридерами это тоже сильно помогает.
<fieldset> и <legend> — группируют поля по смыслу (например, «Личные данные»).
<input> — основной тег для поля ввода (текста, email, чекбоксов и т. д.).

Малоизвестные, но крутые теги для форм:

<datalist> — создает список автодополнения для текстового поля.
<optgroup> — группирует варианты в <select> (удобно, когда их много).
<output> — позволяет выводить результат прямо в форме (например, когда вы пересчитываете цену при изменении количества товара).

<form oninput="total.value = parseInt(price.value || 0) * parseInt(quantity.value || 0)">   <label for="fruit">Выберите фрукт:</label>   <input list="fruits" id="fruit" name="fruit">   <datalist id="fruits">     <option value="Яблоко">     <option value="Банан">     <option value="Ананас">     <option value="Киви">   </datalist>    <label for="price">Цена за единицу (руб.):</label>   <input type="number" id="price" name="price" value="100">    <label for="quantity">Количество:</label>   <input type="number" id="quantity" name="quantity" value="1">    <p>Итоговая сумма: <output name="total" for="price quantity">100</output> руб.</p> </form>

7. Таблицы: когда <div> не подходит

Если на странице данные, которые естественнее всего смотрятся в виде строк и столбцов (расписание, прайс-лист, статистика), лучше использовать <table>. Конечно, никто не мешает сделать это через кучу <div>, но зачем усложнять жизнь себе и поисковикам? Поисковые системы не умеют читать мысли, и если вместо таблицы видят набор безликих блоков, то могут не понять, что к чему относится. В итоге ваш тщательно подготовленный контент просто не попадёт на верхние строчки поиска. Так что не усложняйте: есть таблица — используйте <table>.

<caption> — заголовок таблицы (можно спрятать через CSS, но скринридеры увидят).
<thead>, <tbody>, <tfoot> — деление таблицы на шапку, основную часть и подвал.
<th> и <td> — ячейки-заголовки и ячейки с данными.

scope=»col» или scope=»row» — подсказывают, что заголовок относится к определённому столбцу или строке (очень важно для пользователей скринридеров).

<table>   <caption>Расписание групповых занятий</caption>   <thead>     <tr>       <th scope="col">День</th>       <th scope="col">Время</th>       <th scope="col">Предмет</th>       <th scope="col">Преподаватель</th>     </tr>   </thead>   <tbody>     <tr>       <th scope="row">Понедельник</th>       <td>10:00 – 12:00</td>       <td>Математика</td>       <td>Иван Иванов</td>     </tr>     <tr>       <th scope="row">Среда</th>       <td>13:00 – 15:00</td>       <td>История</td>       <td>Пётр Петров</td>     </tr>   </tbody> </table>

8. Добавляем доступное видео и аудио

Мультимедиа — неотъемлемая часть веба, но также нужно помнить про людей с нарушениями слуха и зрения, и позаботиться о SEO.

Доступность: субтитры и описания

Субтитры (kind=»subtitles») помогают слабослышащим, а также тем, кто смотрит видео без звука.
Звуковое описание (kind=»descriptions») нужно, если в видео важна визуальная часть, а пользователь может её не увидеть.

Влияние на SEO

Поисковики не «понимают» само видео, но индексируют субтитры, если вы их добавляете (<track>). Это расширяет ваши шансы попасть в результаты поиска.
Качественный мультимедийный контент с субтитрами может повысить время, которое люди проводят на сайте (Time on Page), что часто положительно влияет на ранжирование.

Пример:

<video controls width="640" height="360">   <source src="video-tutorial.mp4" type="video/mp4">   <track kind="subtitles" src="subtitles_ru.vtt" srclang="ru" label="Русские субтитры" default>   Ваш браузер не поддерживает видео. </video>

9. Проверяем семантику: инструменты от WAVE до W3C

Даже если вы аккуратно всё прописали, лучше перепроверить себя с помощью специальных сервисов:

WAVE
Анализирует доступность по стандартам WCAG, показывает проблемы вроде отсутствующих alt и предлагает решения.
Lighthouse (Chrome DevTools)
Выдаёт подробный отчёт: доступность, производительность, базовые SEO-параметры.
W3C Markup Validation Service
Проверяет соответствие кода спецификации HTML. Укажет, если теги вложены неправильно или какие-то атрибуты используются некорректно.
HTMLHint
Можно подключить к редактору (VSCode, Sublime и т. п.), чтобы подсветка ошибок шла в реальном времени.

Про текст тоже не забываем. «Типограф» Артемия Лебедева или любой другой сервис автоматической обработки русскоязычного текста. Он ставит правильные кавычки, дефисы, неразрывные пробелы. Это повышает «культурность» вашего сайта и улучшает впечатление пользователей.

10. Соберите собственный чек-лист

Чтобы в спешке ничего не упустить, составьте свой список правил, по которому будете проверять проект:

Все картинки имеют корректный alt или же вынесены в фон, если это декор.
Иерархию заголовков (<h1> — один, <h2> — разделы, <h3> — подпункты и т. п.).
Формы: у каждого <input> есть <label>, важные поля помечены required, а для группы полей используется <fieldset>.
Запуск Lighthouse или WAVE и исправить замечания по доступности.
Проверку код валидатором W3C — исключить синтаксические ошибки.
Проверку оформления — чтобы текст выглядел аккуратно.

Такой подход сэкономит вам время и нервы, а ещё поможет поддерживать сайт на высоком уровне, что заметят и пользователи, и поисковые системы.

Заключение

Надеюсь, этот материал показал вам, что семантический HTML — это не просто набор непонятных тегов, а важнейший фундамент для создания качественного и доступного сайта. Правильные теги (вместе с рекомендациями WAI-ARIA) упрощают жизнь и поисковым роботам, и людям, использующим специальные устройства, и вам самим при поддержке проекта.

Семантика — это не про дизайн, а про структуру и смысл.
Доступность — необходимая часть веб-разработки, если вы хотите охватить всю возможную аудиторию.
Инструменты (Lighthouse, WAVE, валидатор W3C и т. п.) помогут избежать мелких, но важных ошибок.
Работа с текстом («Типограф» , аккуратная верстка) повышает общее доверие к сайту.

Внедряйте эти принципы на практике, и вы сможете создавать проекты, которые не только выглядят современно, но и отлично работают для всех пользователей — от случайных гостей до постоянных клиентов и людей с особыми потребностями. Удачной разработки!

ссылка на оригинал статьи https://habr.com/ru/articles/892516/