и — ячейки-заголовки и ячейки с данными.
scope=«col» или scope=«row» — подсказывают, что заголовок относится к определённому столбцу или строке (очень важно для пользователей скринридеров).
Расписание групповых занятий
День
Время
Предмет
Преподаватель
Понедельник
10:00 – 12:00
Математика
Иван Иванов
Среда
13:00 – 15:00
История
Пётр Петров
8. Добавляем доступное видео и аудио Мультимедиа — неотъемлемая часть веба, но также нужно помнить про людей с нарушениями слуха и зрения, и позаботиться о SEO.
Доступность: субтитры и описания Субтитры (kind=«subtitles») помогают слабослышащим, а также тем, кто смотрит видео без звука.
Звуковое описание (kind=«descriptions») нужно, если в видео важна визуальная часть, а пользователь может её не увидеть.
Влияние на SEO Поисковики не «понимают» само видео, но индексируют субтитры, если вы их добавляете (). Это расширяет ваши шансы попасть в результаты поиска.
Качественный мультимедийный контент с субтитрами может повысить время, которое люди проводят на сайте (Time on Page), что часто положительно влияет на ранжирование.
Пример :
Ваш браузер не поддерживает видео.
9. Проверяем семантику: инструменты от WAVE до W3C Даже если вы аккуратно всё прописали, лучше перепроверить себя с помощью специальных сервисов:
WAVE Анализирует доступность по стандартам WCAG, показывает проблемы вроде отсутствующих alt и предлагает решения.
Lighthouse (Chrome DevTools) Выдаёт подробный отчёт: доступность, производительность, базовые SEO-параметры.
W3C Markup Validation Service Проверяет соответствие кода спецификации HTML. Укажет, если теги вложены неправильно или какие-то атрибуты используются некорректно.
HTMLHint Можно подключить к редактору (VSCode, Sublime и т. п.), чтобы подсветка ошибок шла в реальном времени.
Про текст тоже не забываем. «Типограф» Артемия Лебедева или любой другой сервис автоматической обработки русскоязычного текста. Он ставит правильные кавычки, дефисы, неразрывные пробелы. Это повышает «культурность» вашего сайта и улучшает впечатление пользователей.
10. Соберите собственный чек-лист Чтобы в спешке ничего не упустить, составьте свой список правил, по которому будете проверять проект:
Все картинки имеют корректный alt или же вынесены в фон, если это декор.
Иерархию заголовков (
— один,
Формы : у каждого
.
Запуск Lighthouse или WAVE и исправить замечания по доступности.
Проверку код валидатором W3C — исключить синтаксические ошибки.
Проверку оформления — чтобы текст выглядел аккуратно.
Такой подход сэкономит вам время и нервы, а ещё поможет поддерживать сайт на высоком уровне, что заметят и пользователи, и поисковые системы.
Заключение Надеюсь, этот материал показал вам, что семантический HTML — это не просто набор непонятных тегов, а важнейший фундамент для создания качественного и доступного сайта. Правильные теги (вместе с рекомендациями WAI-ARIA) упрощают жизнь и поисковым роботам, и людям, использующим специальные устройства, и вам самим при поддержке проекта.
Семантика — это не про дизайн, а про структуру и смысл.
Доступность — необходимая часть веб-разработки, если вы хотите охватить всю возможную аудиторию.
Инструменты (Lighthouse, WAVE, валидатор W3C и т. п.) помогут избежать мелких, но важных ошибок.
Работа с текстом («Типограф» , аккуратная верстка) повышает общее доверие к сайту.
Внедряйте эти принципы на практике, и вы сможете создавать проекты, которые не только выглядят современно, но и отлично работают для всех пользователей — от случайных гостей до постоянных клиентов и людей с особыми потребностями. Удачной разработки!
© Habrahabr.ru
