HTML5: что это такое, чем отличается от HTML4 и как на нём писать

HTML5 называют пятую версию языка разметки HTML, на которой сегодня написаны почти все сайты. Устанавливать её не нужно: страница становится HTML5-документом, когда в первой строке стоит <!DOCTYPE html>, а открывает её любой современный браузер. Пятая версия добавила теги для структуры страницы, видео и звук без плагинов, графику <canvas>, новые типы полей в формах и хранилище данных в браузере.

Если вы только начинаете, сначала прочитайте, что такое HTML и как он устроен: ниже разбираем, что именно поменялось в пятой версии, как с ней работает CSS3 и почему HTML6 так и не вышел.

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое HTML5 простыми словами

Слово «HTML5» встречается в трёх значениях, и из-за этого статьи про него часто спорят друг с другом.

Спецификация WHATWG сама признаёт, что слово используют как модное обозначение современных веб-технологий в целом. Глоссарий MDN описывает то же самое: HTML5 превращает HTML из языка разметки документа в платформу для приложений.

Главное для новичка: отдельного «языка HTML5» учить не надо. Вы учите HTML, и современный HTML уже и есть пятая версия. Поэтому и курсы по HTML5 учат обычной вёрстке на современном HTML.

Чем HTML5 отличается от HTML4

Предыдущая версия, HTML 4.01, стала рекомендацией W3C 24 декабря 1999 года. За следующие 15 лет сайты научились показывать видео, работать без перезагрузки и подстраиваться под телефон, но делали это через плагины и скрипты. Пятая версия перенесла эти задачи в сам язык.

Flash окончательно ушёл в прошлое: Adobe прекратила поддержку Flash Player 31 декабря 2020 года, а с 12 января 2021 года блокирует запуск Flash-контента. Поэтому видео на сайтах сегодня показывают через <video>, а баннеры и браузерные игры называют HTML5-форматом.

Как выглядит страница на HTML5

