files/fr/web/html/element/article/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

---
title: '<article> : l''élément de contenu d''un article'
slug: Web/HTML/Element/article
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/article
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;article&gt;</code></strong> représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment (par exemple dans un <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">flux de syndication</a>).</p>

<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>

<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>

<p>Un document donné peut tout à fait avoir plusieurs articles. On peut par exemple avoir un blog qui affiche le texte de chaque billet au fur et à mesure que le lecteur fait défiler le contenu. Chaque billet serait un élément <code>&lt;article&gt;</code> et les sections de ces billets des éléments {{HTMLElement("section")}}.</p>

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

<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p>

<h2 id="Notes"><strong>Notes</strong></h2>

<ul>
 <li>Chaque <code>&lt;article&gt;</code> autonome, qui n'est pas imbriqué dans un autre élément <code>&lt;article&gt;</code>, devrait être identifié typiquement, en incluant un élément d'en-tête <code>&lt;header&gt;</code> qui comprendrait lui-même un élément de titre <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>.</li>
 <li>Quand un élément <code>&lt;article&gt;</code> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <code>&lt;article&gt;</code> inclus dans l'<code>&lt;article&gt;</code> représentant la parution en elle-même.</li>
 <li>Des informations à propos de l'auteur d'un élément <code>&lt;article&gt;</code> peuvent être fournies au travers de l'élément {{HTMLElement("address")}}, mais cela ne s'applique pas aux éléments <code>&lt;article&gt;</code> imbriqués.</li>
 <li>La date et l'heure de publication d'un élément <code>&lt;article&gt;</code> peuvent être donnés en utilisant l'attribut {{htmlattrxref("datetime", "time")}} d'un élément {{HTMLElement("time")}}. <em>Notez que l'attribut {{htmlattrxref("pubdate", "time")}} de {{HTMLElement("time")}} ne fait plus partie de la norme W3C HTML 5.</em></li>
</ul>

<h2 id="Exemples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;article class="film_review"&gt;
  &lt;header&gt;
    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
  &lt;/header&gt;
  &lt;section class="main_review"&gt;
    &lt;p&gt;Les dinosaures étaient super !&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="user_reviews"&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Beaucoup trop effrayant pour moi&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posté le
          &lt;time datetime="2015-05-16 19:00"&gt;16 Mai&lt;/time&gt;
          par Lisa.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Je suis d'accord, les dinosaures sont mes préférés&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posté le
          &lt;time datetime="2015-05-17 19:00"&gt;17 Mai&lt;/time&gt;
          par Tom.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Posté le
      &lt;time datetime="2015-05-15 19:00"&gt;15 Mai&lt;/time&gt;
      par Staff.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","300","500")}}</p>

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

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Contenu autorisé</dfn></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Omission de balises</dfn></th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Parents autorisés</dfn></th>
   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code>&lt;article&gt;</code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLElement")}}.</td>
  </tr>
 </tbody>
</table>

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

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

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

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>

<p>{{Compat("html.elements.article")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{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 href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et structure d'un document HTML5</a>.</li>
</ul>