sémantique, balises et attributs

Le HTML est un langage assez simple, basé sur des balises qui nomment ce qu'elles contiennent. Si vous comprenez ça, vous avez tout compris

Les balises

Une balise est composée de deux éléments :

Prenons par exemple une phrase : Portez ce vieux whisky au juge blond qui fume.
Nous allons l'encadrer entre deux balises paragraphe <p> : 

				
					<p>Portez ce vieux whisky au juge blond qui fume.</p>

Vous pouvez voir que notre phrase est précédée de la balise ouvrante <p> ; et suivie de la balise fermante </p>

Les balises sont constituées d'une valeur entre deux chevrons : < et >.

Notez le / dans la balise fermante. Il est important : c'est lui qui défini si une balise est ouvrante (par son absence) ou fermante (par sa présence).

Ainsi, notre navigateur sait que Portez ce vieux whisky au juge blond qui fume. est un paragraphe et sera interprété comme tel.

La sémantique

On a vu plus haut comment baliser des éléments avec un exemple de paragraphe. Il existe beaucoup de balises, chacune servant à baliser un contenu spécifique.

Vous trouverez par exemple des balises pour :

Le but premier en HTML est de respecter la sémantique de vos éléments. Ainsi, il ne faut pas utiliser une balise pour autre chose que sa valeur !
Par exemple, vous n'allez pas utiliser une balise titre pour encadrer une image, ou une balise paragraphe pour encadrer une liste.

Il est très important de respecter une bonne sémantique ! Et cela pour deux raisons :

  1. Pour que les navigateur interprêtent bien les élements et ne se trompent pas sur leur valeur.
  2. Pour optimiser le référencement naturel de votre site internet.

Les attributs

Il est possible d'ajouter des attributs aux balises. Ces attributs servent à donner des informations compémentaires (nous verront plus tard à quoi ils peuvent servir) : 

				
					<p attr="push">Portez ce vieux whisky au juge blond qui fume.</p>

Notez ici le attr="push" qui a été ajouté à la balise ouvrante. C'est notre attribut.
Il se compose toujours d'une propriété (avant le =) et d'une valeur (après le =, entre les ").
Elle est toujours ajoutée à la balise ouvrante, et non pas la fermante !

On peut avoir pleins de types d'attributs différents :

Récapitulatif

Voilà un schéma récaptitulatif du fonctionnement des balises HTML :

Fonctionnement des balises HTML.

Exceptions : les balises autofermées

Certaines balises sont autofermées. C'est à dire qu'elles n'ont qu'une seule balise ouvrante, et aucune balise fermante.
Voilà la liste de ces balises :

Notez la présence du / avant le second chevron >. Les balises autofermantes en sont pourvue.