Éléments sémantiques en HTML5

Éléments sémantiques en HTML5

  1. Objectifs

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




  2. 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
  3. É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.
  4. É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>

  5. É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>
  6. É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>
  7. É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’é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.




Abonnez vous à notre chaîne YouTube gratuitement