Les attributs HTML fournissent des détails additionnels sur les différents éléments.
Tous les éléments HTML peuvent avoir des attributs qui leur sont assignés, donnant plus d'information à propos de l'élément. Les attributs prennent toujours la forme d'une paire clé-valeur sous la forme :
clé="valeur" (clé étant le nom de l'attribut, suivi du signe égal, puis d'une valeur entre guillemets)
Voici les exemples les plus fréquents avec lesquels il est important d'être familiers :
href="URL"
L'attribut href (hypertext reference) est utilisé dans les éléments <a> pour créer des liens hypertextes. L'URL, relative ou absolue, est entrée entre guillemets pour créer un lien fonctionnel. Sans l'attribut href les liens ne fonctionneraient pas. L'attribut href est aussi utilisé dans les éléments <link> de l'entête pour lier une feuille de style CSS à une page.
rel="relation"
L'attribut rel (relation) est utilisé dans l'élément <link> pour identifier qu'elle est la relation entre un lien référencé avec href et le présent document. Par exemple, dans <link rel="stylesheet" href="css/styles.css">, il indique au navigateur que le fichier style.css situé dans le répertoire css est une feuille de style. Dans <link rel="icon" href="images/favicon.ico">, il indique au navigateur que le fichier favicon.ico est une icône à présenter dans l'onglet du navigateur, située dans le répertoire images.
title="Infobulle à propos d'un élément"
L'attribut title crée une infobulle qui apparait lorsqu'un visiteur passe son pointeur au dessus d'un élément en particulier (état « hover »). On le voit parfois utilisé dans les liens hypertextes et dans les images. Cet attribut est moins utilisé de nos jours puisqu'il n'a aucun effet sur les appareils mobile dont l'écran est tactile et pour lesquels l'état « hover » d'un lien n'existe pas.
src="URL"
L'attribut src (source) est utilisé dans les éléments <a> pour créer des liens hypertextes. L'URL, relative ou absolue, est entrée entre guillemets pour créer un lien fonctionnel. Sans l'attribut href, les liens ne fonctionneraient pas.
alt="Description de l'image"
L'attribut alt (alternative) doit absolument être inclus dans tous les éléments <img> utilisés à des fins autres que purement décoratives. Le texte présent dans l'attribut alt sera par exemple affiché si le lien vers une image est brisé, ou lu par les lecteurs d'écrans pour les personnes malvoyantes.
class="sélecteur-de-classe"
L'attribut class est utilisé afin de permettre de sélectionner tous les éléments auxquels il a été affecté pour les viser avec du code CSS ou JavaScript. Par exemple, <h2 class="note"> ou <p class="note"> permet de sélectionner tous éléments ayant la classe « note » (avec le sélecteur .note) ou seulement les h2 ayant la classe note (avec le sélecteur h2.note) ou seulement les paragraphes ayant la classe note (avec le sélecteur p.note). Pensez à l'attribut class comme le groupe classe dont vous faites partie.
id="nom-unique"
L'attribut id (identity) est utilisé pour identifier un élément de manière unique sur la page. Un seul élément peut avoir un id donné. On utilise l'attribut id pour créer des sélecteurs très spécifiques pour CSS et JavaScript, ou pour créer des liens de destination dans un sommaire pour une longue page. Par exemple, le titre <h2 id="intro">Introduction</h2> pourrait être visé par le lien <li><a href="#intro">Introduction</a></li> dans un sommaire. Pensez à l'attribut id comme votre numéro d'assurance sociale ou votre code DA au collège qui vous identifient de manière unique. Personne d'autre n'a le même numéro.
style="règles CSS"
L'attribut style peut être utilisé pour appliquer des styles CSS à un élément en particulier. Par exemple, <p style="color: red;"> fait en sorte que le paragraphe en question sera écrit en rouge. C'est toutefois une mauvaise pratique, sauf pour des tests rapides ou pour du code HTML à envoyer par courriel. La mise en forme CSS devrait être écrite dans une feuille de style externe.
Il existe plusieurs autres attributs et vous en verrez sûrement en lisant le code HTML d'autres personnes ou de sites que vous aimez. Mais les huit ci-dessus reviendront le plus souvent.