Перейти к основному содержимому

HTML

Быстрый переход к обучению​

  1. HTML и CSS — учебный модуль
  2. Все учебные модули

Что нужно знать​

  1. Семантическая структура страницы и влияние на accessibility/SEO.
  2. Формы: label, name, validation attributes, autocomplete.
  3. Медиа: picture, responsive images, video/audio события.
  4. Базовые мета-теги: charset, viewport, description.
  5. Разница script, defer, async, module.

Что уметь объяснить на собеседовании​

  1. Когда section уместнее div, и почему.
  2. Почему хороший HTML влияет на скорость и поддержку.
  3. Как сделать форму доступной без JS-хаков.
  4. В чем практическая разница canvas и svg.

Грейд-фокус​

  1. Junior: семантика, формы, базовая доступность, корректные атрибуты.
  2. Middle: доступность в комплексных UI, правильная разметка для SEO и аналитики.
  3. Senior: системные стандарты HTML в команде, quality gates и ревью-критерии.

Глубокие кейсы собеседования​

  1. Форма без label: визуально работает, но screen-reader не понимает поля. сильный ответ: явные label for/id, подсказки ошибок, фокус-менеджмент.

  2. Тяжелые изображения на главной: layout-shift и поздний LCP из-за отсутствия размеров и оптимизации. сильный ответ: width/height, srcset/sizes, современный формат и lazy-loading.

  3. Неправильный script loading: блокировка parsing из-за sync-script в <head>. сильный ответ: defer/module для большинства сценариев, async для независимых скриптов.

Практический минимум​

  1. Сверстать семантический каркас страницы без CSS.
  2. Сделать форму логина с доступной разметкой и валидацией.
  3. Добавить responsive-изображение через picture/srcset.
  4. Проверить страницу через Lighthouse accessibility-аудит.

Типовые ловушки​

  1. Использовать только div и терять смысловую структуру.
  2. Ставить placeholder вместо label.
  3. Игнорировать keyboard-навигацию формы.
  4. Не задавать размер медиа-элементам.

Self-review перед собеседованием​

  1. Я могу объяснить семантику страницы в терминах пользователя и доступности.
  2. Я умею быстро проверить форму на a11y-ошибки.
  3. Я понимаю разницу между async, defer и module в реальной загрузке.
  4. Я могу дать пример, где HTML-ошибка вызвала продуктовый баг.

Связанные материалы​

  1. CSS
  2. Рендеринг веб-страницы
  3. Junior JavaScript

Архивный монолит​

Полный старый материал: HTML (архив)