Descubre el poder de la etiqueta de detalles de HTML

Introducción

La etiqueta <details> de HTML proporciona una manera de ofrecer detalles y información adicionales sobre cualquier encabezado o texto. La etiqueta <details> oculta el texto que contiene por defecto y muestra el texto solo cuando el usuario hace clic en el botón de flecha. En este laboratorio, aprenderemos cómo usar la etiqueta <details> de HTML con un resumen personalizado.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70738{{"Detalles adicionales de HTML"}} html/doc_flow -.-> lab-70738{{"Detalles adicionales de HTML"}} html/embed_media -.-> lab-70738{{"Detalles adicionales de HTML"}} html/inter_elems -.-> lab-70738{{"Detalles adicionales de HTML"}} end

Etiqueta `<details>` básica

Crea un archivo index.html en tu editor de texto preferido.

Copia y pega el siguiente código en tu archivo index.html:

<details>
  <summary>Click para ver más</summary>
  <p>
    Este texto está oculto y se puede ver haciendo clic en el botón de flecha.
  </p>
</details>

Este es un ejemplo básico de uso de la etiqueta <details>. El texto dentro de la etiqueta <details> estará oculto por defecto y el usuario puede ver el texto haciendo clic en el botón de flecha.

Resumen personalizado

Ahora creemos un resumen personalizado para la etiqueta <details>. Modifica el código existente para que se vea así:

<details>
  <summary>Leer más sobre el autor</summary>
  <p>
    John Doe es un escritor que ha publicado numerosos libros en diferentes
    géneros.
  </p>
</details>

En el código anterior, hemos agregado un resumen personalizado "Leer más sobre el autor" usando la etiqueta <summary> y proporcionado los detalles del autor dentro de la etiqueta <details>.

Agregar una imagen

Agreguemos una imagen a la etiqueta <details>. Copia y pega el siguiente código en tu archivo index.html:

<details>
  <summary>Click para ver más</summary>
  <p>
    Este texto está oculto y se puede ver haciendo clic en el botón de flecha.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

En el código anterior, hemos agregado una imagen usando la etiqueta <img>. Cuando el usuario hace clic en el botón de flecha, la imagen y el texto dentro de la etiqueta <details> serán visibles.

Agregar el atributo `open`

Ahora agreguemos el atributo open a la etiqueta <details> para mostrar el texto por defecto. Modifica el código existente para que se vea así:

<details open>
  <summary>Leer más sobre el autor</summary>
  <p>
    John Doe es un escritor que ha publicado numerosos libros en diferentes
    géneros.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

El atributo open de la etiqueta <details> asegura que el texto sea visible en la página web por defecto.

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta HTML <details> para proporcionar detalles y información adicionales sobre cualquier encabezado o texto. También aprendimos cómo usar resúmenes personalizados y agregar imágenes en la etiqueta <details>.

Detalles adicionales de HTML