---
title: <details>
slug: Web/HTML/Element/details
tags:
  - Elemento
  - Elementos HTML interactivos
  - HTML
  - HTML5
  - Referencia
  - Web
translation_of: Web/HTML/Element/details
original_slug: Web/HTML/Elemento/details
---
<p>{{ SeeCompatTable() }}</p>

<h2 id="Resumen">Resumen</h2>

<p>El elemento HTML Details<strong> &lt;details&gt; </strong>es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Contenido dinámico</a> , contenido de seccionamiento, contenido interactivo, contenido palpable .</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td>Un elemento  {{HTMLElement("summary")}}  seguido de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a> </td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiquetas</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elementos padres permitidos</th>
   <td>Cualquier elemento que acepte  <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfaz DOM</th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Este atributo Booleano indica si los detalles serán mostrados al usuario cuando la página se cargue . Por default el valor es <code>false </code>y por lo tanto los detalles estarán ocultos.</dd>
 <dd></dd>
</dl>

<h2 id="Ejemplo">Ejemplo</h2>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;Some details&lt;/summary&gt;
  &lt;p&gt;More info about the details.&lt;/p&gt;
&lt;/details&gt;
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<div class="note">
<p><strong>Nota:</strong> Si el el ejemplo de arriba no funciona , ver {{anch("Compatibilidad con navegadores")}}  para determinar si el navegador soporta esta característica .</p>
</div>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificaciones</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>12</td>
   <td>{{CompatNo}} {{bug(591737)}}</td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>6</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>4.0</td>
   <td>{{CompatNo}} {{bug(591737)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"></h2>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{HTMLElement("summary")}}</li>
</ul>

<div>{{HTMLRef}}</div>