В чём разница между HTML и HTML5? Какие новые элементы ввёл HTML5?

Семантические элементы 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>

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 (полный список важнейших)

• <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> недоступен для вспомогательных технологий — нужно добавлять текстовый аналог внутри тега.

• Смешивать «HTML и HTML5» с похожим механизмом без критерия выбора.
• Игнорировать риск: неверно оценить границы применения темы «HTML и HTML5» и получить хрупкое решение.
• Показывать только синтаксис и не объяснять поведение в runtime или сборке.

• Объясняет эволюция языка разметки, семантические теги, формы, мультимедиа и встроенные браузерные API.
• Показывает на примере, как работает: HTML5 не является отдельным рантаймом: браузер парсит документ в DOM, а новые элементы дают более точные роли, лучшую интеграцию с формами и медиа без плагинов.
• Называет production-нюанс и граничный случай для темы «HTML и HTML5».