ТОП-10 HTML элементов, о которых вы не знаете

Вот вам несколько must-have HTML элементов, которые сделают структуру вашего web-приложения максимально понятной и доступной.

Audio

Тег <audio> инициализирует звук, например музыку или аудио-поток. В настоящее время поддерживаются три формата: MP3, WAV и OGG.

See the Pen
Audio Element by @emmawedekind
on CodePen.

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

Blockquote

<blockquote> укажет раздел, который цитируется из другого источника.

See the Pen
Audio Element by @emmawedekind
on CodePen.

<blockquote cite="https://proglib.io/">
  Библиотека программиста — ваш источник образовательного контента в IT-сфере. 
  Мы публикуем обзоры книг, видеолекции и видеоуроки, дайджесты и образовательные 
  статьи, которые помогут вам улучшить процесс познания в разработке.
</blockquote>

Output

Тег HTML <output> применяют для вывода результата вычисления. Вы можете использовать знак плюс и символ равенства, дабы указать, что первое и второе получаемое значение будут выведены в <output>. В атрибуте for укажите id двух элементов, которые будут участвовать в вычислении.

See the Pen
Audio Element by @emmawedekind
on CodePen.

<form oninput="totalWeight.value=parseInt(catAWeight.value)+parseInt(catBWeight.value)">0
  <input type="range" id="catAWeight" value="50">100
  +<input type="number" id="catBWeight" value="50">
  =<output name="totalWeight" for="catAWeight catBWeight"></output>
</form>

Picture

<picture> точно определит источник изображения. Вместо картинки, которую можно прокручивать в зависимости от ширины окна, создайте несколько изображений для заполнения всего окна браузера.

Тег <picture> содержит в себе два элемента: один или несколько <source> и один элемент <image>.

Элемент <source> имеет следующие атрибуты:

• srcset (обязательный): указывает на URL-адрес отображаемого изображения;
• media: принимает любой допустимый медиа-запрос, который можно определить в CSS;
• sizes: определяет одно значение ширины, один медиа-запрос со значением ширины или список медиа-запросов, разделенных запятыми;
• type: определяет тип MIME.

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

Тег <img> используется для обратной совместимости, если браузер не поддерживает элемент, или ни один из тегов <source> не подходит.

<picture>
  <source media="(min-width: 650px)" srcset="img_cat_fat.jpg">
  <source media="(min-width: 465px)" srcset="img_cat_fluffy.jpg">
  <img src="img_kitten.jpg" alt="Котенок" style="width:auto;">
</picture>

Progress

<progress> визуализирует ход выполнения чего-либо.

АХТУНГ! Это НЕ замена тега <meter>.

Компоненты отображения занятого места на диске или результата запроса должны юзать <meter>.

See the Pen
Audio Element by @emmawedekind
on CodePen.

<progress value="42" max="100"></progress>

Meter

А вот и он! HTML тег <meter> использует скалярное измерение в определенном диапазоне или дробное значение для отображения, например, результатов поиска или показателей давления.

See the Pen
Audio Element by @emmawedekind
on CodePen.

<meter value="4" min="0" max="10">4 out of 10</meter>

<meter value="0.3">30%</meter>

Template

<template> содержит скрытые от пользователя куски кода, которые можно многократно использовать в своих целях.

<template>
  <h2>Кот</h2>
  <img src="img_cat.jpg">
</template>

Используя язык программирования JavaScript, можно отобразить содержимое из кода выше с помощью метода cloneNode():

function showMyTemplate() {
   const myTemplate = document.querySelector('template');
   const templateClone = myTemplate.content.cloneNode(true);
   document.body.appendChild(templateClone);
}

Time

Элемент <time> инициализирует "машинный" формат даты или времени, чтобы потом использовать его, например, в календаре или расписании. Плюс с его помощью поисковые системы создают "умные" результаты поиска.

See the Pen
Audio Element by @emmawedekind
on CodePen.

<p>Мой кот просыпается в <time>11:00</time> каждый день.</p>

Video

Контейнер <video> может хранить в себе видеоклип или видеопоток. Поддерживаемые форматы: MP4, WebM и Ogg.

See the Pen
Audio Element by @emmawedekind
on CodePen.

<video width="320" height="240" controls>
  <source src="catMovie.mp4" type="video/mp4">
  <source src="catMovie.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег video
</video>

Word Break Opportunity среди HTML элементов

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

See the Pen
Audio Element by @emmawedekind
on CodePen.

<p>
  Библиотека программиста — ваш источник образовательного контента в IT-сфере. 
  <wbr>Мы публикуем обзоры книг, видеолекции и видеоуроки, дайджесты и образовательные статьи, 
  <wbr>которые помогут вам улучшить процесс познания в разработке.
</p>

Оригинал

Понравилось? Вас также заинтересуют:

• Спасите сайт! 10 советов по безопасности веб-приложений
• ТОП-10 фреймворков для веб-разработки в 2019
• 8 простых, но полезных CSS-эффектов для вашего сайта

Мы ошиблись, и вы давно используете эти элементы? Быть может, вам есть чем поделиться с нами? ;)