В HTML5 появились новые теги, отсутствующие в предыдущих версиях. Некоторые из них пока не поддерживаются всеми браузерами, но многие уже активно используются. Рассмотрим несколько примеров.
Семантические теги
HTML5 предлагает новые теги для улучшения семантики веб-страницы, облегчающие разработку и понимание кода браузером. Эти теги не влияют на визуальное отображение страницы напрямую, но несут информацию о содержимом блока.
- <header>: Обозначает шапку сайта (верхнюю часть). Сам по себе не изменяет внешний вид, но указывает браузеру на назначение блока. К нему можно применять стили.
- <footer>: Обозначает нижнюю часть сайта (футер). Расположение на странице может не соответствовать ожиданиям, но тег указывает на его семантическое значение. Стили применяются непосредственно к тегу.
- <article>: Указывает на наличие статьи, новости, поста или другого самостоятельного фрагмента информации.
- <aside>: Обозначает боковую панель или другой дополнительный контент. Как и другие семантические теги, он не изменяет отображение, а лишь описывает его назначение для браузера.
- <nav>: Предназначен для обозначения навигационного меню. По структуре похож на списки <ol> или <ul>, но семантически выделяет именно меню. Каждый элемент меню обычно оформляется с помощью тега <li>.
Теги <audio> и <video>
HTML5 включает мощные теги для встраивания медиа-контента.
Тег <audio>
Тег <audio> предназначен для встраивания аудиодорожек. Основной атрибут — src, указывающий путь к аудиофайлу.
<audio src="путь/к/файлу.mp3"></audio>
Атрибут controls добавляет стандартные элементы управления (воспроизведение, пауза, громкость).
<audio src="путь/к/файлу.mp3" controls></audio>
Атрибут autoplay автоматически начинает воспроизведение при загрузке страницы.
<audio src="путь/к/файлу.mp3" controls autoplay></audio>
Атрибут loop зацикливает воспроизведение.
Тег <video>
Тег <video> аналогичен <audio> и служит для встраивания видео. Используется тот же принцип с атрибутами src, controls, autoplay.
<video src="путь/к/файлу.mp4" controls></video>
Рассмотренные семантические теги <header>, <footer>, <article>, <aside>, <nav>, а также теги для работы с медиаконтентом <audio> и <video> значительно расширяют возможности HTML5, упрощая создание структурированных и семантически правильных веб-страниц. Несмотря на то, что не все браузеры одинаково поддерживают все новые теги, большинство из них уже широко используются.