LabEx
Iniciar SesiónÚnete Gratis

Resumen y Detalles en HTML

HTMLHTMLBeginner
Practicar Ahora

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En HTML, la etiqueta <summary> se utiliza para crear un elemento de resumen expandible y contraíble para el contenido presente en la página web.

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/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") html/AdvancedElementsGroup -.-> html/adv_access("Accessibility for Advanced Elements") subgraph Lab Skills html/basic_elems -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/lists_desc -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/layout -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/doc_flow -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/access_cons -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/inter_elems -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/custom_attr -.-> lab-70849{{"Resumen y Detalles en HTML"}} html/adv_access -.-> lab-70849{{"Resumen y Detalles en HTML"}} end

Agregando la etiqueta <details>

Antes de agregar la etiqueta <summary>, necesitamos crear una sección de contenido que se pueda expandir o contraer. Para eso, usaremos la etiqueta <details>. Agrega el siguiente código en el archivo index.html dentro de la etiqueta <body>.

<details>
  <summary>Haz clic aquí para ver el contenido</summary>
  <p>El contenido va aquí.</p>
</details>

En el código anterior, hemos agregado una etiqueta de resumen dentro de la etiqueta de detalles para definir el resumen del contenido.

Agregando el atributo aria-expanded

Podemos agregar un atributo aria-expanded a la etiqueta de detalles para proporcionar el estado actual del contenido. Cuando el contenido está expandido, el valor de aria-expanded será true, y cuando está contraído, el valor será false. Agrega el siguiente código después de la etiqueta <summary> para incluir el atributo aria-expanded.

<details>
  <summary aria-expanded="false">Haz clic aquí para ver el contenido</summary>
  <p>El contenido va aquí.</p>
</details>

Estilando la etiqueta summary

La etiqueta summary no tiene atributos específicos, pero podemos estilarla con CSS. Agrega el siguiente código en la etiqueta