Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revisão 299573 de <section>

  • Slug da revisão: HTML/Element/section
  • Título da revisão: Seção
  • ID da revisão: 299573
  • Criado:
  • Criador: mazulo
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

{{ HTMLVersionHeader(5) }}

Sumário

HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

Usage notes:

  • If it makes sense to separately syndicate the content of a {{ HTMLElement("section") }} element, use an {{ HTMLElement("article") }} element instead.
  • Do no 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.

Usage context

Permitted content Flow content
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements

Any element that accepts flow content. Note that a {{ HTMLElement("section") }} element must not be a descendant of an {{ HTMLElement("address") }} element.

Normative document HTML5, section 4.4.2

Attributes

This element has no attributes other than the global attributes, common to all elements.

DOM Interface

This element implements the HTMLElement interface.

Examples

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 {{ CompatGeckoDesktop("2.0") }} 9.0 11.10 4.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 {{ CompatGeckoMobile("2.0") }} 9.0 11.0 5.0 (iOS 4.2)

See also

  • Other section-related elements: {{ 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") }};
  • Sections and outlines of an HTML5 document.

Fonte da revisão

<p>{{ HTMLVersionHeader(5) }}</p>
<h2 id="Summary">Sumário</h2>
<p>O&nbsp;<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.</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 no 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="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Permitted content</td>
      <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">Flow content</a></td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>
        <p>Any element that accepts <a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">flow content</a>. Note that a {{ HTMLElement("section") }} element must not be a descendant of an {{ HTMLElement("address") }} element.</p>
      </td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element" rel="external nofollow" target="_blank" title="http://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="Attributes">Attributes</h2>
<p>This element has no attributes other than the <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements.</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="Examples">Examples</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="Compatibility">Compatibility</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="See_also">See also</h2>
<ul>
  <li>Other section-related elements: {{ 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>
Reverter para esta revisão