Balises sémantiques de HTML 5

Dans ce module nous allons voir les balises sémantiques introduites par le HTML 5. Les balises sémantiques donnent un sens à la structure des sites. Elles permettent aux robots d'indexation de comprendre l'importance et la récurrence de différents éléments.

La balise header

Méthode

  • À ne pas confondre avec la balise head,

  • Correspond à un groupe d'introduction ou une aide à la navigation.

1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
</body>

La balise nav

Méthode

  • Représente une section dans une page donnant des liens pour accéder à d'autres pages,

  • Peut apparaître à différents endroits d'un document HTML,

  • Permet de faire une navigation principale et des navigations secondaires, tertiaires, etc.

1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
6
   <nav>
7
      <p>navigation du site</p>
8
   </nav>
9
</body>
La balise main
Méthode
  • Représente le contenu principal d'une page web,
  • Doit être unique sur une page,
  • Elle ne doit pas contenir des éléments présents sur plusieurs pages (menu, footer, etc.),
  • Elle ne doit pas être un élément enfant d'une autre balise sémantique HTML.
1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
6
   <nav>
7
      <p>navigation du site</p>
8
   </nav>
9
10
   <main>
11
      <p>contenu principal</p>
12
   </main>
13
</body>
La balise footer
Méthode
  • Regroupe les contenus du pied d'une page,
  • Peut aussi regrouper les contenus d'un pied de bloc.
1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
6
   <nav>
7
      <p>navigation du site</p>
8
   </nav>
9
10
   <main>
11
      <p>contenu principal</p>
12
   </main>
13
14
   <footer>
15
      <p>pied de page du site</p>
16
   </footer>
17
</body>
La balise section
Méthode
  • Représente un groupement thématique de contenu,
  • A généralement une en-tête, un titre de section,
  • On peut avoir autant de blocs section que souhaités sur une page web.
1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
6
   <nav>
7
      <p>navigation du site</p>
8
   </nav>
9
10
   <main>
11
      <section>
12
13
      </section>
14
      <section>
15
      
16
      </section>
17
   </main>
18
19
   <footer>
20
      <p>pied de page du site</p>
21
   </footer>
22
</body>
La balise aside
Méthode
  • Représente une portion de contenu contextuel,
  • Est directement ou indirectement liée aux éléments qui l'entourent,
  • Peut être placée dans plusieurs éléments du site.
1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
6
   <nav>
7
      <p>navigation du site</p>
8
   </nav>
9
10
   <main>
11
      <section>
12
13
      </section>
14
      <section>
15
      
16
      </section>
17
18
      <aside>
19
20
      </aside>
21
   </main>
22
23
   <footer>
24
      <p>pied de page du site</p>
25
   </footer>
26
</body>
La balise article
Méthode
  • Désigne une partie du document potentiellement autonome,
  • C'est un élément qui renvoie vers une page qui lui est propre,
  • On peut tout à fait les multiplier sur une même page web.
1
<body>
2
   <header>
3
      <p>logo du site</p>
4
   </header>
5
6
   <nav>
7
      <p>navigation du site</p>
8
   </nav>
9
10
   <main>
11
      <section>
12
         <article></article>
13
         <article></article>
14
         <article></article>
15
      </section>
16
      <section>
17
         <article></article>
18
         <article></article>
19
         <article></article>      
20
      </section>
21
22
      <aside>
23
24
      </aside>
25
   </main>
26
27
   <footer>
28
      <p>pied de page du site</p>
29
   </footer>
30
</body>