Les éléments HTML

Bien utiliser le HTML

Le langage HTML est un langage à balises, comme son nom l’indique : HyperText Markup Language, Langage à Balises Hypertextes. Notez aussi que le HTML est originellement une application SGML (Standard Generalized Markup Language).

Le langage HTML est saisi dans un document de type texte, ayant pour extension .html. Le HTML est interprété par un « agent utilisateur » pour reprendre la terminologie officielle (user agent). Ces agents utilisateurs du HTML sont la plupart du temps des navigateurs web, mais il existe d’autres formes d’applications capables d’interpréter le HTML, comme les lecteurs d’écran audio, les robots d’indexation des moteurs de recherche, mais aussi des systèmes embarqués dans des appareils électroniques.

L’objectif du HTML est de décrire la structure des pages web et d’indiquer le contenu sémantique de chaque élément constitutif de ces pages. Le HTML décrit le contenu des pages web à l’aide d’éléments HTML qui sont constitués de balises. Chaque élément est dédié à l’affichage d’un type de contenu donné. Vous avez des éléments HTML qui affichent les titres, les images, les tableaux, les formulaires…

Le HTML est donc bien un langage...

Les balises et les contenus

Chaque élément HTML est composé de plusieurs parties constitutives.

La première partie est la balise d’ouverture. Cette balise commence par le caractère < et est immédiatement suivi par le nom de l’élément et se termine par le caractère >. L’élément qui permet d’insérer un paragraphe de texte est nommé p, la syntaxe de sa balise d’ouverture est la suivante : <p>.

La deuxième partie concerne les contenus rédactionnels. C’est-à-dire les éléments HTML qui contiennent du texte, comme les titres, les paragraphes, les citations… Le texte est alors écrit de manière usuelle, sans aucune balise spécifique.

La plupart des éléments HTML ont une balise de fermeture. La syntaxe reprend le principe de la balise d’ouverture, mais avec en plus le caractère / qui précède le nom de l’élément. Ce caractère indique la fin de l’élément. Si nous reprenons notre exemple de paragraphe, voici la balise de fermeture : </p>.

Voici un exemple complet pour l’élément HTML insérant un paragraphe :

<p>Le texte de mon paragraphe.</p> 

Il est important de noter que certains éléments HTML n’ayant pas de contenu...

Les attributs des éléments

Les attributs permettent de modifier le comportement standard des éléments HTML. Les éléments HTML peuvent ne contenir aucun attribut, ou un seul et parfois plusieurs. Certains attributs sont obligatoires, d’autres sont facultatifs. La plupart des attributs ont des valeurs, mais pas tous. Les attributs qui ne nécessitent pas de valeur sont qualifiés de booléens. Dans tous les cas, les attributs se placent dans la balise d’ouverture des éléments.

Prenons comme premier exemple l’attribut facultatif qui permet d’identifier de manière unique un élément HTML. C’est l’attribut id. Cet attribut doit avoir une valeur qui est indiquée entre guillemets (non obligatoires, mais très fortement conseillés) et qui est précédée par le signe =. Voici un exemple :

<p id="introduction">Le contenu de mon paragraphe.</p> 

Prenons comme deuxième exemple un attribut obligatoire. Pour insérer une image, nous utilisons l’élément <img> et son attribut obligatoire src qui permet d’indiquer le chemin d’accès à la source de l’image. Voici une syntaxe simple :

<img src="mon-image.jpg"> 

Si un élément HTML possède plusieurs attributs, ils sont séparés...

L’imbrication des éléments

Les éléments HTML permettent de structurer le contenu de vos pages web. Cette structuration va de pair avec l’imbrication des éléments HTML. Par exemple dans un article, inséré avec l’élément <article>, nous pouvons imbriquer un élément d’en-tête <header>, un ou plusieurs paragraphes <p> et un pied de page <footer>. Nous avons alors une hiérarchie des éléments : <header>, <p> et <footer> sont imbriqués dans <article>. Ces éléments sont les enfants de l’article qui est leur parent. S’il y a plusieurs enfants <p>, ils sont frères.

Dans les paragraphes <p>, nous pouvons parfaitement appliquer une mise en forme sémantique avec l’élément <strong> qui permet d’appliquer une forte emphase. Dans ce cas, l’élément <strong> est enfant de l’élément <p>.

Avec ces exemples, nous voyons, en simplifiant, deux types d’éléments HTML. Les éléments de structure et les éléments de mise en forme du texte. Cette notion est héritée du HTML 4. Dans cette recommandation, les éléments HTML étaient typés...

<!-- Le texte de mon commentaire -->