Revision 293733 of details

  • Revision slug: HTML/Element/details
  • Revision title: details
  • Revision id: 293733
  • Created:
  • Creator: LeonardoPacheco
  • Is current revision? No
  • Comment

Revision Content

{{ HTMLVersionHeader(5) }}

Sumário

O elemento HTML details (<details>) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.

Contexto de uso

Conteúdo permitido Um elemento {{ HTMLElement("summary") }} seguido por flow content
Omissão de tag Nenhuma, tanto as tas iniciais quanto as finais são obrigatórias.
Elementos pais permitidos Qualquer elemento que aceite flow content.
Documento normativo HTML5, section 4.11.1

Atributos

Como todos os elementos HTML, esse elemento aceita os global attributes.

{{ htmlattrdef("open") }}
Esse atributo Booleano indica se os detalhes serão mostrados para o usuário ao carregar a página. Se omitido os detalhes não serão mostrados.

Interface do DOM

Esse elemento implemena a interface HTMLDetailsElement.

Exemplos

<details>
  <summary>Alguns detalhes</summary>
  <p>Mais informações sobre os detalhes.</p>
</details>

Demonstração

Demo

Compatibilidade dos navegadores

{{ CompatibilityTable() }}

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 12 {{ CompatNo() }} {{ bug(591737) }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 4.0 {{ CompatNo() }} {{ bug(591737) }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Veja também

  • {{ HTMLElement("summary") }}
{{ languages({ "en": "en/HTML/Element/details", "ja": "ja/HTML/Element/details" }) }}

Revision Source

<div>
  {{ HTMLVersionHeader(5) }}</div>
<h2 id="Sum.C3.A1rio">Sumário</h2>
<p>O elemento HTML <em>details</em> (<code>&lt;details&gt;</code>) é usado como uma ferramenta de onde o usuário irá obter informações adicionais.</p>
<h2 id="Contexto_de_uso">Contexto de uso</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Conteúdo permitido</td>
      <td>Um elemento {{ HTMLElement("summary") }} seguido por <a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">flow content</a></td>
    </tr>
    <tr>
      <td>Omissão de tag</td>
      <td>Nenhuma, tanto as tas iniciais quanto as finais são obrigatórias.</td>
    </tr>
    <tr>
      <td>Elementos pais permitidos</td>
      <td>Qualquer elemento que aceite flow content.</td>
    </tr>
    <tr>
      <td>Documento normativo</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element">HTML5, section 4.11.1</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Como todos os elementos HTML, esse elemento aceita os <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>.</p>
<dl>
  <dt>
    {{ htmlattrdef("open") }}</dt>
  <dd>
    Esse atributo Booleano indica se os detalhes serão mostrados para o usuário ao carregar a página. Se omitido os detalhes não serão mostrados.</dd>
</dl>
<h2 id="Interface_do_DOM">Interface do DOM</h2>
<p>Esse elemento implemena a interface<code><a href="/en/DOM/HTMLDetailsElement" title="en/DOM/HTMLDetailsElement"> HTMLDetailsElement</a></code>.</p>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;Alguns detalhes&lt;/summary&gt;
  &lt;p&gt;Mais informações sobre os detalhes.&lt;/p&gt;
&lt;/details&gt;
</pre>
<h3 id="Demonstra.C3.A7.C3.A3o">Demonstração</h3>
<p><a class="external" href="http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#5" title="http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#5">Demo</a></p>
<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Recurso</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Suporte básico</td>
        <td>12</td>
        <td>{{ CompatNo() }} {{ bug(591737) }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Recurso</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Suporte 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="Veja_tamb.C3.A9m">Veja também</h2>
<ul>
  <li>{{ HTMLElement("summary") }}</li>
</ul>
<div class="noinclude">
  {{ languages({ "en": "en/HTML/Element/details", "ja": "ja/HTML/Element/details" }) }}</div>
Revert to this revision