HTML

Структура любой веб-страницы

HTML описывает содержимое и структуру любой веб-страницы. От первых тегов до доступных форм и семантической вёрстки: это направление даёт прочный фундамент для всего остального в веб-разработке.

Основы

Новичок - база, шаг за шагом

• Что такое HTML? Теги и атрибутыУзнай, что такое HTML, и научись распознавать тег и атрибут.
• Структура текста: заголовки, абзацы и спискиНаучись упорядочивать текст с помощью иерархии заголовков, абзацев и списков.
• Ссылки и изображенияСоздавай ссылки на другие страницы и показывай изображения с помощью тегов a и img.
• Простые таблицыПредставляй данные в строках и столбцах с помощью тегов table, tr, th и td.
• Полный скелет HTML-страницыСобери полноценную веб-страницу с помощью doctype и тегов html, head, meta и body.

Развитие

Средний уровень - создавай реальные проекты

• Формы: input, label, select, textarea, buttonСоздавай полноценные, доступные и готовые к продакшену формы.
• Семантический HTML: структура настоящей страницыЗамени безликие div на теги, которые придают смысл твоей структуре.
• Медиа: audio, video, figure и figcaptionВстраивай звук, видео и иллюстрации с подписями без единого плагина.
• Глобальные атрибуты и data-*Используй атрибуты, которые работают везде, и храни свои данные прямо в HTML.
• Готовим страницу к публикации в вебеОтполируй head своей страницы: title, description, favicon и безопасные внешние ссылки.

Продвинутый

Уверенный уровень - продвинутые паттерны и производительность

• Доступность: alt, иерархия заголовков и ARIAОсвой альтернативный текст, иерархию заголовков, по которой скринридеры действительно могут перемещаться, и использование ARIA только там, где нативного HTML не хватает.
• Продвинутые формы и нативная валидацияИспользуй required, pattern, inputmode и Constraint Validation API, чтобы получить надёжные формы без единой внешней библиотеки.
• Адаптивные изображения: srcset, sizes и pictureОтдавай нужное изображение нужному экрану с помощью srcset и sizes, оставляй picture для художественной адаптации и освой ленивую загрузку.
• Техническое SEO: Open Graph и структурированные данныеУправляй тем, как твои страницы выглядят в превью в соцсетях, с помощью Open Graph и нацеливайся на расширенные результаты через schema.org в формате JSON-LD.
• Производительность загрузки: defer, async, preload и prefetchУправляй порядком выполнения скриптов через defer и async, а затем направляй сеть с помощью preload, preconnect и prefetch.

Мастерство

Эксперт - архитектура, внутренности и крайние случаи

• От HTML к DOM: разбор и восстановление после ошибокПойми, как браузер превращает любой поток HTML, даже некорректный, в детерминированное дерево DOM.
• Веб-компоненты: пользовательские элементы, теневой DOM и слотыОсвой жизненный цикл пользовательского элемента, инкапсуляцию теневого DOM и проекцию содержимого через слоты.
• Интернационализация: lang, dir, charset и ловушки UnicodeГрамотно используй lang, dir и объявление кодировки и обходи ловушки нормализации Unicode и направления письма.
• Безопасность на стороне HTML: XSS, sandbox, noopener и CSPРаспознавай векторы XSS, специфичные для разметки, и применяй встроенную защиту HTML: sandbox, noopener и Content Security Policy.
• Современный интерактивный HTML: dialog, details, popover, contenteditableЗамени свои UI-библиотеки нативными примитивами современного HTML: модальные диалоги, эксклюзивные аккордеоны, поповеры и редактируемые области.