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

HTML — это основа сети. Это основа каждого веб-сайта и фундаментальный навык любого веб-разработчика. Однако с появлением новых технологий и тенденций каждый год легко упустить из виду некоторые малоизвестные элементы HTML, которые могут помочь вам создавать более качественные и эффективные веб-сайты. В этом посте мы углубимся в 10 элементов HTML, которые часто упускают из виду, но которые могут значительно улучшить ваши навыки веб-разработки. Эти элементы могут быть не так хорошо известны, как некоторые из наиболее популярных тегов, но они могут иметь большое значение в вашем коде и функциональности вашего веб-сайта. Являетесь ли вы новичком или опытным разработчиком, вы обязательно узнаете что-то новое и полезное из этого глубокого погружения в HTML.

  1. ‹отметить›

Элемент <mark> используется для выделения текста на веб-странице. Текст внутри тега <mark> обычно отображается с желтым цветом фона, но это можно изменить с помощью свойства CSS background-color.

2. ‹kbd›

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

3. ‹детали›

Элемент <details> создает виджет, с которым пользователь может взаимодействовать, чтобы показать или скрыть дополнительную информацию. Текст внутри элемента <summary> обычно используется в качестве метки для виджета.

Выход:

4. ‹прогресс›

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

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

Выход:

5. ‹метр›

Элемент <meter> используется для указания скалярного измерения в пределах известного диапазона, такого как использование диска или релевантность результата поиска. Он похож на элемент <progress> тем, что его можно использовать для обозначения завершения задачи, но он больше подходит для указания скалярного значения в определенном диапазоне.

Вот два примера:

Элемент <meter> автоматически меняет свой цвет в зависимости от значения измерения и значений атрибутов low, high и optimum.

Это автоматическое изменение цвета можно переопределить с помощью стилей CSS, что позволяет разработчикам настраивать внешний вид счетчика.

Атрибуты:

  • Атрибут value указывает текущее значение измерения
  • Атрибут min указывает минимальное значение диапазона
  • Атрибут max указывает максимальное значение диапазона
  • Атрибут low задает нижнее значение диапазона, которое используется для обозначения нижнего значения измерения.
  • Атрибут high определяет максимальное значение диапазона, которое используется для обозначения высокого измерения.
  • Атрибут optimum указывает оптимальное значение диапазона, которое используется для указания оптимального измерения.

6. ‹оптгруппа›

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

Вот пример того, как использовать элемент <optgroup> для группировки связанных опций внутри элемента <select>:

Выход:

7. ‹список данных›

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

Элемент <datalist> должен иметь атрибут id, а элемент ввода, связанный с этим списком данных, должен иметь атрибут списка со значением идентификатора списка данных.

Вот пример:

Выход:

8. ‹шаблон›

Элемент <template> — это функция HTML5, позволяющая определить блок кода HTML, предназначенный для использования в качестве шаблона, но не отображаемый на странице. Затем содержимое шаблона можно повторно использовать и вставлять на страницу с помощью JavaScript. Это может быть полезно для создания повторно используемых компонентов или для создания динамического содержимого без необходимости написания дополнительного HTML.

Элемент <template> является инертным контейнером, что означает, что его содержимое не отображается на странице и не подвергается обычным методам манипулирования DOM, таким как getElementsByTagName. Вместо этого к содержимому шаблона можно получить доступ с помощью свойства content элемента шаблона.

Вот простой пример использования элемента <template> для создания повторно используемого компонента:

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

Спасибо за чтение. Надеюсь, вам понравилась статья и вы узнали что-то новое. Если вам понравилось, я был бы признателен за подписку, поскольку это помогает мне знать, что мои усилия не напрасны.