Elementos estructurales adicionales

Detalle y Resumen: `<details>` y `<summary>`

Cada vez es más habitual que los portales web requieran de utilidades que revelen información adicional cuando el usuario lo solicite. Para ofrecer esta posibilidad, HTML incluye el elemento <details>. Este elemento muestra un título, especificado mediante la etiqueta <summary>, y el contenido se suele representar por elementos comunes como <p> o <blockquote>.

Así pues, el elemento <details> se puede utilizar para revelar una lista de valores, como se aprecia en el siguiente ejemplo.

<body>
   ...
   <details>
      <summary>Mis Series Favoritas</summary>
         <p>La Casa de Papel</p>
         <p>Narcos</p>
         <p>The Blacklist</p>
         <p>El Cuento de la Criada</p>
   </details>
   ...
</body>

Figuras y Rótulos: `<figure>` y `<figcaption>`

Algunas imágenes solo actúan a modo de complemento informativo y se pueden eliminar sin que afecten al flujo de información. En estos casos debemos utilizar el elemento <figure> que se suele acompañar de la etiqueta <figcaption> para incluir texto descriptivo.

<body>
   ...
   <figure>
      <img src="https://orga.sha2017.org/images/5/56/Tux.jpg" alt="Tux">
      <figcaption>Lovely Tux</figcaption>
   </figure>
   ...
</body>

AnteriorElementos estructurales típicos SiguienteAtributos globales

Última actualización hace 2 años

¿Te fue útil?