10 нужных вам HTML-элементов, о которых вы не знали

0
2139
views

Перевод статьи «10 HTML Elements You Didn’t Know You Needed».

10 полезных HTML-элементов

Я слышала утверждение «HTML это простой язык» больше раз, чем могу сосчитать. И хотя я согласна, что HTML, вероятно, проще, чем языки программирования, все равно не следует считать его чем-то обыденным.

HTML это мощный язык разметки, с помощью которого можно придавать нужную структуру нашим веб-приложениям. А кроме того, при правильном использовании он может обеспечить приложению большие преимущества в плане доступности.

Итак, сегодня мы рассмотрим 10 HTML-элементов, о существовании которых вы могли и не знать, хотя они могут помочь вам в создании более доступных и лучше структурированных веб-приложений.

Audio

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

Результат применения тега audio

Blockquote

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

Blockquote

Output

Тег <output> служит для представления результата вычислений. Для указания, что первое и второе входящие значения должны быть «выведены» в тег <output>, можно использовать знак «плюс» и знак равенства. Или же это можно обозначить с помощью атрибута for, содержащего идентификаторы двух элементов, которые нужно сложить.

Output

Picture

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

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

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

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

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

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

Picture

Progress

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

Тег progress

Meter

Тег <meter> определяет скалярное измерение в границах определенного диапазона или дробное значение.

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

Тег <meter> не предназначен для отображения прогресса выполнения задачи: для этого используется элемент <progress>.

Использование тега meter

Template

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

Тег template

Используя JavaScript, вы можете выводить этот контент с помощью метода cloneNode().

Вывод контента с помощью JS

Time

Тег <time> служит для вывода даты или времени в виде, понятном для человека. Его можно использовать для кодирования даты и времени в машиночитаемом виде, чтобы пользовательские агенты могли добавлять напоминания о днях рождения или запланированные события в календарь пользователя. Кроме того, это позволяет поисковым системам производить более «умные» результаты поиска.

Использование тега time
Использование тега time

Video

Тег <video> определяет отдельное видео или видеопоток. Поддерживаемые форматы: MP4, WebM и OGG.

Использование тега video
Video

Возможность разбивать слова

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

Использование тега wbr
Разбивка слов в тексте

Надеюсь, эти HTML-элементы пригодятся вам при создании великолепных приложений!

verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here