Это первый из пяти разделов курса, тот с которого стоит начинать, даже если ты уже писал HTML-код руками и просто хочешь закрыть пробелы. Уроки идут по порядку: от того как вообще устроен HTML-документ до готовой мини-страницы «Визитка» в конце раздела.
1. Введение в HTML
4 статьи + 1 бонусЧто такое HTML и как он работает
Разбираемся, зачем нужен HTML и как браузер превращает код в страницу
Структура HTML-документа
doctype, html, head и body — из чего состоит любая страница
Теги, атрибуты и вложенность
Как правильно вкладывать элементы друг в друга
HTML-сущности: как показать символы <, > и &
Экранирование <, >, & и именованные символы вроде copy и nbsp
Комментарии и правила читаемого кода
Как оформлять разметку, чтобы её было легко поддерживать
2. Текст и заголовки
6 статей + 4 бонусаHTML-заголовки: структура и применение
Зачем нужна иерархия h1–h6 и как её не нарушать
Что такое абзац в HTML
Тег p и типичные ошибки с переносами строк
Тег hr и br: тематический разрыв и перенос строки
Перенос строки и разрыв темы — и почему это не замена отступам
Списки: ul, ol и вложенные списки
Маркированные и нумерованные списки на практике
Списки определений: теги dl, dt и dd
Термины и определения для глоссариев и характеристик товара
Выделение текста: strong, em, mark
Смысловое и визуальное выделение фрагментов текста
Ещё 7 тегов HTML: abbr, time, sub, sup, small, del, ins
Аббревиатуры, дата и время, индексы, мелкий текст и правки
Ещё 7 тегов HTML: kbd, samp, s, u, var, data, dfn
Ввод с клавиатуры, вывод программы, переменные и термины
Ссылки: тег a и его атрибуты
href, target, rel — и как делать ссылки доступными
Цитаты и блоки кода в тексте
Теги blockquote, q, code и pre
3. Медиа и таблицы
6 статей + 2 бонусаИзображения: тег img и атрибут alt
Как правильно вставлять картинки и не забывать про alt
Видео и аудио в HTML5
Теги video и audio без сторонних плееров
Подпись к картинке: figure и figcaption
Как подписывать изображения семантически, а не просто текстом рядом
Адаптивные изображения: picture и srcset
Как отдавать разные картинки под разные экраны
Таблицы: table, tr, td, th
Когда таблицы уместны и как их правильно верстать
Объединение ячеек: colspan и rowspan
Сложные таблицы без визуального хаоса
Секции таблицы: thead, tbody, tfoot и caption
Шапка, тело и подвал таблицы плюс подпись через caption
iframe: встраивание внешнего контента
Карты, видео и виджеты на странице
4. Формы
7 статей + 2 бонусаТег form и как отправляются данные
action, method и жизненный цикл формы
Поля ввода: input и его типы
text, email, number, password и другие типы
Автозаполнение в HTML: тег datalist
Подсказки для поля ввода — не то же самое, что select
label, placeholder и доступность форм
Как связать подпись с полем и не сломать UX
select, textarea и checkbox/radio
Остальные элементы управления в формах
Индикаторы в HTML: теги progress и meter
Полоса выполнения и шкала измерения — в чём разница
Встроенная валидация форм
required, pattern и атрибуты проверки без JS
Группировка полей: fieldset и legend
Как логически объединять части большой формы
Кнопки: button vs input type=submit
Разница между типами кнопок и когда что использовать
5. Семантика и доступность
9 статей + 3 бонусаСемантическая вёрстка: header, main, footer
Зачем нужны смысловые теги вместо сплошных div
nav, article, section, aside
Как выбрать правильный тег под конкретный блок
Ещё 2 семантических тега HTML: address и search
Контакты автора страницы и блок поиска без ARIA-атрибутов
Аккордеон на чистом HTML: теги details и summary
Раскрывающийся блок без единой строки JavaScript
Модальное окно на HTML без JS-библиотек: тег dialog
showModal(), form method=dialog и фокус-ловушка без библиотек
ARIA-атрибуты: когда они нужны
Базовая доступность для нестандартных элементов
Мета-теги и SEO-разметка head
title, description, Open Graph — по минимуму, но правильно
Микроразметка Schema.org на практике
Как помочь поисковикам понять структуру страницы
Валидация HTML и типичные ошибки
Проверяем разметку валидатором W3C
data-атрибуты и работа с ними
Как хранить произвольные данные прямо в разметке
Итоговый чек-лист по HTML-основам
Что должно быть в мышечной памяти перед CSS
Мини-проект: собираем страницу «Визитка»
Практика: применяем всё пройденное в одном макете