files/fr/web/html/element/footer/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

---
title: <footer>
slug: Web/HTML/Element/footer
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/footer
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;footer&gt;</code></strong> représente le pied de page de la section ou de la <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> la plus proche. Un pied de page ou de section contient habituellement des informations sur l'auteur de la section, les données relatives au droit d'auteur (<em>copyright</em>) ou les liens vers d'autres documents en relation.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/footer.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>

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

<p>Comme tous les éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>

<ul>
 <li>Les informations sur l'auteur doivent être placées dans un élément {{HTMLElement("address")}} et incluses dans l'élément <code>&lt;footer&gt;</code>.</li>
 <li>L'élément <code>&lt;footer&gt;</code> n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">plan</a>.</li>
</ul>

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

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

<pre class="brush: html">&lt;footer&gt;
  Quelques informations de copyright ou bien quelques informations sur l'auteur de l'article.
&lt;/footer&gt;
</pre>

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

<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>

<h2 id="Accessibilité">Accessibilité</h2>

<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> rencontre un problème qui fait que <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">le balisage de rôle (landmark role)</a> n'est pas annoncé. Pour corriger ce point, on ajoutera <code>role="contentinfo"</code> à l'élément <code>footer</code>.</p>

<ul>
 <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">Bug 146930 pour WebKit</a></li>
</ul>

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

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> sans élément descendant qui soit <code>&lt;footer&gt;</code> ou {{HTMLElement("header")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code>&lt;footer&gt;</code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("header")}} ou d'un autre élément <code>&lt;footer&gt;</code>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</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#the-footer-element', '&lt;footer&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-footer-element.html#the-footer-element', '&lt;footer&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.footer")}}</p>

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

<ul>
 <li>Les autres éléments HTML en lien avec les sections :
  <ul>
   <li>{{HTMLElement("body")}}</li>
   <li>{{HTMLElement("nav")}}</li>
   <li>{{HTMLElement("article")}}</li>
   <li>{{HTMLElement("aside")}}</li>
   <li>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</li>
   <li>{{HTMLElement("hgroup")}}</li>
   <li>{{HTMLElement("header")}}</li>
   <li>{{HTMLElement("section")}}</li>
   <li>{{HTMLElement("address")}}</li>
  </ul>
 </li>
 <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li>
 <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : le rôle <code>contentinfo</code></a></li>
</ul>