Attribut d'identifiant HTML
L'attribut HTML idest 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' idattribut spécifie un identifiant unique pour un élément HTML. La valeur de l' id
attribut doit être unique dans le document HTML.
L' idattribut 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 pour 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 <h1>élément qui pointe vers le nom d'identifiant "myHeader". Cet <h1>
élément sera stylisé selon la #myHeader
définition de style 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>
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>
Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre didacticiel 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 signets peuvent être utiles si votre page est très longue.
Pour utiliser un signet, vous devez d'abord le créer, puis y ajouter un lien.
Ensuite, lorsque le lien est cliqué, la page défilera jusqu'à l'emplacement avec le signet.
Exemple
Tout d'abord, créez un marque-page avec l' idattribut :
<h2 id="C4">Chapter 4</h2>
Ensuite, ajoutez un lien vers le signet ("Aller au chapitre 4"), à partir de la même page :
Exemple
<a href="#C4">Jump to Chapter 4</a>
Ou, ajoutez un lien vers le signet ("Aller au chapitre 4"), à partir d'une autre page :
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Utilisation de l'attribut id en JavaScript
L' idattribut 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 getElementById()méthode :
Exemple
Utilisez l' idattribut pour manipuler du texte avec JavaScript :
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Conseil : Étudiez JavaScript dans le chapitre HTML JavaScript ou dans notre didacticiel JavaScript .
Résumé du chapitre
- L'
idattribut est utilisé pour spécifier un identifiant unique pour un élément HTML - La valeur de l'
idattribut doit être unique dans le document HTML - L'
idattribut est utilisé par CSS et JavaScript pour styliser/sélectionner un élément spécifique - La valeur de l'
idattribut est sensible à la casse - L'
idattribut est également utilisé pour créer des signets HTML - JavaScript peut accéder à un élément avec un identifiant spécifique avec la
getElementById()méthode