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

0
10932
Добавить в избранное

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

Audio

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

Blockquote

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

Output

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

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

Picture

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

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

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

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

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

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

Progress

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

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

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

Meter

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

Template

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

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

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

Time

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

Video

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

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

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

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

Оригинал

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

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

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий