Éléments sémantiques en HTML5

Objectifs

• Connaitre les éléments sémantiques en HTML5

Présentation

• Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ;
• Contrairement à des éléments génériques comme <span> ou <div> qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style commun

Élément <section>

• Selon la documentation HTML5 du W3C: "Une section est un regroupement thématique de contenu, généralement avec un en-tête".
• Une page d'accueil peut normalement être divisée en sections pour une introduction, un contenu et des informations de contact.

Élément <article>

• L'élément <article> spécifie un contenu indépendant et autonome.
• Un article doit avoir un sens en lui-même et il devrait être possible de le lire indépendamment du reste du site Web.
• L'élément <article> fait partie des nouvelles balises sémantiques html5. Elle permet d'introduire une page, une section.

<article>
            <header>
                         <h1>Titre du header de l’article: h1</h1>
                                <p>contenu</p>
            </header>

           <p>Contenu de l’article, premier paragraphe.</p>
Contenu de l’article, deuxième paragraphe.</p>
            <footer>
                        <h3>Titre du footer de l’article: h3</h3>
                              <p>contenu</p>
            </footer>
</article>

Élément <nav>

• L'élément <nav> définit un ensemble de liens de navigation.
• L'élément <nav> possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)
• L’élément <nav> est un choix de prédilection pour la navigation principale (souvent dans <header> ) et éventuellement pour les navigations annexes de moindre valeur (souvent dans <footer>).

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Élément <aside>

• L'Élément <aside> définit un contenu en dehors du contenu dans lequel il est placé.
• L'Élément <aside> définit un contenu à part du contenu général. Le contenu mis de coté par la balise <aside> doit être lié au contenu environnant.
• Une page web est bien souvent dotée d’un contenu principal et d’informations connexes qui ne sont pas essentielles à sa compréhension. On parle alors de contenu tangentiel, et l’élément <aside> est destiné à l’abriter.

<aside>
           <h3>Nos cours apcpedagogie</h3>
                  <ul>
                       <li><a href="#">site apcpedagogie</a></li>
                       <li><a href="#">apcpedagogie cours HTML</a></li>
                       <li><a href="#">apcpedagogie cours C sharp</a></li>
                       <li><a href="#">apcpedagogie exercices HTML</a></li>
                  </ul>
</aside>

Élément <header>

• <header> fait partie des nouvelles balises sémantiques html5. Elle permet d'introduire une page, une section.

<header> 
<img src="images/logo.png" alt="logo de mon site" title="mon logo"/>
<h1>Le slogan de votre site</h1>
    <nav>
        <ul>
            <li>Home</li>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
        </ul>      
    </nav>  
</header>

Élément <footer>

• L'élément <footer> spécifie un pied de page pour un document ou une section.
• L'élément <footer> doit contenir des informations sur son élément conteneur.
• Un pied de page contient généralement l'auteur du document, des informations de copyright, des liens vers les conditions d'utilisation, des informations de contact, etc.

Toujours dans la liste des balises sémantiques html5, footer peut se trouver au pied de la page ou au pied de chaque section.