О разделе
Длинные листинги (от ~15 строк) вынесены в каталог code.spirzen.ru и подгружаются в статьях через ExternalCodeEmbed — так HTML энциклопедии не раздувается, а код остаётся с подсветкой, вкладками и сериями "шаг 1…N". Короткие фрагменты (один тег, атрибут, пара строк разметки) по-прежнему прямо в markdown.
HTML — каркас страницы — заголовки, абзацы, ссылки, формы. Стили добавляет CSS, поведение кнопок — JavaScript. Проверка разметки в браузере — DevTools в браузере (вкладка Elements). Связь с формулировками рунета — 9.10 / 133. Разметка описывает гипертекст — электронный текст со ссылками между документами; теория терминов (веб-страница, статика и динамика, гиперссылки) — в основах HTML. Сервер дополняет каркас данными — PHP — о разделе. В статьях энциклопедии дополнительно используют callout (выноски на <div>) и <details> — см. основы HTML.
Статьи раздела учат разметке; при споре о тегах, атрибутах и Web API сверяйтесь с эталоном:
MDN: HTML · WHATWG HTML Living Standard · подборка документации.
Сначала: Что такое код и как он работает — общая база — код, блок кода, компиляция и интерпретация, исходный и машинный код; HTML — тоже текстовый код, который читает браузер.
Теория операций в коде: Операторы — пригодится для CSS и JavaScript; в самой разметке HTML отдельной системы операторов нет.
Логика на странице (вызов функций, обработчики событий): функции в коде, практика — JavaScript.
Локализация в HTML: для мультиязычных страниц сразу закладывайте
lang, при смешении направлений письма применяйтеdir, а для служебных фрагментов (бренды,команды,код) используйтеtranslate="no".
Ускорение навигации:
<script type="speculationrules">(Speculation Rules API) позволяет заранее готовить следующую страницу — переход по ссылке ощущается заметно быстрее.
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Отдельная версия в браузере: WebEditor — Онлайн-редактор HTML, CSS и JavaScript с живым предпросмотром — обновляется при вводе.
Практика целых страниц. Готовые файлы от
DOCTYPEдоfooterс разбором тегов (статья, таблица, форма, портфолио): HTML-страницы целиком. После каркаса — макеты HTML+CSS (центрирование, сетка, адаптив): HTML + CSS — готовые макеты. Векторные рисунки в<svg>— SVG — рисунки кодом. Web Components (Custom Elements, Shadow DOM, slots) — глава Web Components. Тот же каркас на Tailwind — Tailwind — готовые блоки и статья Tailwind CSS. Анимации — CSS-анимации. UI-блоки — типовые элементы в CSS. Компоненты в React — React — рецепты.
HTML
HTML — разметка гипертекста и веб-страниц: структура, ссылки, статика и динамика, DOM и атрибуты.
Основные HTML-теги и их назначение
Основные теги HTML — текст, ссылки, формы, таблицы и семантика. Для смысла предпочтительны strong и em, а не только визуальные b и i.
Справочник по HTML
Широко используется в Web Components, SSR-гидратации, клиентских шаблонизаторах.
Веб-игры на HTML5 и Canvas
Веб-игры на HTML5 и Canvas - стек инструментов от редактора и браузера до фреймворков для рендеринга и логики игры.
Шаблоны разметки, output и datalist
Элемент template для клонирования UI, output для связи с формой и datalist для подсказок ввода.
Управление audio и video из JavaScript
Методы play и pause, свойства currentTime и volume, события медиаэлементов и текстовые дорожки.
Web Components
Стандарты W3C для своих HTML-тегов. Custom Elements, Shadow DOM, template и slots без фреймворка.
Практическое задание на HTML
Вспомогательный контент в HTML - семантика дополнительных блоков и связь с основной темой страницы.
HTML — итоги
Итоги раздела «HTML» — FAQ и краткие ответы по теме.
HTML — чек-лист
Чек-лист раздела «HTML» — вопросы для самопроверки.
HTML — о разделе
HTML — каркас страницы: заголовки, абзацы, ссылки, формы. Стили добавляет CSS, поведение кнопок — JavaScript.
В подборках
Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:
Веб-разработка — Веб-браузеры, JavaScript — о разделе, Веб-сайты и веб-приложения — о разделе, CSS — о разделе, Сеть и интернет — о разделе, PHP — о разделе.
Соло / инди-разработчик — Python — о разделе, Разработка игр — о разделе, Основы работы с Git — о разделе, Разработка — о разделе, Личный профиль и портфолио разработчика, IDE.