les éléments HTML vont donc pouvoir contenir des attributs qu’on va placer au sein de la balise ouvrante de ceux-ci. Pour certains éléments, les attributs vont être facultatifs tandis que pour d’autres ils vont être obligatoires pour garantir le bon fonctionnement du code HTML.
Un attribut contient toujours une valeur, qu’on peut cependant parfois omettre dans le cas des attributs ne possédant qu’une seule valeur (car la valeur est alors considérée comme évidente).
Exemple d’utilisation d’un attribut HTML
Prenons ici l’exemple de l’élément a qui est l’abréviation de « anchor » ou « ancre » en français. Cet élément va principalement nous servir à créer des liens vers d’autres pages. Pour le faire fonctionner correctement, nous allons devoir lui ajouter un attribut href pour « hypertexte reference » ou « référence hypertexte » en français. C’est l’attribut href qui va nous permettre de préciser la cible du lien (l’URL), c’est-à-dire la page de destination du lien en lui passant l’adresse de la page en question en valeur.
Pour aller plus loin dans la définition et le comportement de l’élément, la balise de lien peut être enrichie par d’autres attribut, testez le code si dessous par vous même :
<a href="https://labo.weasywyg.com" target="_blank" title="Ouvrir le lien dans un nouvel onglet">Cliquez surl le lien</a>Dans cet exemple, nous connaissons déjà l’attribut href, deux autres sont venus apporter des définition supplémentaires :
- L’attribut target permet de définir l’endroit où le lien s’ouvrira. Ses valeurs principales sont « _self » qui ouvrira le lien dans le même onglet, il s’agit de la valeur par défaut, ici nous utilisons « _blank » pour forcer l’ouverture du lien dans un nouvel onglet.
- L’attribut title, défini quant à lui un titre visible par l’internaute dans une bulle contextuelle apparaissant au survol du lien par le curseur de la sourie.
Les attributs les plus couramment utilisés et leur balise
| Attribut | Définition de l’attribut | Valeur acceptée | Balise d’application | Utilisation |
|---|---|---|---|---|
| href | Référence du lien hypertext | « URL » | <a> | Obligatoire |
| title | Titre de l’élément | « Texte court » | <abbr>, <img/>, <a> | Recommandé |
| target | Définie l’endroit où s’ouvrira le lien | « _blank », « _self »,… | <a> | Facultatif |
| src | Défini la source externe d’un élément (ex : une image, une feuille de style, un script…) | « URL » | <img/>, <link/>, <script> | Obligatoire dans une balise auto-fermante |
| alt | Description alternative d’une image. Permet l’accessibilité de l’élément | « texte court » | <img/> | Recommandé |
| rel | Indique le type de relation entre la page cible du lien et celle où est situé ce lien. | « stylesheet » (feuille de style css), « alternate » (contenu alternatif), « author » (lien vers l’auteur), « nofolow » (indique au moteur de recherche de ne pas indexer le lien),… | <a>, <link/> | Facultatif |