HTML/CSSJuniorTechnical
В чём разница между HTML и HTML5? Какие новые элементы ввёл HTML5?
HTML5 — пятая версия стандарта, добавившая семантические теги (header, main, article), нативные медиа (video/audio), новые типы input и JS-API (Web Storage, WebSockets). DOCTYPE упрощён до <!DOCTYPE html>.
HTML и HTML5: ключевые различия
HTML (HyperText Markup Language) — язык разметки веб-страниц. HTML5 — пятая мажорная версия стандарта, принятая W3C в 2014 году. Сегодня браузеры поддерживают именно HTML5 (а точнее, «living standard» от WHATWG). Разница не только в новых тегах, но и в философии: HTML5 стандартизировал API, ранее существовавшие только как проприетарные расширения браузеров.
Главные отличия HTML5 от HTML4/XHTML
- DOCTYPE упрощён с длинного DTD до
<!DOCTYPE html>. - Семантические теги заменяют безликие
<div>. - Нативные медиа:
<video>и<audio>без Flash-плагинов. - Новые типы
<input>: email, url, date, range, color, search — браузер сам показывает нативный UI. - Canvas и SVG в стандарте.
- JavaScript API: Web Storage, Geolocation, Web Workers, WebSockets, Drag-and-Drop, History API.
- Атрибут
data-*для хранения кастомных данных без нестандартных атрибутов.
Семантические элементы HTML5
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Page</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Заголовок статьи</h1>
<section>
<h2>Раздел</h2>
<p>Контент</p>
</section>
</article>
<aside>
<p>Сайдбар</p>
</aside>
</main>
<footer>
<p>Copyright 2026</p>
</footer>
</body>
</html>
Новые теги HTML5 (полный список важнейших)
<header>,<footer>,<main>,<nav>,<aside>— структура страницы.<article>,<section>— контентные блоки.<figure>,<figcaption>— иллюстрации с подписями.<details>,<summary>— нативный аккордеон без JS.<dialog>— нативное модальное окно.<picture>— адаптивные изображения с несколькими source.<template>— фрагмент DOM, не отображаемый до клонирования.<canvas>— 2D/WebGL-графика через JS.<video>,<audio>,<source>,<track>— медиа.<progress>,<meter>— индикаторы прогресса.<output>— результат вычислений формы.<mark>— подсветка текста.<time>— машиночитаемые даты.
Подводные камни
<section>не является заменой<div>— он должен иметь заголовок (<h2>–<h6>), иначе screen reader создаёт безымянный регион.<article>должен быть самодостаточным (его можно вырезать и разместить на другом сайте), а не просто «блоком».<main>должен быть один на странице — несколько<main>нарушают доступность.<dialog>поддерживается всеми современными браузерами, но методshowModal()нужен для правильного focus trapping.- Тип
input[type=date]рендерится по-разному в Chrome, Firefox, Safari — всегда добавляйте fallback-валидацию на JS. - Семантика не заменяет ARIA:
<nav>безaria-labelне различает главную и второстепенную навигацию для screen reader. <canvas>недоступен для вспомогательных технологий — нужно добавлять текстовый аналог внутри тега.
Common mistakes
- Смешивать «HTML и HTML5» с похожим механизмом без критерия выбора.
- Игнорировать риск: неверно оценить границы применения темы «HTML и HTML5» и получить хрупкое решение.
- Показывать только синтаксис и не объяснять поведение в runtime или сборке.
What the interviewer is testing
- Объясняет эволюция языка разметки, семантические теги, формы, мультимедиа и встроенные браузерные API.
- Показывает на примере, как работает: HTML5 не является отдельным рантаймом: браузер парсит документ в DOM, а новые элементы дают более точные роли, лучшую интеграцию с формами и медиа без плагинов.
- Называет production-нюанс и граничный случай для темы «HTML и HTML5».