Что такое HTML5
Обновлено в августе 2026. Используйте семантические теги и не ломайте доступность ради «красивостей».
Дальше по теме (2026): базовый курс · поиск · структура.
HTML5 — современная разметка. Для SEO: семантика, доступность контента без Flash.
Примечание (2026): ниже — база. Сервисы сверяйте.
Примечание (2026): часть фактов и сервисов ниже относится к более раннему периоду. Базовые идеи сохраняют смысл; конкретные URL, цены и названия инструментов сверяйте с актуальными источниками.
В этой статье из раздела "для новичков" мы в простых словах поговорим о пятой версии языка HTML, которая в настоящее время находится в процессе разработки. Однако, несмотря на то, что HTML5 еще далек от совершенства, его работоспособность уже признана повсеместно.
Как известно, HTML (HyperText Markup Language) - это язык разметки веб-страниц. Его главная задача - интерпретация передаваемой по сети информации в виде читабельного контента. Посредством HTML мы видим интернет именно таким, какой он есть на сегодняшний день, т.е. красивым, цветастым и многогранным.
Ну а появление новой версии HTML - это бесспорно великое событие, которое еще долгое время будет будоражить умы интернет сообщества.
Давайте же, для начала, остановимся на отличиях пятой версии от четвертой - разумеется, сделаем мы это кратко, дабы уложиться в формат ликбезного материала.
Итак.
Первым делом следует отметить тот факт, что HTML4 был полностью закончен в конце 90-х годов, а работа над HTML5 началась относительно недавно - где-то в 2005-м. Разработчики новой версии HTML основное внимание сконцентрировали на вопросе совместимости новинки со всеми популярными на сегодняшний день типами браузеров - как следствие, никаких сверх революционных перемен в плане демонстрации веб-страниц не произошло, но, зато, потенциальные способности отображения контента были расширенны.
К примеру, в HTML5 можно наблюдать определенное количество новых элементов - появились
section, nav, header, article и footer. Напомним, что ранее существовал только один элемент -
div. Стандартный img, теперь дополнен тэгами audio и
video. Один из самых важных атрибутов id дополнен tabindex
и repeat. Помимо этого полностью упраздняются давно вышедшие из моды элементы типаfont, center и т.п.
Поскольку главный упор сделан именно на бесконфликтность новой версии языка с движками старых браузеров, то предусмотрена возможность полного игнорирования такими просмотрщиками правил отображения заданных в HTML5, что ни в коем случае не сказывается на качестве визуализации загруженного контента.
Теперь давайте немного остановимся на структуре и разметке языка HTML5.
Как известно, старая версия полностью опиралась на элемент div. Иными словами, все, что было связанно с сайдбарами, навигационными панелями, менюшками, разделами и т.п. подчинялось именно этому элементу. В HTML5 появились альтернативные варианты, что, вне всякого сомнения, сделало структуру веб-страницы более наглядной и функциональной.
- header (не путаем с head) - можно задавать не только заголовок страницы, но и подзаголовки;
- nav - элемент предназначен исключительно для ссылок навигации, что в высшей степени удобно при создании внутристраничной навигации по сайту, а так же и для межстраничных переходов.
- section - данный элемент интерпретируется как секция общего пользования. Допустим, его можно использовать тогда, когда требуется в заранее определенном блоке текста задать специальный заголовок или параграф.
- article - посредством этого элемента можно задать независимые зоны текстового наполнения страницы. К примеру, выделение важных публикаций из архива, трансляция текущих новостей, последние сообщения на форуме и т.д. и т.п. Помимо этого, элемент article можно использовать и в обычном режиме - т.е. определять им весь контент страницы.
- footer - самый нижний элемент страницы или же "завершающий блок секции". Представляется в виде колонтитула. Там могут размещаться информационные сообщения касательно вышеопубликованного контета (например, копирайты) и т.п. вещи.
Теперь несколько слов про новшества, которые касаются элементов блокового уровня. Таких новшеств замечено несколько:
- aside - этот контейнер можно использовать для материалов, которые считаются вспомогательными. К примеру, цитаты, сноски отделенные от основного повествования, колонки с пояснительным текстом и т.п.
- dialog - контейнер, позволяющий красиво оформить диалог.
- figure - контейнер, позволяющий описать любое графическое изображение с текстовой подписью.
А как насчет нескольких слов касательно мультимедийных элементов?
В принципе, уже давно ожидалось, что такие элементы рано или поздно появятся - и вот, на сегодняшний день, мы уже имеем
video и audio. Основная задача этого новшества - более тесная интеграция мультимедийного контента с основной частью веб-страницы.
Другой момент - посредством этих элементов отпадает потребность в использовании сторонних продуктов (плагинов) для просмотра и прослушивания мультимедийного контента.
Касательно интерактива, HTML5 тоже не остался в долгу - тут тоже появились новые элементы. Вот некоторые из них:
- details - посредством этого элемента можно паковать необязательную информацию.
- datagrid - используется для демонстрации данных таблицы. От стандартных таблиц отличается тем, что посетитель страницы может самостоятельно управлять отображением информации, т.е. убирать таблицу, перемещать колонки и т.п.
- menu, command - элементы, которые непосредственно относятся к визуальному представлению всех менюшек имеющихся на сайте.
Еще одно новшество - это элементы отвечающие за уровень текста. К примеру, в новой версии можно задавать такие параметры, как, скажем, прогресс какого-либо процесса (progress), динамическое отображение времени (time), дат и т.п.
Ну и в заключение парочка слов про новшества связанные с API!
Первым делом бросается в глаза расширение существующих DOM интерфейсов и добавление новых API - данные можно хранить в браузере, реализована технология Drag-and-drop, стало доступным рисование в онлайне и т.д.
Думается, что на этом мы поставим точку, т.к. наша цель была просто познакомить начинающего веб-мастера с новой технологией и не в коем случае не загружать его технической, сложно перевариваемой информацией. Если вас действительно интересует структура нового языка HTML5 и вы готовы приступить к его изучению, то без труда нагуглите огромное количество полезных материалов!
См. также раздел: термины SEO.
HTML5 в 2026
- Семантика: header, main, article, nav — для людей и поиска.
- Мобильная вёрстка и доступность важнее «новых тегов ради тегов».
- Flash нет; видео/аудио — нативные теги + подписи.
Для SEO
- Валидная разметка не заменяет полезный контент.
- Микроразметка по нужде.
Сделайте сегодня
Проверьте, что на главной есть один <main> и понятный H1.