Вот страница кофейни целиком: каркас, смысловые теги и немного CSS3 в блоке <style>. Сохраните код в файл index.html и откройте в браузере.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Кофейня «Зерно»</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    header, footer { background: #3b2f2f; color: #fff; padding: 16px; }
    nav a { color: #ffd27f; margin-right: 12px; }
    main { display: flex; gap: 24px; padding: 16px; }
    article { flex: 3; }
    aside { flex: 1; background: #f4efe9; border-radius: 8px; padding: 12px; }
  </style>
</head>
<body>
  <header>
    <h1>Кофейня «Зерно»</h1>
    <nav>
      <a href="#menu">Меню</a>
      <a href="#contacts">Контакты</a>
    </nav>
  </header>
  <main>
    <article id="menu">
      <h2>Сезонное меню</h2>
      <p>Тыквенный латте вернулся до <time datetime="2026-11-30">30 ноября</time>.</p>
      <video src="latte.mp4" controls width="480">Ваш браузер не показывает видео.</video>
    </article>
    <aside>
      <h2>Акция</h2>
      <p>Второй капучино — <mark>за полцены</mark>.</p>
    </aside>
  </main>
  <footer id="contacts">
    <p>Москва, ул. Примерная, 1</p>
  </footer>
</body>
</html>

Валидатор W3C не находит в этом коде ни ошибок, ни предупреждений. Что здесь появилось именно в пятой версии:

• Короткие <!DOCTYPE html> и <meta charset="utf-8"> в начале.
• <header>, <nav>, <main>, <article>, <aside>, <footer> вместо безликих <div>.
• <time> с машиночитаемой датой и <mark> для выделения.
• <video> с кнопками управления: текст внутри тега увидит только тот, чей браузер видео не поддерживает.

Из CSS3 в примере работают display: flex и gap (колонки без float) и border-radius (скругление без картинок-уголков). Как вынести стили в отдельный файл, рассказали в инструкции о подключении CSS к HTML.

Новые теги HTML5 и зачем они нужны

Смысловые теги браузер показывает так же, как <div>. Разница в другом: по ним поисковик, программа экранного доступа и другой разработчик понимают, где на странице меню, а где основной текст. Такую разметку называют семантической вёрсткой.

Полный список с группами и примерами есть в статье про основные теги HTML. Отдельно разобрали вставку картинок и кнопки в HTML.

HTML5 и CSS3: кто за что отвечает

Эти две технологии почти всегда называют парой, но делят работу чётко:

• HTML5 отвечает за структуру и смысл: где заголовок, где список, где видео.
• CSS3 отвечает за вид: цвета, шрифты, отступы, сетку, анимацию, адаптивность.
• JavaScript добавляет поведение: реакцию на клики, загрузку данных, рисование на <canvas>.

Связку HTML5 и CSS3 разбирают курсы вёрстки.

У CSS3 нет одной общей спецификации. Язык разбит на модули (селекторы, цвета, флексбокс, сетки), и у каждого свой уровень. В обзоре CSS от W3C прямо сказано: CSS Level 4 не существует, у языка нет версий в привычном смысле, есть уровни отдельных модулей.

Отсюда ответ на частый запрос «CSS5» или «ксс 5»: такой версии нет, как нет и CSS4. Когда пишут «CSS3», имеют в виду современный CSS целиком. О самом языке стилей мы писали в материале что такое CSS, а об адаптивной вёрстке рассказали в разборе медиа-запросов.

Будет ли HTML6 и кто развивает стандарт

HTML6 не будет: нумерованные версии HTML закончились. Вот как это произошло.

1. 2004 год. Сотрудники Apple, Mozilla и Opera основывают группу WHATWG и начинают дорабатывать HTML отдельно от W3C.
2. 28 октября 2014 года. Консорциум W3C публикует HTML5 как рекомендацию, то есть официальный стандарт.
3. 2016–2017 годы. Выходят редакции HTML 5.1 и HTML 5.2.
4. 28 мая 2019 года. W3C и WHATWG подписывают соглашение: HTML и DOM развивает WHATWG, а W3C даёт отзывы и одобряет промежуточные редакции как свои рекомендации.
5. 28 января 2021 года. W3C помечает HTML 5.2 как заменённую рекомендацию: для новых проектов рекомендован более свежий документ.

Сегодня действует HTML Living Standard, «живой стандарт» без номера версии. Его правят постоянно, новые возможности появляются по одной, а браузеры добавляют их в обычных обновлениях. Формально это продолжение HTML5, поэтому и строка <!DOCTYPE html> осталась прежней.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как начать писать на HTML5

Для первой страницы хватит браузера и редактора кода. Порядок такой:

1. Поставьте редактор, например VS Code. Варианты сравнили в подборке редакторов для веб-разработки.
2. Создайте файл с расширением .html по инструкции про index.html.
3. Вставьте шаблон из раздела выше и поменяйте текст на свой.
4. Откройте файл в браузере: двойной щелчок или другие способы открыть HTML-файл.
5. Проверьте разметку в валидаторе W3C: выберите режим text input, вставьте код и нажмите Check.
6. Если сомневаетесь, поддерживают ли браузеры новый тег или свойство, посмотрите на Can I use.

Решение: начинайте с каркаса и смысловых тегов, а оформление добавляйте вторым шагом. Так проще понять, за что отвечает HTML, а за что CSS.

Частые ошибки новичков

Нет строки DOCTYPE

Симптом: отступы и размеры блоков выглядят иначе, чем в учебнике. Причина: без <!DOCTYPE html> браузер может включить режим совместимости со старыми сайтами. В спецификации сказано, что DOCTYPE нужен по историческим причинам, а без него браузеры, как правило, включают другой режим отображения.

Решение: первой строкой файла всегда пишите <!DOCTYPE html>.

Устаревшие теги из старых уроков

Теги <center> и <font> спецификация относит к полностью устаревшим: авторам страниц их использовать нельзя. Браузер их пока показывает, но валидатор W3C на каждый выдаёт ошибку (Error), например: The “center” element is obsolete. Use CSS instead.

Решение: выравнивание и цвет задавайте через CSS, например text-align: center и color.

Смысловые теги вместо всех div подряд

Обратная крайность: новичок узнаёт про <section> и заменяет им каждый блок. По спецификации section не универсальный контейнер, а тематический раздел, обычно со своим заголовком. Обёртка для сетки или отступов остаётся <div>.

Тег выбран по внешнему виду

<b> и <strong> оба делают текст жирным, но <strong> ещё и сообщает, что фрагмент важен. Разницу показали в статье про жирный текст в HTML. То же со списками: нумерованный <ol> ставят, когда важен порядок, а не ради цифр, подробнее в материале про списки в HTML.

Где освоить HTML5 и CSS3 системно

Каркас страницы и смысловые теги разбираются за вечер. Дальше начинается собственно вёрстка: сетки, адаптивность под телефон, формы, доступность, сборка проекта. Как выглядит этот путь целиком, мы описали в плане, как стать фронтенд-разработчиком, а чем занимается HTML-верстальщик, рассказали отдельно.

Если хотите учиться с заданиями и проверкой, сравните программы в каталоге курсов по HTML5:

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML