Учебник HTML для начинающих

Программа курса

1. 1 Введение в HTML

   1. Что такое HTML и как работает веб

      Что такое HTML простыми словами, как браузер превращает разметку в страницу и зачем нужны теги. Первый шаг в веб-разработке.

   2. Структура HTML-документа

      Скелет HTML-страницы: doctype, html, head и body. Разбираем, за что отвечает каждая часть документа и как они связаны.

   3. Теги, элементы и атрибуты

      Разбираемся в трёх ключевых понятиях HTML: что такое тег, чем он отличается от элемента и зачем нужны атрибуты.

   4. Первый HTML-файл

      Пошагово создаём первый HTML-файл, сохраняем с расширением .html и открываем в браузере. Практика с нуля.

2. 2 Текст и его оформление

   1. Заголовки h1–h6

      Шесть уровней заголовков в HTML: как ими пользоваться, зачем нужна иерархия и почему h1 должен быть один.

   2. Абзацы и переносы

      Абзацы тегом p, перенос строки br и горизонтальная линия hr. Почему пустые строки в коде не разбивают текст на абзацы.

   3. Форматирование текста

      Выделение текста в HTML: strong, em, mark, small. В чём смысл каждого тега и почему важна семантика, а не только вид.

   4. Списки

      Маркированные ul, нумерованные ol и списки определений dl. Как строить вложенные списки и когда какой выбрать.

   5. Цитаты и код

      Как оформлять цитаты тегом blockquote и показывать код тегами code и pre. Разница между инлайн-кодом и блоком кода.

3. 3 Ссылки и изображения

   1. Ссылки

      Тег a и атрибут href: как делать ссылки на сайты, якоря на странице, почту и телефон. Открытие в новой вкладке через target.

   2. Изображения

      Тег img и его атрибуты: src, alt, width и height. Зачем обязательно писать alt и как задавать размеры картинки.

   3. Пути: абсолютные и относительные

      Абсолютные и относительные пути в HTML. Как ссылаться на файлы в соседних папках с помощью ./ и ../

   4. Favicon — иконка вкладки

      Что такое favicon, как добавить иконку сайта в head через тег link и какие форматы подходят. Маленькая деталь с большим эффектом.

4. 4 Таблицы

   1. Структура таблицы

      Из чего состоит HTML-таблица: table, tr, th и td. Строим первую таблицу с заголовками столбцов и ячейками данных.

   2. Заголовок и тело таблицы

      Группировка таблицы: thead, tbody и tfoot, а также подпись caption. Зачем разделять шапку и тело таблицы.

   3. Объединение ячеек

      Атрибуты colspan и rowspan: как объединить ячейки таблицы по горизонтали и вертикали. Разбираем на примерах.

   4. Когда таблицы уместны

      Таблицы нужны для табличных данных, а не для вёрстки страницы. Разбираем, почему верстать макет таблицами — плохая идея.

5. 5 Формы и ввод данных

   1. Форма и её отправка

      Тег form и его атрибуты action и method. Как устроена отправка данных формы на сервер методами GET и POST.

   2. Поля ввода и их типы

      Тег input и его типы: text, email, password, number, checkbox, radio, date. Как тип поля меняет поведение и проверку.

   3. Label и доступность

      Тег label связывает подпись с полем ввода через for и id. Зачем это нужно для удобства и доступности форм.

   4. Select, textarea и валидация

      Выпадающий список select, многострочное поле textarea, кнопки button и базовая проверка форм: required, placeholder, pattern.

6. 6 Семантика и структура страницы

   1. Семантические теги

      Семантические теги HTML5: header, nav, main, section, article, aside, footer. Как они задают осмысленную структуру страницы.

   2. Зачем нужна семантика

      Почему семантическая разметка важна: доступность для незрячих, SEO и читаемость кода. Реальная польза семантических тегов.

   3. Атрибуты id и class

      Атрибуты id и class в HTML: чем они отличаются, как их используют для связи со стилями CSS и скриптами. Блочные и строчные элементы.

   4. Мета-теги в head

      Мета-теги в head: charset, viewport и description. Зачем они нужны для кодировки, мобильных устройств и поисковой выдачи.

7. 7 HTML5: мультимедиа и графика

   1. Аудио и видео: тег video и audio

      Теги video и audio в HTML5: controls, autoplay, muted, loop, poster, несколько source (mp4/webm), субтитры через track и доступность медиа.

   2. Адаптивные изображения: picture, srcset, sizes

      Адаптивные картинки в HTML: srcset по плотности и ширине, атрибут sizes, picture+source для art direction, loading=lazy и форматы WebP/AVIF.

   3. SVG в HTML: векторная графика

      SVG в HTML: inline-вставка против img, фигуры rect/circle/path, роль viewBox, стилизация фигур через CSS и доступность через title и role.

   4. Встраивание: iframe и его безопасность

      Iframe в HTML: встраивание карт и видео, изоляция через sandbox, разрешения allow, loading=lazy, защита от clickjacking, кратко embed и object.

8. 8 Доступность (accessibility)

   1. Зачем доступность и как ей помогает семантика

      Кто пользуется скринридерами, почему важны alt и структура заголовков, нативные элементы вместо div и базовые принципы WCAG простыми словами.

   2. ARIA: роли, состояния, свойства

      Когда ARIA нужна и когда не нужна (первое правило ARIA), атрибуты role, aria-label и labelledby, aria-expanded и hidden, live-регионы для динамики.

   3. Навигация с клавиатуры и фокус

      Tab-порядок и фокус, tabindex 0 и -1 и почему не положительный, видимый фокус-индикатор, пропуск-ссылка skip link и ловушки фокуса в модальных окнах.

   4. Доступные формы

      label и for, обёртка label, fieldset и legend для групп радиокнопок, обязательные поля, сообщения об ошибках через aria-describedby и атрибут autocomplete.

9. 9 Формы вглубь: типы и валидация

   1. Типы input: email, date, range, color и другие

      Типы поля input: number, email, url, tel, date, time, range, color, search. Какие мобильные клавиатуры вызывают, атрибуты min/max/step и плюсы нативных виджетов.

   2. Встроенная валидация форм

      Встроенная валидация HTML-форм: required, pattern с regex, minlength/maxlength, min/max, type=email, псевдоклассы :valid/:invalid, novalidate и setCustomValidity.

   3. UX форм: datalist, autocomplete, подсказки

      UX HTML-форм: datalist для автодополнения, токены autocomplete, почему placeholder не заменяет label, accept для файлов, inputmode и многошаговые формы.

   4. Отправка формы: method, action, FormData

      Отправка HTML-форм: GET против POST, action, enctype multipart для файлов, пары name=value, объект FormData в JavaScript и кнопки submit/reset/button.

10. 10 head, метаданные и SEO

    1. Содержимое head: meta, charset, viewport

       Что класть в head HTML-документа: charset utf-8, viewport для мобильных, meta description, lang у html, title и base. Зачем важен порядок тегов.

    2. Open Graph и превью в соцсетях

       Как сделать красивую ссылку-превью в соцсетях: теги og:title, og:description, og:image, og:url, og:type и Twitter Cards. Размер картинки и отладка превью.

    3. Структурированные данные: schema.org и JSON-LD

       Зачем поисковику структурированные данные: разметка schema.org, JSON-LD в script application/ld+json, типы Article, Product, FAQ, rich snippets и микроразметка.

    4. Загрузка и производительность

       Как ускорить страницу через head: defer и async у script, preload, prefetch, preconnect, favicon и манифест PWA, lazy-loading картинок и влияние на SEO.