---
title: <details>
slug: Web/HTML/Element/details
tags:
  - Element
  - HTML
  - HTML interactive elements
  - Reference
  - Web
translation_of: Web/HTML/Element/details
---
<div>{{HTMLRef}}</div>

<p>L'element HTML <code><strong>&lt;details&gt;</strong></code>  s'utilitza com un widget divulgatiu de la qual l'usuari pot recuperar informació addicional.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dinàmic</a>,
    <div class="textArea" id="destText" style="direction: ltr;">
    <div><span class="highlighted" id="ouHighlight__0_9TO0_11">seccionament</span><span id="noHighlight_0.9403833854781938"> </span><span id="ouHighlight__11_14TO13_17">arrel</span></div>
    </div>
    , contingut interactiu, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Un element {{HTMLElement("summary")}} seguit per <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contingut dinàmic</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contingut dinàmic</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Aquest atribut booleà indica si les dades seran mostrades a l'usuari en carregar la pàgina. El valor per defecte és <code>false</code> i per això els detalls estaran ocults.</dd>
</dl>

<h2 id="Exemple">Exemple</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="Resultat_directe">Resultat directe</h3>

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

<div class="note">
<p><strong>Nota:</strong> Si la mostra en viu no us funciona, mireu {{anch("Browser compatibility")}} per determinar si el vostre navegador és totalment compatible amb aquesta característica.</p>
</div>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.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>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</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>MS Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>12</td>
   <td>{{CompatGeckoDesktop("49.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&amp;search=details">Under consideration</a></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>Suport bàsic</td>
   <td>4.0</td>
   <td>{{CompatGeckoMobile("49.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Aquesta característica està disponible des de Firefox 47 darrere de la preferència <code>dom.details_element.enabled</code>, per defecte a <code>false</code>, excepte en les versions Nightly i Aurora ({{bug(1241750)}}). El suport està activat per defecte, és a dir, la preferència està establerta a <code>true</code>, des de Firefox 49.0 ({{bug("1226455")}}).</p>

<h2 id="Veure">Veure</h2>

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