Новые теги в HTML5: список, описание, примеры использования

HTML5 является последней версией языка разметки документов в Всемирной паутине. Он имеет ряд оптимизированных тегов, которые значительно упрощают разработку веб-страниц и повышают уровень функциональности и доступности сайта.

Стандарт HTML5 представляет большое количество новых тегов, которые сделают вашу верстку более гибкой и легкой в редактировании. В этой статье мы рассмотрим основные новые теги, которые используются в HTML5, приведем их описание и примеры использования.

Благодаря новым тегам, которые появились в HTML5, дизайн и верстка сайтов стала более интересной и творческой. Кроме того, данные теги просты в использовании и позволяют сократить время на разработку сайта.

Необходимо отметить, что использование новых тегов в HTML5 возможно только при полной совместимости браузеров с последней версией стандарта. В противном случае некоторые элементы могут отображаться не корректно и это может негативно повлиять на работу сайта.

Прочитайте нашу статью, чтобы узнать больше о новых тегах в HTML5 и их преимуществах в разработке веб-сайтов.

Семантические теги

Зачем нужны семантические теги?

Семантические теги – это теги HTML5, которые добавились для более удобного и правильного использования тегов веб-страницы. Они помогают поисковым системам и браузерам понимать, что именно содержится на странице и как ее правильно интерпретировать. Благодаря использованию семантических тегов, веб-страницы становятся более понятными и красивыми, а также улучшается их доступность.

Какие есть семантические теги?

Среди семантических тегов можно выделить такие теги, как:

• <header> – заголовок сайта или раздела страницы;
• <nav> – блок навигации по сайту;
• <main> – основное содержимое страницы;
• <section> – логически выделенная секция страницы;
• <article> – отдельная статья на странице;
• <aside> – блок, содержащий вспомогательную информацию к основному содержимому страницы;
• <footer> – подвал сайта или раздела страницы.

Примеры использования семантических тегов

Пример использования семантических тегов на веб-странице:

Формы и валидация

Типы полей ввода

В HTML5 добавлены новые типы полей ввода для форм. Теперь можно указать тип поля ввода, например, email, url, number, tel. Чтобы валидация была более точной, браузеры могут поддерживать специфические атрибуты полей ввода, такие как min, max, step, pattern и другие.

Проверка введённых данных

HTML5 поддерживает встроенную валидацию форм на стороне клиента. Если пользователь вводит данные с неправильной формой, браузеру не нужно отправлять запрос на сервер, что может сэкономить время и ресурсы.

Когда пользователь отправляет форму, браузер проводит базовую валидацию, например, проверяет, что обязательные поля заполнены, или что поле для email содержит символ "@". Если форма не прошла валидацию, браузер сообщает пользователю об ошибках, которые нужно исправить.

Пользовательские сообщения об ошибках

HTML5 позволяет создавать пользовательские сообщения об ошибках для конкретных полей формы. Если пользователь вводит данные неправильного типа или пропускает поле, для которого оно обязательно, браузер показывает сообщение, которое можно настроить с помощью атрибутов поля.

Например, можно задать своё сообщение об ошибке для поля email с помощью атрибута "required". Это сообщение будет показано, если пользователь попытается отправить форму, не заполнив обязательное поле "email":

• required - поле обязательно для заполнения
• pattern - регулярное выражение, с помощью которого можно проверить, соответствует ли значение поля определённому шаблону
• min и max - минимальное и максимальное значение числовых полей

Мультимедиа и графика

Аудио и видео

Один из главных новых тегов HTML5 – <video>, который позволяет вставлять на страницу видео без использования плагинов и кодеков. Например:

<video controls src="мой_фильм.mp4">
Тег video не поддерживается вашим браузером.
<a href="мой_фильм.mp4">Скачайте видео</a>.
</video>

Тег <audio> позволяет вставлять на страницу аудио-файлы. Например:

<audio controls src="моя_песня.mp3">
Тег audio не поддерживается вашим браузером.
<a href="моя_песня.mp3">Скачайте аудио</a>.
</audio>

Canvas

Тег <canvas> позволяет программно создавать графические изображения на странице. Например:

<canvas id="myCanvas" width="200" height="100"></canvas>

SVG

Тег <svg> позволяет вставлять масштабируемые векторные графические изображения на страницу. Например:

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Векторные изображения и иконки

Новые теги в HTML5 также позволяют использовать векторные изображения и иконки. Например:

<i class="fas fa-heart"></i>
<i class="fas fa-star"></i>

Здесь используется библиотека Font Awesome, которая содержит большой набор векторных иконок. Для ее подключения нужно добавить ссылку на CSS-файл:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />