Structure

  • header

  • nav

  • main

  • section

  • article

  • aside

  • footer

1
<!DOCTYPE html>
2
<html>
3
4
  <head>
5
    <meta charset="UTF-8" />
6
    <title>Structure de base</title>
7
  </head>
8
9
  <body>
10
11
    <header>
12
      Entête du site
13
      <nav>
14
        navigation
15
      </nav>
16
    </header>
17
18
    <main> 
19
      <h1>partie principale du site</h1>
20
21
      <section>
22
        <h2>Section 1</h2>
23
        <article>
24
          <h3>Article 1</h3>
25
        </article>
26
        <article>
27
          <h3>Article 2</h3>
28
        </article>
29
      </section>
30
31
      <section>
32
        <h2>Section 2</h2>
33
        <article>
34
          <h3>Article 3</h3>
35
        </article>
36
        <article>
37
          <h3>Article 4</h3>
38
        </article>
39
      </section>
40
41
      <aside>
42
        <p>Infos complémentaires</p>
43
      </aside>
44
45
    </main>
46
47
    <footer>Pied de page</footer>
48
49
  </body>
50
51
</html>


  Utilisation de main 
 Entête du site  
 
 
partie principale du site
 
 
Section 1
 
 
Article 1
 
 
 
Article 2
 
 
 
 
Section 2
 
 
Article 3
 
 
 
Article 4
 
 
  
 
Pied de page
 


Interprétation de balises
Définitionheader
Balise entête, on y place l'accroche du site et le menu de navigation. Cependant, on peut créer un header pour chaque section du site.
Définitionnav
La balise nav permet d'afficher le menu de navigation du site. Il peut y avoir plusieurs balises nav dans la même page.
1
<nav>
2
  <ul>
3
    <li>menu1</li>
4
    <li>menu2</li>
5
  </ul>
6
</nav>
Définitionmain
La balise main correspond au contenu principal de la page. Il ne peut y avoir qu'une seule balise main par page.
Définitionsection
Une section est une sous partie de votre contenu main, de ce fait, elle devrait commencer logiquement par un titre.
Définitionarticle
L'article est similaire à une section. Mais, contrairement à la section, l'article doit se suffire à lui-même. C'est à dire qu'il peut être compris sans les autres parties.
C'est pourquoi, on peut retrouver des articles à l'intérieur de section.
Définitionaside
La balise aside contient des contenus annexes au propos principal de la page.
Par exemple : les coordonnées de l'auteur, la météo, la citation du jour, des liens vers d'autres articles...
Définitionfooter
Balise pied de page, on y place le copyright, les mentions légales... Cependant, on peut créer un footer pour chaque section du site.