HTML5 уроки: новые семантические теги для начинающих

В 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, упрощая создание структурированных и семантически правильных веб-страниц. Несмотря на то, что не все браузеры одинаково поддерживают все новые теги, большинство из них уже широко используются.

Что будем искать? Например,программа