HOW_TO_STUDY_HTML_2026.md

Как пользоваться учебником HTML 2026

Цель этого проекта - не просто “узнать теги”, а научиться думать как человек, который умеет писать понятный, валидный и доступный HTML. После прохождения ты должен уметь объяснить каждый тег на своей странице: почему он выбран, что он означает и чем он лучше случайного div.

Главный маршрут

Иди в таком порядке:

1. index.html - стартовая карта проекта.
2. modern-html-2026/course.html - основной курс с объяснениями, примерами, ошибками и заданиями.
3. modern-html-2026/examples.html - готовые шаблоны, которые нужно переписывать руками.
4. modern-html-2026/practice-profile.html - пример первой полноценной страницы.
5. HTML_ELEMENTS_2026.md - полный справочник элементов с расшифровками названий.
6. modern-html-2026/reference.html - короткий браузерный справочник.
7. GUIDE.md - большой конспект.
8. PROJECT_AUDIT.md - почему часть примеров Duckett 2011 устарела.
9. chapter-01 ... chapter-17 - архивные примеры для сравнения.

Как проходить один урок

Каждый урок проходи по одной схеме:

1. Прочитай объяснение.
2. Перепиши пример руками в отдельный файл.
3. Открой файл в браузере.
4. Сломай пример специально: убери alt, поменяй button на div, убери label.
5. Посмотри, что изменилось.
6. Верни правильный вариант.
7. Запиши в GUIDE.md своими словами: “зачем этот тег”.

Признак, что ты понял тему: ты можешь объяснить не только “как написать”, но и “почему именно так”.

Как учить элементы

Для каждого HTML-элемента заполняй 5 ответов:

1. Название: что означает тег или сокращение.
2. Смысл: какую роль он сообщает браузеру.
3. Где использовать: типичный реальный случай.
4. Пример: минимальный правильный код.
5. Ошибка: с чем его чаще всего путают.

Пример:

<button type="button">Открыть меню</button>

• Название: button значит кнопка.
• Смысл: действие на странице.
• Где использовать: открыть меню, отправить форму, закрыть dialog.
• Ошибка: делать кнопку через div.
• Почему важно: нативная кнопка работает с клавиатурой и доступностью.

Уровни освоения

Уровень 1. Узнаю

Ты видишь тег и понимаешь, что это:

• p - paragraph;
• a - anchor;
• img - image;
• form - form;
• label - подпись поля.

Уровень 2. Использую

Ты можешь написать страницу без подсказки:

• правильный head;
• логичные заголовки;
• ссылки;
• изображения с alt;
• форму с label;
• таблицу данных.

Уровень 3. Объясняю

Ты можешь сказать:

• почему здесь article, а не section;
• почему здесь button, а не a;
• почему у картинки такой alt;
• почему форма без label плохая;
• почему таблица не подходит для layout.

Уровень 4. Проверяю

Ты проверяешь страницу:

• Nu Html Checker;
• клавиатура: Tab, Enter, Space, Esc;
• DevTools;
• читаемость структуры заголовков;
• понятность ссылок;
• отсутствие устаревших тегов.

План на 6 недель

Неделя 1. Документ и текст

Цель: написать простую страницу с нуля.

Учить:

• doctype, html, head, body;
• meta charset, viewport, title;
• h1-h6, p, strong, em, time, abbr;
• ul, ol, li, dl, dt, dd.

Практика:

• личная страница;
• статья “как я изучаю HTML”;
• список терминов.

Неделя 2. Ссылки, изображения, медиа

Цель: сделать страницу с навигацией и изображениями.

Учить:

• a, nav;
• img, figure, figcaption;
• picture, source;
• audio, video, track;
• iframe с title.

Практика:

• мини-сайт из 3 страниц;
• галерея;
• страница с видео и субтитрами.

Неделя 3. Таблицы и формы

Цель: собрать доступную форму и таблицу данных.

Учить:

• table, caption, thead, tbody, tfoot, tr, th, td;
• form, label, input, textarea, select, option, button;
• fieldset, legend, datalist, output, progress, meter.

Практика:

• таблица расписания;
• регистрационная форма;
• форма обратной связи.

Неделя 4. Семантика страницы

Цель: перестать мыслить одними div.

Учить:

• header, main, footer;
• article, section, aside;
• address, search;
• когда использовать div и span.

Практика:

• страница блога;
• карточка товара;
• страница контактов.

Неделя 5. Нативная интерактивность и доступность

Цель: понимать, что HTML уже дает базовое поведение.

Учить:

• details, summary;
• dialog;
• popover;
• template, slot;
• правильный alt, label, фокус, структура заголовков.

Практика:

• FAQ;
• модальное окно;
• всплывающая подсказка;
• проверка страницы клавиатурой.

Неделя 6. Итоговый мини-сайт

Цель: собрать проект, который не стыдно развивать дальше.

Мини-сайт:

• главная страница;
• статья;
• контакты;
• форма;
• таблица;
• галерея;
• FAQ;
• footer.

Проверка:

• HTML проходит Nu Html Checker;
• нет устаревших элементов;
• все ссылки понятны;
• все картинки с alt;
• все поля формы с label;
• фокус виден;
• страницу можно пройти клавиатурой.

Как работать со старыми главами Duckett

Старые главы полезны, но открывай их после современного урока.

Пример:

1. Сначала изучи формы в course.html.
2. Потом открой chapter-07.
3. Найди, что там актуально.
4. Найди, что устарело: XHTML-слэши, мало autocomplete, местами слабая доступность.
5. Перепиши пример современно.

Так ты учишь не только синтаксис, но и исторический контекст.

Как вести собственный конспект

После каждого урока добавляй в GUIDE.md короткую запись:

## Тег button

- Название: button = кнопка.
- Смысл: действие на странице.
- Когда использовать: отправить форму, открыть меню, закрыть dialog.
- Не путать: ссылка `a` нужна для перехода.
- Пример:

```html
<button type="button">Открыть меню</button>
```

Пиши своими словами. Конспект, который ты сформулировал сам, закрепляется лучше.

Финальный критерий

Ты готов двигаться дальше к CSS и JavaScript, когда можешь без подсказок:

• написать валидный HTML-документ;
• объяснить каждый элемент на странице;
• сделать форму с label, name, правильными type;
• выбрать article, section, nav, main осознанно;
• написать полезный alt;
• отличить ссылку от кнопки;
• понять, почему старый пример 2011 года устарел;
• проверить страницу валидатором и клавиатурой.