Семантика HTML: 5 тегов, которые делают сайт понятнее для людей и скринридеров

Семантика HTML: 5 тегов, которые делают сайт понятнее для людей и скринридеров

Если на странице только div и span, смысл приходится угадывать по внешнему виду. Семантика HTML помогает не просто «разметить красиво», а показать, где заголовок, где навигация, где основное содержание и где вспомогательный блок.

Для доступности особенно важны:
— header, nav, main, footer — задают каркас страницы;
— article и section — отделяют самостоятельные блоки и смысловые разделы;
— button вместо кликабельного div — чтобы элемент был управляем с клавиатуры;
— label для полей формы — чтобы у каждого инпута было понятное имя;
— h1–h6 — выстраивают иерархию, по которой удобно сканировать страницу.

Частая ошибка — использовать семантический тег «для вида». Например, section без заголовка или main внутри aside. Тег должен описывать роль блока, а не просто помогать верстке. Если подходящего тега нет, лучше оставить div, чем ломать структуру.

Проверьте страницу так: можно ли понять структуру без стилей, есть ли один главный main, не прыгают ли заголовки через уровни, все ли интерактивные элементы доступны с клавиатуры. Это быстро ловит проблемы, которые потом мешают и SEO, и пользователям.

Начните с каркаса страницы: правильная семантика часто дает больше пользы, чем десяток визуальных правок.