Etiqueta <DETAILS>

La etiqueta <details>, permite definir contenido que el usuario puede visualizar u ocultar según le interese. La etiqueta permite cualquier tipo de contenido, y para visualizar el mismo se ha de realizar un clic sobre el símbolo correspondiente en el navegador, para que la etiqueta muestre su contenido, ya que por defecto y si no se especifica lo contrario se establece como oculto.



La sintaxis de la etiqueta es la siguiente.

<details open>
	<summary>Titulo del contenido</summary>	
	Contenido de la etiqueta …
</details>

La etiqueta tiene solo un atributo, open, si se especifica el contenido de la etiqueta se muestra visible al cargar el documento web. Es un atributo booleano, por lo tanto, solo está activado en caso de reflejarse el mismo en la etiqueta, por defecto no se suele utilizar.

Por otra parte, para que se visualice como título de la etiqueta, sirviendo a su vez de texto de referencia, para visualizar o no el contenido, se utiliza la etiqueta <summary></summary>, en la que se ha de teclear el título que se desea visualizar, esta etiqueta de título ha de ser la primera etiqueta del contenido de la etiqueta <details>.

El siguiente ejemplo muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<h1>Páginas webs interesantes</h1>
<details>
    <summary>Buscadores</summary>
    <ul>
        <li><a href="http://www.google.es">Google</a></li>
        <li><a href="http://www.bing.es">Bing</a></li>
    </ul>
</details>
<details>
    <summary>Educación</summary>
    <ul>
        <li><a href="http://www.aprendoencasa.com">Informática Online</a></li>
        <li><a href="http://manual.bubok.com">Libros</a></li>
    </ul>
</details>
</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.

Etiqueta DETAILS, curso práctico html5

Etiqueta Details html5, ejercicios y prácticas html5

Gracias por vuestra visita y un saludo!!!