HTML attribut id

L'attribut id en HTML est utilisé pour spécifier un identifiant unique pour un élément HTML.

Il ne peut pas y avoir plus d'un élément avec le même id dans un document HTML.

L'attribut id

L'attribut id spécifie un identifiant unique pour un élément HTML. La valeur de cet attribut doit être unique dans le document HTML.

L'attribut id est utilisé pour faire référence à une déclaration de style spécifique dans une feuille de style. Il est également utilisé par JavaScript pour accéder et manipuler l'élément avec cet id spécifique.

La syntaxe pour l'id est la suivante : écrivez un caractère dièse (#), suivi d'un nom d'id. Ensuite, définissez les propriétés CSS entre accolades {}.

Dans l'exemple suivant, nous avons un élément <h1> qui pointe vers le nom d'id "myHeader". Cet élément <h1> sera stylé selon la définition de style #myHeader dans la section head :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">Mon En-tête</h1>

</body>
</html>
Essayez-le vous-même »

Remarque : Le nom d'id est sensible à la casse !

Remarque : Le nom d'id doit contenir au moins un caractère, ne peut pas commencer par un chiffre et ne doit pas contenir d'espaces (espaces, tabulations, etc.).

Différence entre Classe et ID

Un nom de classe peut être utilisé par plusieurs éléments HTML, tandis qu'un nom d'id ne doit être utilisé que par un seul élément HTML dans la page :

Exemple

<style>
/* Styliser l'élément avec l'id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Styliser tous les éléments avec le nom de classe "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<!-- Un élément avec un id unique -->
<h1 id="myHeader">Mes Villes</h1>

<!-- Plusieurs éléments avec la même classe -->
<h2 class="city">Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>

<h2 class="city">Paris</h2>
<p>Paris est la capitale de la France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo est la capitale du Japon.</p>
Essayez-le vous-même »

Astuce : Vous pouvez en apprendre beaucoup plus sur CSS dans notre Tutoriel CSS .

Signets HTML avec ID et Liens

Les signets HTML permettent aux lecteurs de sauter à des parties spécifiques d'une page web.

Ils peuvent être utiles si votre page est très longue.

Pour utiliser un signet, vous devez d'abord le créer, puis ajouter un lien vers celui-ci.

Ensuite, lorsque le lien est cliqué, la page défilera jusqu'à l'emplacement du signet.

Exemple

Tout d'abord, créez un signet avec l'attribut id :

<h2 id="C4">Chapitre 4</h2>

Ensuite, ajoutez un lien vers le signet ("Sauter au Chapitre 4") depuis la même page :

Exemple

<a href="#C4">Sauter au Chapitre 4</a>
Essayez-le vous-même »

Ou, ajoutez un lien vers le signet ("Sauter au Chapitre 4") depuis une autre page :

<a href="html_demo.html#C4">Sauter au Chapitre 4</a>

Utilisation de l'attribut id en JavaScript

L'attribut id peut également être utilisé par JavaScript pour effectuer certaines tâches sur cet élément spécifique.

JavaScript peut accéder à un élément avec un id spécifique grâce à la méthode getElementById() :

Exemple

Utilisez l'attribut id pour manipuler du texte avec JavaScript :

<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Bonne journée !";
}
</script>
Essayez-le vous-même »

Astuce : Étudiez JavaScript dans le chapitre HTML JavaScript , ou dans notre Tutoriel JavaScript .

Résumé du Chapitre

  • L'attribut id est utilisé pour spécifier un identifiant unique pour un élément HTML
  • La valeur de l'attribut id doit être unique dans le document HTML
  • L'attribut id est utilisé par CSS et JavaScript pour styliser ou sélectionner un élément spécifique
  • La valeur de l'attribut id est sensible à la casse
  • L'attribut id est également utilisé pour créer des signets HTML
  • JavaScript peut accéder à un élément avec un id spécifique grâce à la méthode getElementById()

Vidéo : ID HTML