Le langage html

Body Header Footer Nav Main Article Section Div Aside Figure Pre Span

Balise body

La balise < body > , correspond à la partie principale du code html. C'est dans celle-ci, vous allez y retrouver toutes les autres balises.

Balises conteneurs

Il existe différentes balises conteneurs que l'on doit utiliser uniquement dans le body. Parmi eux, on retrouve main, section, div, aside ou encore article.

Balise main

La balise < main > , correspond au contenu principal de votre page web. Autrement dit c'est Le sujet que vous souhaitez mettre en avant sur votre page web. Il ne peut y avoir qu'un seul élément main par page.

Balise article

La balise < article > , est un conteneur autonome que vous pouvez intégrer à une section ou document de votre page web.
Comme dans le body,l'article peut également intégrer les balises header et footer représentent respectivement l'en-tête et le bas de page, mais également en son centre des balises div, section ou article.

Exemple (passer la sourie dessus):

< article >

< !-- Début de l'en-tête de l'article -->
 < header >
 < / header >
< !-- Fin de l'en-tête de l'article -->

< !-- Début du bas de page de l'article -->
 < footer >
 < / footer >
< !-- Fin du bas de page de l'article -->

< / article >

Balise section

La balise < section > , représente une section de votre document, elle permet par exemple de regrouper des contenus:

  • Une section commence généralement avec un titre.
  • Il vous faudra faire une distinction entre les div, article et section.
  • Si l'objectif est de mettre en forme votre code, la balise div est celle qu'il faut.
  • Si l'objectif est de mettre du contenu pertinent, la balise article est celle qu'il faut.

Balise div

La balise < div > , est un conteneur ayant pour objectif d'organiser le contenu de votre page. Contrairement aux balises sections et articles, il n'est pas défini pour avoir une application spécifique.
Enfin, le div est généralement utilisé avec les attributs class ou id.
Ces deux attributs permettent d'appliquer du code css à ces conteneurs et donc de modifier à votre guise leur forme, leur couleur, etc...
Bien sûr, la balise div doit être utilisée, lorsqu'une balise sémantique (article, section) ne peut être utilisée.

  • L'attribut id, permet d'appeler votre div, section ou touts autres conteneurs dans votre page CSS. Cela permet également de nommer vos parties. Voir CSS.
  • L'attribut class, permet d'appeler votre div, section ou touts autres conteneurs dans votre page CSS. Cela permet également de nommer vos parties. Ils se différencient de l'id dans la façon de les appeler dans le css ou dans le code html.
    De plus l'id ne peut être utilisé qu'une seule fois par page, alors que vous pouvez utiliser plusieurs fois le même attribut class. Ainsi l'attribut id est beaucoup plus spécifique.
Exemple:

< !-- En CSS on appel une section avec un attribut id comme cela : #Nom_de_votre_choix{} -->
< div id = "Nom_de_votre_choix" >

< !-- En CSS on appel une section avec un attribut class comme cela : .Nom_de_votre_choix{} -->
< div />
< div class = "Nom_de_votre_choix" >

< div />

Balise aside

La balise < aside > , qui signifie qu'une "aparté" en français. Cette balise permet fait parti d'un document, par exemple d'une section dont le contenu n'a aucun rapport avec le contenu principal de votre page web. Les apartés, ici la balise aside, est en générale présentes sous la forme d'encadrer ou de boîtes de légende.

Voici un exemple de code regroupant tout les conteneurs en un code. Bien sûr vous pouvez avoir des pages sans certaines balises, certaines ne sont pas obligatoires.

Exemple:

< !-- Début de votre body et donc début de votre page -->
< body >

< !-- Début du header de la page -->
 < header >
< !-- Début de la navigation de la page -->
  < nav >

  < / nav >
< !-- Fin de la navigation de la page -->
 < / header >
< !-- Fin du header de la page -->

< !-- Début du main c'est à dire le contenu principale de la page -->
 < main >
< !-- Début d'une section nommé Nom de la section avec l'attribut id -->
  < section id = "Nom de la section" >
< !-- Début d'un div nommé Nom du div avec l'attribut class -->
   < div class = "Nom du div" >

   < / div >
< !-- Fin du div -->
  < / section >
< !-- Fin de la première section -->

< !-- Début de la deuxième section -->
  < section >
< !-- Début d'un premier article "vous pouvez mettre header et footer dans l'article" -->
   < article class = "Article_1" >

   < / article >
< !-- Fin du premier article -->

< !-- Début du deuxième article de la section -->
   < article class = "Article_2" >

   < / article >
< !-- Fin du deuxième article de la section -->
  < / section >
< !-- Fin de la section -->

< !-- Début du aside, présent dans le main -->
  < aside >
  < / aside >
< !-- Fin du aside, présent dans le main -->

 < / main >
< !-- Fin du main -->

< !-- Début du footer, ici correspond au bas de la page -->
 < footer >
 < / footer >
< !-- Fin du footer -->

< / body >
< !-- Fin du body et donc fin de page-->

Des balises conteneurs moins connues

Bien entendu il existe d'autres balises que l'on utilisent moins dans la création d'un site web. Je vais les explicité dans l'ordre décroisant d'utilisation.

Balise figure

La balise < figure > , est un espace dans le quel on retrouve souvent une image, une vidéo, un schéma ou encore un code par exemple. En générale cette figure englobe la balise < figcaption > , qui correspond à la légende du contenu que vous avez mit à l'intérieur.

Exemple:

< !-- Début figure -->
< figure >

 Votre contenu photos, vidéos, etc ...

 < !-- Début figcaption (légende) -->
 < figcaption />
  Votre texte de légende
 < figcaption >
 < !-- Fin figcaption -->

< figure />
 < !-- Fin figure -->

Balise pre

La balise < pre > , est une balise idéale pour afficher du code car elle permet de restituer le texte ou le code de la même méthode que vous l'avez écrit. Si vous voulez faire un dessin (d'ASCII art) avec des caractères spéciaux ou mettre du code par exemple, la balise pre vous permettra de le faire sans vous souciez des balises.

Balise span

La balise < span > , est un conteneur dit en ligne universel pour exprimer du contenu. Cela ne représente rien de particulier. Il est utilisé pour regrouper différents éléments dans l’objectif de mettre en forme à l'aide des attributs class et id qu'on utilise ensuite dans le CSS.Il est utilisé aussi pour dire qu'un mot est dans une certaine langue avec l'attribut lang. L'élément span est très similaire à l'élément div,mais contrairement au div span n'est pas un élément bloc mais ligne. Il se met donc dans des paragraphes par exemple.

Exemple:

< !-- en langage html on a : -->

< !-- Ouverture balise texte, le texte est en bleue pour facilité la lecture -->

< p > On observe comment fonctionne la balise span. elle permet de mettre en < span style = "color:red;" > couleur < / span > certains mots uniquement.
< / p >

Voici le rendu sur la page web :
On observe comment fonctionne la balise span. elle permet de mettre en couleur certains mots uniquement.