Тег HTML `<summary>`

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

Элемент <summary> всегда должен быть первым элементом внутри тега <details>. При нажатии на сводку родительский элемент <details> раскрывается или сворачивается. Затем элементу <details> отправляется событие toggle, которое можно использовать для уведомления об изменении состояния. Вы можете отслеживать это событие с помощью JavaScript:

document.querySelector('details').addEventListener('toggle', (e) => {
  console.log('Details is now', e.target.open ? 'open' : 'closed');
});

Если первым дочерним элементом <details> не является элемент <summary>, в качестве метки раскрывающегося блока будет использоваться строка по умолчанию.

Стиль по умолчанию для тегов <summary> содержит свойство CSS display со значением «list-item», что позволяет изменить значок, отображаемый в качестве виджета раскрытия. Если вы хотите убрать треугольник раскрытия, можно использовать display: block.

Тег <summary> является одним из элементов HTML5.

Синтаксис

Тег <summary> является парным. Содержимое записывается между открывающим (<summary>) и закрывающим (</summary>) тегами.

Пример использования тега HTML `<summary>`:

Тег HTML <summary>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Copyright 2013-2014.</summary>
      <p>W3docs. All rights reserved.</p>
      <p>The content of the website is the property of W3Docs.com.</p>
    </details>
  </body>
</html>

Try it Yourself »

Результат

пример работы summary

Атрибуты

Тег <summary> поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать тег HTML <summary>

css

summary {
  color: blue;
  list-style: none; /* Hides the disclosure triangle */
}

Практика

Какова цель тега <summary> в HTML?

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

Тег HTML <summary> ​

Синтаксис ​

Пример использования тега HTML <summary>: ​

Результат ​