Это первый из пяти разделов курса, тот с которого стоит начинать, даже если ты уже писал HTML-код руками и просто хочешь закрыть пробелы. Уроки идут по порядку: от того как вообще устроен HTML-документ до готовой мини-страницы «Визитка» в конце раздела.
1. Введение в HTML
4 статьиЧто такое HTML и как он работает
Разбираемся, зачем нужен HTML и как браузер превращает код в страницу
Структура HTML-документа
doctype, html, head и body — из чего состоит любая страница
Теги, атрибуты и вложенность
Как правильно вкладывать элементы друг в друга
Комментарии и правила читаемого кода
Как оформлять разметку, чтобы её было легко поддерживать
2. Текст и заголовки
6 статейHTML-заголовки: структура и применение
Зачем нужна иерархия h1–h6 и как её не нарушать
Что такое абзац в HTML
Тег p и типичные ошибки с переносами строк
Списки: ul, ol и вложенные списки
Маркированные и нумерованные списки на практике
Выделение текста: strong, em, mark
Смысловое и визуальное выделение фрагментов текста
Ссылки: тег a и его атрибуты
href, target, rel — и как делать ссылки доступными
Цитаты и блоки кода в тексте
Теги blockquote, q, code и pre
3. Медиа и таблицы
6 статейИзображения: тег img и атрибут alt
Как правильно вставлять картинки и не забывать про alt
Видео и аудио в HTML5
Теги video и audio без сторонних плееров
Адаптивные изображения: picture и srcset
Как отдавать разные картинки под разные экраны
Таблицы: table, tr, td, th
Когда таблицы уместны и как их правильно верстать
Объединение ячеек: colspan и rowspan
Сложные таблицы без визуального хаоса
iframe: встраивание внешнего контента
Карты, видео и виджеты на странице
4. Формы
7 статейТег form и как отправляются данные
action, method и жизненный цикл формы
Поля ввода: input и его типы
text, email, number, password и другие типы
label, placeholder и доступность форм
Как связать подпись с полем и не сломать UX
select, textarea и checkbox/radio
Остальные элементы управления в формах
Встроенная валидация форм
required, pattern и атрибуты проверки без JS
Группировка полей: fieldset и legend
Как логически объединять части большой формы
Кнопки: button vs input type=submit
Разница между типами кнопок и когда что использовать
5. Семантика и доступность
9 статейСемантическая вёрстка: header, main, footer
Зачем нужны смысловые теги вместо сплошных div
nav, article, section, aside
Как выбрать правильный тег под конкретный блок
ARIA-атрибуты: когда они нужны
Базовая доступность для нестандартных элементов
Мета-теги и SEO-разметка head
title, description, Open Graph — по минимуму, но правильно
Микроразметка Schema.org на практике
Как помочь поисковикам понять структуру страницы
Валидация HTML и типичные ошибки
Проверяем разметку валидатором W3C
data-атрибуты и работа с ними
Как хранить произвольные данные прямо в разметке
Итоговый чек-лист по HTML-основам
Что должно быть в мышечной памяти перед CSS
Мини-проект: собираем страницу «Визитка»
Практика: применяем всё пройденное в одном макете