<audio>

25 января 2023

Тег <audio> используется для вставки аудиофайлов: музыки, звуковых эффектов, аудиокниг и других аудиоматериалов. Он позволяет управлять воспроизведением файла, изменять громкость и перемотку.

<audio src="audio_file.mp3" controls></audio>

Атрибуты тега <audio>:

src — указывает путь к аудиофайлу.
controls — добавляет на страницу стандартный набор элементов управления, таких как кнопки воспроизведения, паузы и громкости.
autoplay — указывает на автоматическое воспроизведение аудиофайла при загрузке страницы.
loop — указывает на повторение воспроизведения аудиофайла.
preload — определяет, как аудиофайл будет загружаться на страницу. Возможные значения: none, metadata, auto.

Примеры использования

В этом примере аудиофайл с названием audio_file.mp3 будет воспроизводиться на странице с помощью стандартного HTML5-плеера. Атрибут src задаёт путь к файлу, который нужно воспроизвести. Атрибут controls добавляет на страницу элементы управления плеером.

<audio src="audio_file.mp3" controls>
  Ваш браузер не поддерживает тег audio
</audio>

Здесь мы добавляем альтернативный источник для аудиофайла. Таким образом, если браузер не поддерживает формат Ogg, то он будет использовать MP3-версию файла.

<audio src="audio_file.ogg">
  <p>Ваш браузер не поддерживает тег audio</p>
  <source src="audio_file.mp3" type="audio/mpeg">
  <source src="audio_file.ogg" type="audio/ogg">
</audio>

В этом примере мы размещаем элементы source внутри тега audio вместо использования атрибута src. Можно добавить несколько альтернативных источников в разных форматах, и браузер автоматически выберет подходящий.

<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
  <source src="audio_file.ogg" type="audio/ogg">
  <p>Ваш браузер не поддерживает тег audio</p>
</audio>

Для чего использовать тег `<audio>`

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

Ограничения тега `<audio>`

Тег <audio> поддерживается большинством современных браузеров. Однако не все форматы аудиофайлов могут быть воспроизведены во всех браузерах, поэтому рекомендуется использовать несколько форматов аудиофайлов и указывать их через атрибут source внутри тега <audio>.

Нюансы

При использовании атрибута autoplay важно не забывать о том, что автовоспроизведение может раздражать посетителей сайта и снижать удобство пользования им.
Тег <audio> можно использовать совместно с тегом <source>, чтобы предоставить несколько форматов аудиофайлов и обеспечить поддержку во всех браузерах.
Браузеры могут поддерживать разные форматы аудиофайлов. Некоторые форматы, такие как MP3, не являются свободными от лицензионных ограничений и могут не поддерживаться в некоторых браузерах. Рекомендуется использовать форматы, которые поддерживаются большинством браузеров, такие как WAV, OGG или AAC.
Большие аудиофайлы могут занимать много места на сервере и замедлять время загрузки страницы. Рекомендуется оптимизировать размер файла, используя сжатие без потерь.
Атрибуты тега <audio> позволяют настроить различные параметры, такие как автоматическое воспроизведение, повторение и громкость. Важно использовать атрибуты с умом, чтобы не нарушать пользовательский опыт.
Современные браузеры хорошо поддерживают тег <audio>, но некоторые старые браузеры могут не поддерживать некоторые атрибуты или форматы файлов.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

Контейнер для чего угодно. Тег <div>

Тег <div> определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

<div class="section">
  <h2>Заголовок секции</h2>
  <p>Какое-нибудь содержимое секции</p>
</div>

6 октября 2023

Как добавить подпись в HTML. Тег <figcaption>

Тег <figcaption> используется для добавления подписи к элементу <figure>. Обычно он размещается после других медиа-элементов, например, после <img>, и содержит описание либо название изображения или другого контента, находящегося внутри <figure>.

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Описание изображения</figcaption>
</figure>

Устаревший атрибут align — выравнивание подписи относительно элемента <figure>.

Тег <figcaption> может использоваться только внутри элемента <figure>.

Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или других медиа-элементов внутри <figure>. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

6 октября 2023

Метаданные HTML-страницы. Тег <meta>

Тег <meta> содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Это описание веб-страницы">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Иван Иванов">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Тег <meta> помещается в <head> HTML-документа.

Атрибуты тега <meta>:

charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content.

Атрибут charset должен быть первым атрибутом в теге <meta>, а name и http-equiv нельзя использовать вместе.

4 октября 2023

Просто кнопка. Тег <button>

Тег <button> создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

Атрибуты тега <button>:

name — имя кнопки.
type — тип кнопки, по умолчанию — submit. Атрибут type необходим, если указан атрибут value.
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.

4 октября 2023

Независимый контент. Тег <article>

Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

<article>
  <h2>Заголовок статьи</h2>
  <p>Текст статьи...</p>
</article>

Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.

Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

3 октября 2023

Как встроить страницу через <iframe>

Тег <iframe> позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования <iframe>:

<iframe src="https://example.com" width="600" height="400"></iframe>

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

3 октября 2023

Выпадающий список. Тег <select>

Тег <select> используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.

Все опции списка должны быть обёрнуты в тег <option>.

Атрибуты тега <select>:

autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.

Атрибуты value в тегах <option> могут быть использованы для отправки значений на сервер.

1 октября 2023

Встроенные CSS-стили для страницы с тегом <style>

Тег <style> используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.

<!DOCTYPE html>
<html>
	<head>
    <style>
      body {
        background-color: #f2f2f2;
      }
    </style>
	</head>
	<body>
	  <h1>Добро пожаловать на мой сайт!</h1>
	</body>
</html>

Атрибуты тега <style>:

type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.

29 сентября 2023

Изображение в HTML. Тег <img>

Элемент <img> используется для вставки изображений на веб-страницы.

У <img> нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

Существуют определенные правила или стандарты использования тега <img>, которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.