HTML5 для новичков: теги <details> и <summary>

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

Теги <details> и <summary>

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

Пример:

<details>
  <summary>Информация об авторе</summary>
  <p>Автор: Bender Родриго</p>
</details>

Нажатие на «Информация об авторе» (элемент <summary>) развернет блок <details>, показывая информацию об авторе.

Тег <mark>

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

Пример:

<p>Проверка <mark>проверка 1 2Т</mark> и вот здесь будет выделено. И здесь опять <mark>2Т</mark> там проверка.</p>

Текст внутри <mark> будет выделен.

Тег <ruby>

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

Пример:

<ruby>китайский символ<rp>( )</rp><rt>пояснение</rt></ruby>

<rt> содержит пояснение к символу, а <rp>—символы, которые будут показаны, если браузер не поддерживает <ruby>.

Тег <progress>

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

Пример:

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

Этот код покажет индикатор прогресса, заполненный на 55%. Текст «55%» будет показан только если браузер не поддерживает визуальное отображение тега <progress>.

Форма с обработкой ввода

Пример простой формы, которая переводит сантиметры в дюймы в режиме реального времени используя атрибут oninput.

<input type="number" oninput="document.getElementById('result').value = Math.round(this.value / 2.54 * 100) / 100;"> см
<output id="result"></output> дюймов

При вводе значения в сантиметрах, результат в дюймах (округлённый до двух знаков после запятой) мгновенно отображается в элементе output без перезагрузки страницы.

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

Что будем искать? Например,программа