La etiqueta <summary> de HTML especifica un resumen/leyenda que se puede usar junto con la etiqueta <details>. Puedes hacer clic en este resumen/leyenda para expandir/contraer los detalles según sea necesario.
Aunque la etiqueta <summary> no es obligatoria, es útil cuando se trabaja con varios elementos <details>, porque cada <summary> puede proporcionar una leyenda informativa que distingue a cada elemento <details> de los demás.
Sintaxis
La etiqueta <summary> se escribe como <summary></summary> con el resumen/leyenda insertado entre las etiquetas de inicio y fin.
El elemento <summary> debe ser el primer elemento secundario de una etiqueta <details>. El contenido expandible/contraíble sigue directamente a la etiqueta <summary> (pero también está contenido dentro del elemento <details>).
Como este:
<details>
<summary>Haz clic para abrir</summary>
<p>Contenido desplegable...</p>
</details>Ejemplos
Uso básico de etiquetas
Aquí, el <summary> se usa junto con la etiqueta <details> para crear contenido expandible.
<details>
<summary>Haz clic para ampliar</summary>
<p>Si tu navegador admite este elemento, debería permitirte expandir y contraer estos detalles.</p>
</details>See the Pen SUMMARY_Basico by Alex (@htmldesdecero) on CodePen.
Leyenda predeterminada
El <summary> no es obligatorio cuando se usa la etiqueta <details>. Si omites la etiqueta <summary>, el navegador debería crear su propia leyenda (sin embargo, esto no es ideal si tienes varios elementos <details>).
<details>
<p>Contenido desplegable...</p>
</details>See the Pen SUMMARY_Leyenda by Alex (@htmldesdecero) on CodePen.
Múltiples elementos <summary>
Puedes tener varios elementos <details>, todos expandiendo y colapsando su propio contenido. Aquí es donde la etiqueta <summary> realmente puede ser útil, de lo contrario, verás un montón de encabezados que dicen Detalles sin nada más que distinga a cada uno.
<!DOCTYPE html>
<title>Ejemplo</title>
<style>
div {width:210px;padding:5px;background:#eee;border:1px solid #ccc;}
</style>
<div>
<details>
<summary>General:</summary>
<p>Tipo: Imagen JPEG<br>
Tamaño: 8,697 bytes (12 KB en disco)<br>
Creado: 4 de agosto de 2024 2:20 pm<br>
Modificado: 4 de agosto de 2024 2:20 pm
</p>
</details>
<hr>
<details>
<summary>Nombre & Extensión:</summary>
<p><input name="fileName" value="phi-phi-200x150.jpg"></p>
<p><input name="hideExt" type="checkbox" value="">Ocultar Extensión</p>
</details>
<hr>
<details>
<summary>Vista previa:</summary>
<img src="/pix/places/phi-phi-200x150">
</details>
</div>See the Pen SUMMARY_Multiples by Alex (@htmldesdecero) on CodePen.
Aplicar estilo al elemento <summary>
Puedes usar CSS para agregar estilos al elemento <summary>. No solo eso, puedes usarlo para diseñar el elemento mientras el elemento <details> se encuentra en sus diversos estados (es decir, abierto y cerrado). En otras palabras, puedes especificar diferentes estilos para usar tanto en los elementos <summary> como en los <details> según si el usuario ha expandido o contraído el control.
Como este:
<div>
<details>
<summary>General:</summary>
<p>Tipo: Imagen JPEG<br>
Tamaño: 8,697 bytes (12 KB en disco)<br>
Creado: 4 de agosto de 2024 2:20 pm<br>
Modificado: 4 de agosto de 2024 2:20 pm
</p>
</details>
<hr>
<details>
<summary>Nombre & Extensión:</summary>
<p><input name="fileName" value="phi-phi-200x150.jpg"></p>
<p><input name="hideExt" type="checkbox" value="">Ocultar Extensión</p>
</details>
<hr>
<details>
<summary>Vista previa:</summary>
<img src="/pix/places/phi-phi-200x150">
</details>
</div>
details {color:#999;}
details > summary {font-size:larger;color:#666;}
details[open] > summary { color:black;font-weight:bold; }
div {width:210px;padding:5px;background:#eee;border:1px solid #ccc;}See the Pen SUMMARY_Estilos by Alex (@htmldesdecero) on CodePen.
Atributos
Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.
El elemento <summary> acepta los siguientes atributos.Atributo Descripción Ninguno
Atributos globales
Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <summary>, así como con todas las demás etiquetas HTML.
- accesskey
- autocapitalize
- class
- contenteditable
- data-*
- dir
- draggable
- hidden
- id
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- part
- slot
- spellcheck
- style
- tabindex
- title
- translate
Para obtener una explicación completa de estos atributos, consulta Atributos globales de HTML 5.
Controladores de eventos
Los atributos de contenido del controlador de eventos te permiten invocar un script desde tu HTML. El script se invoca cuando ocurre un determinado “evento”. Cada atributo de contenido del controlador de eventos trata un evento diferente.
- onabort
- onauxclick
- onblur
- oncancel
- oncanplay
- oncanplaythrough
- onchange
- onclick
- onclose
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformdata
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onlanguagechange
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmouseenter
- onmouseleave
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onpaste
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onsecuritypolicyviolation
- onseeked
- onseeking
- onselect
- onslotchange
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onvolumechange
- onwaiting
- onwheel
La mayoría de los atributos de contenido del controlador de eventos se pueden usar en todos los elementos HTML, pero algunos controladores de eventos tienen reglas específicas sobre cuándo se pueden usar y a qué elementos se aplican.
