Интерактивный HTML

HTML5 добавил элементы, которые работают интерактивно без JavaScript: <details>/<summary> — раскрывающийся блок, <dialog> — модальное окно, <progress> — индикатор прогресса, <meter> — шкала значений, <output> — результат вычислений. Эти элементы упрощают код и улучшают доступность.

Интерактивные элементы HTML5:

<details> + <summary> — раскрывающийся блок: <details> <summary>Нажмите, чтобы развернуть</summary> <p>Скрытое содержимое здесь.</p> </details> Работает без JavaScript! Атрибут open — развернуть по умолчанию.

<dialog> — модальное окно: <dialog id="modal"> <p>Это модальное окно!</p> <button onclick="this.closest('dialog').close()">Закрыть</button> </dialog> <script> document.querySelector('dialog').showModal(); </script>

<progress> — индикатор прогресса: <progress value="70" max="100">70%</progress>

<meter> — шкала значений: <meter value="0.7" min="0" max="1" low="0.3" high="0.7" optimum="0.5"></meter>

<output> — результат вычислений: <output for="a b">42</output>

<details> — самый полезный без JavaScript:

• FAQ-секции
• Раскрывающиеся ответы
• Скрытые настройки

Интерактивные элементы — как кнопки в лифте. details/summary — кнопка «открыть/закрыть шахту». dialog — аварийное окно лифта. progress — индикатор этажа. meter — показатель загрузки. Всё работает нажатием, без программиста.

**Самый простой:**

<details>
  <summary>Что такое HTML?</summary>
  <p>HTML — язык разметки гипертекста.</p>
</details>

<details open>
  <summary>Открытый раздел</summary>
  <p>Этот раздел виден по умолчанию.</p>
</details>

details/summary — раскрывающийся блок без JavaScript.

**Простой:**

<!-- Прогресс -->
<label for="file">Загрузка файла:</label>
<progress id="file" value="32" max="100">32%</progress>

<!-- Метер -->
<label for="disk">Использование диска:</label>
<meter id="disk" value="0.7" min="0" max="1"
       low="0.3" high="0.7" optimum="0.5">70%</meter>

<!-- Модальное окно -->
<button onclick="document.getElementById('dlg').showModal()">
  Открыть диалог
</button>
<dialog id="dlg">
  <p>Привет! Это модальное окно.</p>
  <form method="dialog">
    <button>Закрыть</button>
  </form>
</dialog>

progress, meter и dialog — интерактивные элементы HTML5.

**Реальный пример:**

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

  <details>
    <summary>Как записаться на курс?</summary>
    <p>Перейдите на страницу курса и нажмите «Записаться».</p>
  </details>

  <details>
    <summary>Сколько длится курс?</summary>
    <p>Курс рассчитан на 40 часов.</p>
  </details>

  <details>
    <summary>Есть ли сертификат?</summary>
    <p>Да, по окончании вы получите сертификат.</p>
  </details>

  <h3>Ваш прогресс</h3>
  <progress value="12" max="17">12 из 17 уроков</progress>
  <p>Вы прошли 12 из 17 уроков (70%).</p>

  <h3>Результат теста</h3>
  <meter value="0.85" min="0" max="1"
         low="0.5" high="0.8" optimum="0.9">85%</meter>
  <p>Отличный результат!</p>
</article>

Реальный пример: FAQ с details/summary и индикаторы прогресса.

**Неправильно:** Делать details/summary на JavaScript

**Почему:** details/summary работают нативно! JavaScript избыточен и увеличивает размер страницы.

**Правильно:** Используйте <details>/<summary> для раскрывающихся блоков — они работают без JS.

**Неправильно:** Забывать label для progress/meter

**Почему:** Без label скринридер не поймёт, что показывает индикатор.

**Правильно:** Всегда связывайте progress/meter с label через for/id.

**Неправильно:** Использовать dialog без method="dialog"

**Почему:** Без method="dialog" форма внутри dialog не закроет его при отправке.

**Правильно:** Используйте <form method="dialog"> для кнопок закрытия внутри dialog.

• details/summary — раскрывающийся блок без JavaScript
• dialog — модальное окно (showModal()/close())
• progress — индикатор прогресса, meter — шкала значений
• Эти элементы упрощают код и улучшают доступность
• Всегда добавляйте label к progress и meter

Назад: Вы знаете мультимедиа (H16) — интерактивные элементы добавляют поведение без JavaScript.

Вперёд: Это последний урок HTML! Дальше изучите CSS, чтобы стилизовать ваши HTML-страницы.