Revision 678333 of <section>

<p>{{ HTMLVersionHeader(5) }}</p>
<h2 id="Sum.C3.A1rio">Sumário</h2>
<p>The <em>HTML Section Element</em> (<code>&lt;section&gt;</code>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <code>&lt;section&gt;</code> should be identified, typically by including a heading (<code><a href="https://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="https://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> element) as a child of the <code>&lt;section&gt;</code> element.</p>
<div class="note">
 <p><em>Usage notes :</em></p>
 <ul>
  <li>If it makes sense to separately syndicate the content of a {{HTMLElement("section")}} element, use an {{HTMLElement("article")}} element instead.</li>
  <li>Do not use the {{HTMLElement("section")}} element as a generic container; this is what {{HTMLElement("div")}} is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.</li>
 </ul>
</div>
<h2 id="contexto_de_uso"><span class="short_text" id="result_box" lang="pt"><span class="hps">contexto de uso</span></span></h2>
<table class="standard-table">
 <tbody>
  <tr>
   <td><dfn>Permitted content</dfn>:</td>
   <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">Flow content</a></td>
  </tr>
  <tr>
   <td><dfn>Tag omission:</dfn></td>
   <td><span class="short_text" id="result_box" lang="pt"><span class="hps">tanto a</span> <span class="hps alt-edited">tag de início</span> <span class="hps">quanto a</span> <span class="hps alt-edited">tag de fechamento</span> <span class="hps alt-edited">são obrigatórias</span></span></td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="pt"><dfn>Permitted parent elements</dfn></span></td>
   <td>
    <p>Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a {{HTMLElement("section")}} elementmust not be a descendant of an {{HTMLElement("address")}} element.</p>
   </td>
  </tr>
  <tr>
   <td>Normative document</td>
   <td><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element" rel="external nofollow" target="_blank" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element">HTML5, section 4.4.2</a></td>
  </tr>
 </tbody>
</table>
<h2 id="Atributos"><span class="short_text" id="result_box" lang="pt"><span class="hps">Atributos</span></span></h2>
<p>This element only includes the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
<h2 id="DOM_Interface">DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush: html">
&lt;section&gt;
  &lt;h1&gt;Heading&lt;/h1&gt;
  &lt;p&gt;Bunch of awesome content&lt;/p&gt;
&lt;/section&gt;
</pre>
<h2 id="Compatibilidade">Compatibilidade</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>5</td>
    <td>{{ CompatGeckoDesktop("2.0") }}</td>
    <td>9.0</td>
    <td>11.10</td>
    <td>4.1</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>2.2</td>
    <td>{{ CompatGeckoMobile("2.0") }}</td>
    <td>9.0</td>
    <td>11.0</td>
    <td>5.0 (iOS 4.2)</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="veja_tamb.C3.A9m"><span class="short_text" id="result_box" lang="pt"><span class="hps">veja também</span></span></h2>
<ul>
 <li><span class="short_text" id="result_box" lang="pt">Other section-related elements</span>: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li>
 <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>