🗺️ HTML

Разметка, семантика, формы, доступность.

С чего начать

1. Что такое HTML
2. DOCTYPE
3. Структура документа
4. Семантическая разметка
5. Теги и атрибуты

Основы

• Что такое HTML
• DOCTYPE
• Структура документа
• Теги и атрибуты
• Блочные и строчные элементы
• Семантическая разметка
• Параграфы и переносы
• Пути к файлам -- абсолютные и относительные
• alt текст -- лучшие практики
• HTML -- комментарии

Head

• meta теги
• viewport
• SEO -- основы для разработчика
• Open Graph и SEO
• Canonical URL
• robots.txt и sitemap.xml
• Микроданные и JSON-LD
• Content Security Policy через meta

Контент

Текстовые блоки

• Заголовки h1-h6
• Параграфы и контейнеры
• Списки
• Ссылки
• Изображения
• Таблицы
• Объединение ячеек -- colspan, rowspan
• Аудио и видео
• headers

Семантические секции

• article, section, aside
• header, nav, main, footer

Формы

• Формы в HTML
• input типы
• button
• label и fieldset
• fieldset и legend
• select и textarea
• Атрибут placeholder vs label

Валидация

• Валидация форм
• Валидация на клиенте и сервере
• Валидация данных -- Joi, Zod
• Валидация форм в SPA

Глобальные атрибуты

• Глобальные атрибуты HTML
• Атрибуты alt и title

Доступность (a11y)

• Доступность -- основные принципы
• ARIA атрибуты
• Семантика для screen readers
• Фокус и клавиатурная навигация
• Контраст и читаемость

Интерактивные элементы

• Интерактивные элементы
• dialog
• details и summary
• video и audio элементы
• iframe -- встраивание контента
• figure и figcaption
• time, address, abbr
• Форматирование текста -- strong, em, mark

Современный HTML

• picture и srcset
• loading lazy
• Web Components -- template и slot
• HTML5 API -- обзор

Связанные

• _MOC CSS · _MOC JavaScript · _MOC Безопасность