L'attribut ID

Tous les éléments HTML peuvent avoir un identifiant avec l’attribut id — c’est un attribut universel.

<h2 id="introduction">Introduction</h2>

La présence d’un ID crée une ancre dans la page, qui permet au navigateur de défiler jusqu’à l’élément en question. Dans l’URL de ta page, ajoute un # suivi de l’ID pour faire défiler le navigateur jusqu’à l’ancre :

https://site.com/page#introduction

Pour créer un lien vers une ancre au sein de la même page, il suffit d’écrire le nom de l’ancre dans href :

<a href="#introduction">Retour à l'introduction</a>

Comme un ID sert à identifier un élément précis, il ne faut pas donner le même ID à plusieurs éléments d’une page.

Si ton site est uniquement fait de HTML et de CSS, tu n’auras sans doute pas besoin des ID. Ils seront utiles pour réaliser des formulaires, ou pour cibler un élément précis en JavaScript. Tu peux également cibler les ID dans une règle CSS.

Le sélecteur d’ID en CSS

Souviens-toi, en CSS, on cible un élément HTML comme ceci…

div {
  ...
}

…et on cible une classe avec un point.

.article {
  ...
}

De la même manière, on peut cibler un ID avec un croisillon :

#introduction {
  ...
}

Et comme toujours, on peut combiner plusieurs sélecteurs pour former une règle complexe. Ici, le paragraphe avec l’ID alert sera en rouge.

p#alert {
  color: red;
}