Attributs

Ce cours traite des attributs et de leur utilité au sein des balises HTML.

Les attributs

Les attributs sont des valeurs supplémentaires au sein d’une balise HTML, permettant d’apporter des précisions, de modifier leur comportement, etc. Ils sont placés dans les balises ouvrantes et n’ont pas d’ordre particulier.

Il arrive que certains attributs ne soient pas obligatoires mais fortement conseillés, pour améliorer le référencement, par exemple ; tandis que pour d’autres éléments HTML, l’utilisation de certains attributs spécifiques est obligatoire. Le rôle des attributs est de compléter un élément, en lui fournissant, par exemple, une identité, ou encore en y ajoutant des informations sur la manière dont l’élément doit s’afficher.

Un attribut ne contient qu’une seule valeur. Un mot, en général. Si plusieurs mots doivent être écrits au sein de l’attribut, il est possible d’ajouter un tiret entre chacun de ces mots, pour n’en former plus qu’un.

La syntaxe d’un attribut est simple :

<element attribut="valeur-de-l-attribut">Contenu</element>

Dans le cours précédent, des attributs ont déjà été utilisés avec des balises. Par exemple, pour ajouter une image au sein d’une page web, il faut utiliser le code HTML suivant :

<img src="logo.png" alt="logo" />

Dans cette balise, l’élément <img /> est d’abord complété par l’attribut src (pour source), permettant de préciser quelle image insérer et où elle se trouve, et également par l’attribut alt, permettant d’afficher un texte alternatif en cas de problème d’affichage de l’image, ou qui peut permettre aux personnes malvoyantes visitant le site de savoir que l’image est en réalité un logo (certains équipements spéciaux permettent la lecture “à voix haute” du contenu de l’attribut alt).

Remarque : Les guillemets autour des valeurs données aux attributs ne sont pas obligatoires. Cependant, le W3C, l’organisme chargé de standardiser l’utilisation du langage HTML, recommande de les utiliser. Bien que les guillemets doubles soient les plus utilisés, des guillemets simples peuvent également entourer les valeurs des attributs. Par souci de cohérence et d’habitude, nous vous recommandons d’utiliser systématiquement les guillemets doubles.

Exemple :

<p style='color:blue'>Je suis un paragraphe</p>

Les attributs de largeur et de hauteur

Les attributs de largeur et de hauteur, width et height en anglais, permettent de préciser la taille de l’image, mais pas de modifier ces valeurs. En fait, lorsque ces attributs sont renseignés, le navigateur réserve une place avec la largeur et la hauteur spécifiée sur la page pour pouvoir afficher l’image. Cela permet d’éviter un changement de mise en page lors du chargement de la page.

Exemple :

<img src="logo.jpg" alt="logo" width="300px" height="200px">

Dans l’exemple ci-dessus, l’image a une largeur définie à 300 pixels et une hauteur définie à 200 pixels.

L'attribut de style