HTML id Attribut
L'attribut HTML id est utilisé pour spécifier un identifiant unique pour un élément HTML.
Vous ne pouvez pas avoir plus d'un élément avec le même identifiant dans un document HTML.
Utilisation de l'attribut id
L'attribut id spécifie un identifiant unique pour un élément HTML. La valeur de l'attribut id doit être unique au sein du document HTML.
L'attribut id est utilisé pour pointer vers 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 l'identifiant spécifique.
La syntaxe de l'identifiant est la suivante : écrivez un caractère dièse (#), suivi d'un nom d'identifiant. 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 de l'identifiant "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">My Header</h1>
</body>
</html>
Try it Yourself »
Remarque : Le nom de l'identifiant est sensible à la casse !
Remarque : Le nom de l'identifiant 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'identifiant ne doit être utilisé que par un seul élément HTML dans la page :
Exemple
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Try it Yourself »
Astuce : Vous pouvez en apprendre beaucoup plus sur CSS dans notre Tutoriel CSS.
Signets HTML avec ID et liens
Les signets HTML sont utilisés pour permettre aux lecteurs d'accéder à des parties spécifiques d'une page Web.
Les favoris peuvent être utiles si votre page est très longue.
Pour utiliser un favori, vous devez d'abord le créer, puis y ajouter un lien.
Ensuite, lorsque vous cliquez sur le lien, la page défile jusqu'à l'emplacement contenant le 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 (« Passer au chapitre 4 »), depuis la même page :
Ou bien, ajoutez un lien vers le signet (« Passer au chapitre 4 »), depuis une autre page :
<a href="html_demo.html#C4">Aller 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 pour cet élément spécifique.
JavaScript peut accéder à un élément avec un identifiant spécifique avec la méthode getElementById() :
Exemple
Utilisez l'attribut id pour manipuler du texte avec JavaScript :
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Try it Yourself »
Astuce : Étudiez JavaScript dans le chapitre HTML JavaScript, ou dans notre Tutoriel JavaScript une.
Résumé du chapitre
- L'attribut
idest utilisé pour spécifier un identifiant unique pour un élément HTML - La valeur de l'attribut
iddoit être unique au sein du document HTML - L'attribut
idest utilisé par CSS et JavaScript pour styliser/sélectionner un élément spécifique - La valeur de l'attribut
idest sensible à la casse - L'attribut
idest également utilisé pour créer des favoris HTML - JavaScript peut accéder à un élément avec un identifiant spécifique avec la méthode
getElementById()
HTML Exercices
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML — Id - Vidéo W3Schools
Cette vidéo explique l'attribut id en HTML et comment l'utiliser en HTML, CSS et JavaScript.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
