Практика вёрстки
Готовые учебные компоненты и подробные разборы: карточки, меню, формы, таблицы, отладка CSS и проверка сайта перед публикацией.
Список проверки с нативными флажками
Нативные checkbox подходят для учебного списка действий, которые пользователь отмечает независимо друг от друга.
Изображение с подписью как самостоятельная группа
Figure объединяет иллюстрацию и подпись, чтобы их связь сохранялась при переносе группы в другое место статьи.
Панель действий: перенос кнопок без горизонтального переполнения
Панель с несколькими действиями должна оставаться читаемой при узком окне и длинных подписях. Flex-wrap позволяет перенести целые кнопки на следующую строку, не меняя порядок документа.
Карточка с :focus-within: подсветка без лишней остановки Tab
Псевдокласс focus-within позволяет выделить контейнер, когда фокус находится на нём или внутри него. Это помогает заметить активную карточку, не превращая весь блок в дополнительную кнопку.
Читаемая статья: ограничение длины строки через ch
Ограничение ширины текстовой колонки помогает читать длинные абзацы на большом экране. Единица ch даёт ориентир, связанный с метрикой символа ноль в текущем шрифте.
Таблица с caption и scope: понятные заголовки данных
Caption задаёт название таблицы, а th со scope связывает заголовки со строками или столбцами. Эти элементы помогают воспринимать данные без опоры только на визуальное расположение.
Адрес ссылки при печати: дополнение текста через attr()
Бумажная копия не сохраняет возможность нажать на ссылку. В печатных стилях можно добавить адрес после понятного названия, чтобы читатель смог найти источник позже.
Поисковая строка: подпись поля и кнопка без тесноты
Поисковая форма должна оставаться понятной при вводе, увеличении масштаба и узком окне. Постоянная подпись объясняет назначение поля, а кнопка показывает действие.
Пошаговая инструкция: нумерованный список с подзаголовками
Последовательность действий удобно оформить обычным ol. Настоящая нумерация сохраняет порядок и смысл инструкции даже без декоративных кружков и CSS-счётчиков.
Блок примечания: выделение без ложного сигнала тревоги
Статическое примечание помогает заметить ограничение примера. Ему нужны понятная подпись, читаемый текст и умеренное оформление, а не обязательное прерывание пользователя.
Карточка характеристик: адаптивная сетка для dl
Список описаний подходит для пар «характеристика — значение». Адаптивная раскладка делает такую карточку компактной на широком экране и последовательной на узком.
Подсветка строки таблицы при фокусе на ссылке
В таблице со ссылками подсветка текущей строки помогает удерживать связь между действием и соседними данными. При этом сама строка не обязана становиться отдельной остановкой клавиатуры.
Карточки выбора: радиокнопки с полноценными подписями
Варианты интерфейса можно представить карточками, сохранив внутри обычные радиокнопки. Так визуальное оформление не требует заново программировать выбор и клавиатурное управление.
Нумерация страниц: ссылки и обозначение текущей страницы
Постраничная навигация должна позволять открыть конкретную часть списка обычной ссылкой. Текущая страница обозначается отдельно, чтобы посетитель понимал своё положение.
Числа в таблице: выравнивание и табличные цифры
Числовые столбцы легче сравнивать, если значения выровнены последовательно, а единицы измерения указаны явно. Табличные цифры помогают сохранить одинаковую ширину знаков при поддержке шрифтом.
Длинный код: прокрутка внутри примера без расползания страницы
Длинная строка кода может расширить всю страницу и затруднить чтение на телефоне. Отдельная область прокрутки сохраняет исходные переносы и ограничивает проблему рамками примера.
Цитата с подписью: figure, blockquote и читаемая композиция
Отдельно выделенный фрагмент можно оформить как figure с blockquote и подписью figcaption. Такая композиция связывает текст с пояснением, не превращая подпись в часть цитаты.
Выбор файла: постоянная подпись и понятное ограничение формата
Поле выбора файла должно объяснять назначение загрузки до открытия системного диалога. Название поля и ограничения формата лучше показывать обычным текстом рядом.
Результаты поиска: заголовки, отрывки и понятные ссылки
Список результатов поиска должен помогать выбрать материал по названию и короткому контексту. Отрывок дополняет ссылку, а не повторяет одну и ту же рекламную подпись во всех пунктах.
Прогресс задания: шкала и текстовое значение рядом
Индикатор прогресса помогает оценить долю завершённой работы. Числовую шкалу стоит сопровождать понятным текстом, чтобы состояние не зависело только от длины цветной полосы.
Карточка с миниатюрой: гибкая колонка для длинного текста
Композиция из миниатюры и описания встречается в каталогах и списках материалов. Длинное название не должно расширять карточку за пределы страницы.
Список публикаций: дата и описание без нарушения порядка чтения
Дата публикации помогает ориентироваться в списке материалов, но не должна заслонять заголовок. Семантическая разметка сохраняет понятность списка без декоративной сетки.
Чекбоксы в колонках: порядок DOM и удобные подписи
Набор независимых вариантов можно расположить сеткой, сохраняя нативные чекбоксы. Важно, чтобы визуальный порядок не противоречил последовательности клавиатурной навигации.
Горизонтальная лента: мягкая привязка прокрутки к карточкам
Scroll snap помогает завершать прокрутку рядом с границей карточки. Он не создаёт автоматически карусель, кнопки управления или доступные подписи.
Указатель терминов: быстрые переходы по начальным буквам
Небольшой буквенный указатель ускоряет переход к разделам длинного словаря. Он должен использовать настоящие ссылки и существующие заголовки, а не только декоративные буквы.
Таблица клавиш: обозначить команды без неясных иконок
Документация интерфейса должна понятно описывать сочетания клавиш и их действие. Элемент kbd отделяет клавиатурный ввод от обычного текста, но сам не регистрирует сочетание.
Список файлов: название, формат и размер до скачивания
Перед скачиванием полезно понимать, что находится по ссылке и насколько велик файл. Такие сведения уменьшают неопределённость, особенно на мобильном соединении.
Практика: компактное поле с доступной скрытой подписью
Иногда назначение компактного поля понятно по окружающему интерфейсу, но поле всё равно нуждается в программно связанной подписи. Упражнение показывает визуальное скрытие label с сохранением его в дереве доступности.
Практика: числовое поле с единицей измерения
Единица измерения должна быть понятна и рядом с полем, и в его доступном имени. Упражнение разделяет ввод числа и декоративное повторение единицы, не заставляя вводить суффикс вручную.
Практика: группы ссылок в подвале страницы
Большой подвал легче читать, когда ссылки сгруппированы по смыслу. Упражнение использует заголовки, списки и название навигации вместо набора одинаково оформленных строк без структуры.