Apprendre le HTML : le principe des balises

Publié le - Mis à jour le 02-06-2016

Mon nom signifie HyperText Markup Langage, ce qui, en français, peut se traduire par : « langage de balisage d’hypertexte ». Je suis le langage qui sert à coder les pages web, et ce qui caractérise d’abord ces pages, c’est qu’elles sont reliées entre elles selon le principe des liens hypertextes, ce qui explique pourquoi on m’appelle un « langage d’hypertexte ». Mais pourquoi suis-je aussi appelé un langage de « balisage » ?

Au bord de la mer, des balises flottant sur l’eau peuvent délimiter l’espace en mer d’un chenal à bateaux. De même, le « balisage » d’une page HTML va délimiter et structurer les parties de cette page, en appliquant à chacune de ces parties diverses propriétés qui seront interprétées de manière différente par le navigateur selon le type de balises utilisées.

Bien sûr, il ne va pas s’agir ici de bouées en plastique, mais de chaînes de caractères qui vont délimiter des parties de la page, des portions de texte ou des images, pour leur appliquer différentes propriétés, mais aussi pour les structurer les unes par rapport aux autres.

balises

 

Les différents types de balises

On distingue des balises « ouvrantes », qui indiquent le début de la portion de page web à délimiter, et des balises « fermantes », qui en indiquent la fin.

Les balises ouvrantes sont toujours de la forme <exemple> et les balises fermantes de la forme </exemple> où « exemple » indique le nom de la balise.

Tous les éléments du contenu d’une page HTML sont encadrés par une balise ouvrante et une balise fermante, à part quelques exceptions (dont les plus notables sont la balise <br/>, qui permet d’aller à la ligne, la balise <img> qui permet d’insérer une image dans la page HTML, et les balises <meta> et <link> sur lesquelles je reviendrai plus tard).
 

S’imbriquer sans se croiser

Une balise ouvrante et sa balise fermante correspondante forment donc pour ainsi dire un conteneur enserrant du contenu. Ces conteneurs s’imbriquent comme des poupées russes :

  1. <exemple1>contenu<exemple2>contenu</exemple2></exemple1>

Mais si les balises s’imbriquent, elles ne peuvent en revanche pas se croiser. Par exemple, une structure de ce type est interdite :

  1. <exemple1>contenu<exemple2>contenu</exemple1></exemple2>

 

Les attributs des balises

Afin de définir des propriétés supplémentaires, on peut ajouter un ou plusieurs « attributs » à une balise. Les attributs se placent toujours dans les balises ouvrantes, ils sont suivis du signe égal et de leur valeur entre guillemets :

  1. <nom-de-la-balisenom-de-l-attribut="valeur-de-l-attribut">
  2. contenu
  3. </nom-de-la-balise>

Des exemples concrets vont bientôt suivre !

Auteur :

Recommandations