Интерактивный тренажёр
Курс о том, как выбирать HTML-элементы по смыслу. Читаете урок, правите код в редакторе и сразу видите результат в превью.
Превращаем страницу из одних div в семантическую: ориентиры, заголовки, списки, формы и стили по смыслу.
Цель: Выбирать HTML-элемент по смыслу, а не по внешнему виду, и понимать, что от этого получают читатель и браузер.
Чиним чужую разметку, собираем вложенные ориентиры, таблицы, формы с описаниями и данные для машин, сверяясь со спецификацией.
Цель: Находить неверную семантику в готовом коде, разбирать спорные случаи по спецификации и описывать страницу и для людей, и для программ.
Рисунки с подписью, смысл внутри строки, связи между страницами и шпаргалка выбора элемента.
Цель: Закрепить базовые элементы и научиться быстро выбирать подходящий.
Карточки статей, вопросы и ответы, контакты с иконками и подсказка без скриптов: типовые куски реальных страниц.
Цель: Узнавать знакомые смысловые задачи в реальных блоках страницы и разбирать «плохо» и «хорошо».
Типовые виджеты: меню с подменю, вкладки, модальные диалоги, выпадающие списки и хлебные крошки, где нужен скрипт и где хватит HTML.
Цель: Выбирать между нативным элементом и составным виджетом и размечать составные виджеты по ARIA.
Ошибки модели содержимого, метаданные, печать и высокая контрастность, а также чек-лист и инструменты проверки.
Цель: Проверять разметку по стандарту и находить проблемы, которые браузер молча прощает.