3.7 Structure HTML

• un en-tête – header similaire sur chaque page et constituant la navigation principale du site
• un contenu principal – main qui change pour chaque page: une liste d’articles, un article unique avec des commentaires, une page à propos…
• une barre latérale – sidebar qui relie aux archives mensuelles et aux catégories
• un pied de page – footer pour des liens supplémentaires vers des pages moins importantes

Il existe certains éléments HTML structurels que vous pouvez utiliser comme conteneurs pour d’autres éléments.

Entête – Header

L’en-tête – header est généralement le premier élément HTML du code. Il s’agit d’une introduction à la page Web, avec le logo, un slogan et des liens de navigation.

<header>
  <p>
    <a>
      <img src="mon-logo.jpg" alt="logo ex-nihilo">
    </a>
    <em>Un site Web cool</em>
  </p>
  <ul>
    <li>
      <a href="accueil.html">Accueil</a>
    </li>
    <li>
      <a href="a-propos.html">A propos</a>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
  </ul>
</header>

Pied de page – Footer

Contrairement à l’en-tête – header, le pied de page – footer est généralement le dernier élément d’une page, où les liens de navigation principaux sont répétés et les liens secondaires ajoutés.

<footer>
  <p>ex-Nihilo/descloussurlesnuages | ©2018</p>
  <ul>
    <li>
      <a href="accueil.html">Accueil</a>
    </li>
    <li>
      <a href="a-propos.html">A propos</a>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="confidentialite.html">Politique de confidentialité</a>
    </li>
    <li>
      <a href="tou.html">Conditions générales d'utilisation</a>
    </li>
  </ul>
</footer>

Contenu principal – Main

L’élément principal – main contient, comme son nom l’indique, le contenu le plus important de la page, celui qui définit l’objectif de la page.

Alors que toutes les pages Web d’un site Web contiennent des éléments communs (comme l’en-tête, la navigation, le pied de page, etc.), main se concentre sur un contenu unique.

Par exemple, l’article que vous lisez actuellement fait partie de l’élément principal – main de cette page Web, car son contenu est unique sur l’ensemble du site Web ex-nihilo.

De côté – Aside

L’élément de côté – aside se trouve généralement à côté de l’élément principal –  main et contient des informations supplémentaires relatives au contenu principal.

Section

L’élément section permet de grouper.

Les sections elles-mêmes n’ont pas de signification particulière. Il s’agit plus de la relation entre ses éléments enfants que de sa propre signification dans la page globale.

Les sections divisent logiquement vos propos pour regrouper un contenu similaire et donner davantage de sens à la structure de la page.