Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 941439 of <section>

  • Raccourci de la révision : Web/HTML/Element/section
  • Titre de la révision : <section>
  • ID de la révision : 941439
  • Créé :
  • Créateur : maelito
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ HTMLVersionHeader(5) }}

Résumé

L'élement HTML <section> (pour Section) représente une section générique d'un document, c'est à dire un groupement thématique de contenu, généralement avec un en-tête.

Notes d'utilisation :

  • S'il est sensé syndicaliser (pour les flux RSS entre autres) le contenu d'un élément {{ HTMLElement("section") }} de manière séparée, préférez l'utilisation d'un élément {{ HTMLElement("article") }}.
  • N'utilisez pas l'élément {{ HTMLElement("section") }} comme un conteneur générique. L'élément {{ HTMLElement("div") }} est prévu à cet effet, en particulier lorsque le découpage à pour seul but l'application de styles CSS. Une règle de base est qu'une section devrait figurer de façon logique dans le plan d'un document.

Attributs

Cet élément n'a pas d'autres attributs que les attributs globaux, communs à tous les éléments.

Exemple

<section>
  <h1>En-tête</h1>
  <p>Un tas de contenu super intéressant.</p>
</section>

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}} {{Spec2('HTML5 W3C')}}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support basique 5 {{ CompatGeckoDesktop("2.0") }} 9.0 11.10 4.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support basique 2.2 {{ CompatGeckoMobile("2.0") }} 9.0 11.0 5.0 (iOS 4.2)

Voir également

  • Les autres éléments en rapport avec la section : {{ 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") }};
  • Plan et section d'un document HTML5.

{{HTMLRef}}

Source de la révision

<p>{{ HTMLVersionHeader(5) }}</p>

<h2 id="Résumé">Résumé</h2>

<p>L'<strong>élement HTML <code>&lt;section&gt;</code></strong> (pour <em>Section</em>) représente une section générique d'un document, c'est à dire un groupement thématique de contenu, généralement avec un en-tête.</p>

<div class="note">
<p><strong>Notes d'utilisation :</strong></p>

<ul>
 <li>S'il est sensé syndicaliser (pour les flux RSS entre autres) le contenu d'un élément {{ HTMLElement("section") }} de manière séparée, préférez l'utilisation d'un élément {{ HTMLElement("article") }}.</li>
 <li>N'utilisez pas l'élément {{ HTMLElement("section") }} comme un conteneur générique. L'élément {{ HTMLElement("div") }} est prévu à cet effet, en particulier lorsque le découpage à pour seul but l'application de <a href="/fr/docs/CSS" title="/fr/docs/CSS">styles CSS</a>. <span id="result_box" lang="fr"><span class="hps">Une règle de base</span> <span class="hps">est qu'une section</span> <span class="hps">devrait</span> <span class="hps">figurer de façon logique dans</span> <span class="hps">le</span> <span class="hps">plan d'un document</span></span>.</li>
</ul>
</div>

<ul class="htmlelt">
 <li><dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu </a></dfn> <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Phrasing_content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_sectionnant" title="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, contenu palpable.</li>
 <li><dfn>Contenu permis </dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Phrasing_content">Contenu de flux</a>,</li>
 <li><dfn>Omission de balise </dfn> {{no_tag_omission}}</li>
 <li><dfn>Eléments parents permis </dfn>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Phrasing_content">contenu de flux</a>. Il faut noter que l'élément {{HTMLElement("section")}} ne doit pas être un descendant de l'élément {{HTMLElement("address")}}</li>
 <li><dfn>Interface DOM </dfn> {{domxref("HTMLElement")}}</li>
</ul>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes" rel="internal" title="https://developer.mozilla.org/fr/docs/HTML/Global_attributes">attributs globaux</a>, communs à tous les éléments.</p>

<h2 id="Exemple">Exemple</h2>

<pre class="brush: html">
&lt;section&gt;
  &lt;h1&gt;En-tête&lt;/h1&gt;
  &lt;p&gt;Un tas de contenu super intéressant.&lt;/p&gt;
&lt;/section&gt;
</pre>

<h2 id="Specifications" name="Specifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support basique</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>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support basique</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="Voir_également">Voir également</h2>

<ul>
 <li>Les autres éléments en rapport avec la section : {{ 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="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Plan et section d'un document HTML5</a>.</li>
</ul>

<p class="last">{{HTMLRef}}</p>
Revenir à cette révision