Balises de structuration des pages

Les balises de structuration des pages web

Ce sont des balises qui permettent de disposer à sa convenance des blocs dans la page contenant du texte, des images ou encore des menus.

• La balise <p> </p> ou seulement <p /> est la plus connue.
  C'est une balise signifiant "paragraphe" qui agit un peu comme la balise <div> </div> à la différence qu'elle introduit une ligne vide avant le paragraphe en question et une autre ligne vide à la fin. Le but affiché de cette balise est d'aérer le texte, si on veut condenser, il faut utiliser <div> à la place.


• De nouvelles balises de structuration des pages web sont apparues avec HTML 5:
  
  
  1. La balise <section> </section>:
     c'est une balise destinée à créer des blocs dans la page. Rien de nouveau direz-vous,<div> et <p> sont parfaitement capables de faire cela ! Oui, mais ce sont là des balises "fourre-tout" que l'on emploie depuis des lustres à tous les usages! Avec cette nouvelle balise et quelques autres ci-dessous, HTML 5 a voulu nommer les différentes parties structurantes de la page, ce qui permet, par cette sémantique, de donner plus d'intelligence à une page qui annonce ainsi beaucoup plus clairement ce dont elle parle.
     La balise <section> délimite ainsi une partie de la page traitant d'un même sujet. Cette section peut tout à fait contenir un en-tête, un ou plusieurs articles (ou pas du tout), des blocs contenant des informations complémentaires et un pied (de page section).
  2. La balise <article> </article>:
     bien qu'elle puisse être utilisée au sein d'une section, cette balise est sémantiquement destinée à créer un bloc indépendant dans la page, c'est-à-dire traitant d'un sujet ou d'une information pouvant n'avoir aucun rapport avec le ou les sujets traités dans le reste de la page. Elle peut très bien contenir un en-tête et un pied.
  3. La balise <nav> </nav>:
     c'est une balise dont la vocation sémantique est de regrouper des liens de navigation (en d'autres termes un menu). On l'utilise généralement avec une liste.
  4. La balise <aside> </aside>:
     elle est destinée à recueillir des informations complémentaires non essentielles. Elle peut se trouver dans une section ou dans un article et peut recevoir des balises de titre.
  5. La balise <header> </header>:
     elle a pour but de contenir les éléments d'en-tête d'une page (logo, nom du site, nom de l'entreprise, coordonnées), les éléments d'en-tête d'une section ou encore les éléments d'en-tête d'un article (à ces titres, elle peut recevoir des balises de titre).
  6. La balise <footer> </footer>:
     elle annonce un pied de page où sont généralement regroupés des liens dirigeant vers des informations concernant le site, vers des mentions légales, vers des informations pratiques, etc ... Elle peut également être utilisée dans une section ou dans un article.

Un petit schéma pour clarifier l'utilisation de ces nouvelles balises:






• La balise <hr /> est une balise auto-fermante de type block qui se déploie sur la ligne complète:
  elle sert à insérer une ligne horizontale de séparation entre 2 éléments (2 paragraphes ou 2 sections par exemple). Elle accepte d'être stylisée: longueur du trait (par exemple 50% de la largeur de la page), épaisseur du trait, couleur du trait, positionnement du trait dans la page (à gauche, au centre, à droite, à x^% ou x^pixels du bord gauche ou du bord droit de la page), type de trait (plein, pointillés, segments, etc ) et même afficher un motif à la place !!!

xxxx    >>>

<<<     CSS: ID et classes