HTML
Тема дорожной карты · Frontend разработчик
HTML (HyperText Markup Language) — стандартный язык разметки, определяющий структуру и содержимое каждой веб-страницы в интернете и составляющий базовый уровень стека HTML5/CSS3/JavaScript для frontend-разработки. HTML-документ начинается с объявления <!DOCTYPE html>, за которым следуют элементы <html>, <head> и <body>, организующие метаданные и видимое содержимое. HTML-элементы состоят из открывающего и закрывающего тегов, обрамляющих контент, с атрибутами id, class, href, src и alt, добавляющими дополнительную семантику и поведение. Каждый frontend-разработчик должен освоить основы HTML до изучения систем CSS-компоновки (Flexbox и CSS Grid), работы с DOM через JavaScript или использования JavaScript-фреймворков (React), поскольку хорошо структурированный HTML-документ — это предварительное условие для создания доступных, SEO-дружественных и производительных веб-приложений.
Как это работает
HTML — семантическая структура страницы. Элементы описывают смысл, не вид: <article> — статья, <button> — кнопка, <nav> — навигация. Браузер строит DOM-дерево из разметки; CSS таргетит его селекторами; JavaScript манипулирует через DOM API. Семантическая разметка критична для SEO, accessibility (screen reader'ы её разбирают), поддерживаемости. Формы — <form>, инпуты (<input>, <select>, <textarea>), сабмит через HTTP без JS.
Когда применять
Используйте семантические HTML-элементы везде, где есть смысл — <button> вместо <div onclick>, <a> вместо роутинга в JS, <input type="email"> для email. Браузеры (и screen reader'ы, и поисковики) получают keyboard navigation, accessibility, SEO бесплатно. <div>/<span> — только как обёртки последнего средства. Запускайте Lighthouse accessibility-аудит регулярно.
Типичные ошибки
Ловушки HTML: <div onclick> вместо <button> (нет клавиатуры, screen reader, focus management); пропущенный alt на изображениях (screen reader + SEO); инпуты без <label> (невозможно использовать с assistive tech); вложенный <a> в <a> (невалидный HTML, undefined behaviour); h1-h6 для визуального размера, а не иерархии документа. Браузеры много чинят за вас — это прячет баги от тестов, но не от реальных пользователей.