10 необходимых HTML-тегов, про которые мало кто знает

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

1. <details> и <summary>

Эти теги создают интерактивный блок, который можно развернуть или свернуть. Очень полезно для организации FAQ или скрытия дополнительной информации, которая доступна по запросу.

Пример:

<details>

<summary>Часто задаваемые вопросы</summary>

<p>Здесь ваш ответ на часто задаваемый вопрос.</p>

</details>

2. <mark>

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

Пример:

<p>В этом документе особенно важные моменты <mark>выделены таким образом</mark>.</p>

3. <meter>

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

Пример:

<meter value="0.6">60%</meter>

4. <progress>

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

Пример:

<progress value="32" max="100">32%</progress>

5. <time>

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

Пример:

<time datetime="2023-10-05">5 октября 2023 года</time>

6. <datalist>

Тег <datalist> предлагает автозаполнение для элемента <input>, предоставляя пользователю список возможных вариантов выбора.

Пример:

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Chrome">

<option value="Firefox">

</datalist>

7. <output>

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

Пример:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

<input type="range" id="b" name="b" value="50">

= <output name="result" for="a b">100</output>

</form>

8. <figure> и <figcaption>

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

Пример:

<figure>

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

<figcaption>Подпись к изображению</figcaption>

</figure>

9. <template>

Тег <template> содержит контент, который можно динамически клонировать и добавить в документ с помощью JavaScript.

Пример:

<template>

<p>Пример использования шаблона.</p>

</template>

10. <aside>

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

Пример:

<aside>

<h2>Дополнительная информация</h2>

<p>Текст, который дополняет основное содержимое, но может быть отдельно от него.</p>

</aside>

Браузерная совместимость

Мы создали таблицу совместимости для упомянутых HTML-тегов, чтобы вы могли увидеть, как они поддерживаются различными веб-браузерами. В таблице будут представлены последние версии наиболее популярных браузеров: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge и Opera.

Таблица совместимости HTML-тегов с браузерами

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

Заключение

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