Que sont les ID HTML ?
L’attribut id dans HTML sert à pouvoir identifier de manière univoque des éléments spécifiques dans un document HTML. Il est ainsi possible d’y accéder et de les manipuler dans CSS ou en JavaScript.
- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée
Que sont les ID HTML ?
L’ID HTML est un attribut HTML utilisé pour identifier de manière unique un élément HTML. Cet identifiant doit être unique dans l’ensemble du document HTML ; un document HTML dans lequel deux éléments partagent le même ID n’est pas syntaxiquement correct. L’attribut id est souvent utilisé en combinaison avec CSS ou JavaScript pour appliquer des styles spécifiques ou effectuer des actions sur un élément particulier.
Si vous souhaitez en apprendre plus sur le HTML, découvrez notre tutoriel pour débutants.
Pourquoi utilise-t-on un ID HTML ?
L’ID HTML peut être très utile. Il est toujours utilisé lorsqu’une action ne doit concerner qu’un seul élément. Les cas importants pour l’utilisation de l’attribut id sont par exemple :
- Styling du site Web avec CSS : avec un identifiant, vous pouvez appliquer des règles CSS à un seul élément HTML. Ceci est particulièrement utile si vous souhaitez mettre en évidence un élément particulier.
- Interaction avec JavaScript : en JavaScript, les ID peuvent être utilisés pour accéder à des éléments HTML spécifiques et modifier leurs propriétés ou leur contenu. Il s’agit d’un élément fondamental du développement Web dynamique.
- Liens hypertextes et ancres : les ID peuvent être utilisés pour créer des points d’ancrage au sein d’une page. Ceux-ci permettent de passer directement à une section spécifique de la page lorsqu’on clique sur un lien avec l’identifiant correspondant.
L’attribut id permet d’attribuer un ID à n’importe quel élément HTML.
Syntaxe de l’attribut id
Pour définir un ID en HTML, vous devez ajouter l’attribut id à l’élément correspondant et spécifier le nom d’identifiant souhaité. Suivez pour cela l’exemple de code suivant :
<p id="IDTest">L’ID « IDTest » est attribué à ce paragraphe.</p>Grâce à l’attribut id, l’ID « IDTest » a été attribué au paragraphe HTML. L’utilité de cet attribut peut être illustrée dans un exemple un peu plus détaillé :
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: blue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="header">Un exemple d’ID HTML</h1>
<p>L’en-tête est un exemple d’utilisation d’un identifiant HTML.</p>
</body>
</html>L’ID « header » est attribué à l’en-tête HTML. Comme CSS a été intégré dans le code HTML, les règles CSS correspondantes à l’ID « header » sont appliquées à l’en-tête.
HTML id vs class
L’attribut id et l’attribut class sont tous deux utilisés pour identifier et styliser les éléments HTML, mais ils ont des propriétés et des domaines d’application différents.
- Unicité : chaque ID doit être unique au sein d’un document HTML, ce qui signifie qu’un même identifiant ne peut pas être attribué à plusieurs éléments dans le même document. Une classe HTML, en revanche, peut être appliquée à plusieurs éléments, permettant ainsi de manipuler un groupe d’éléments simultanément.
- Spécificité : les ID ont une spécificité plus élevée que les classes. Lorsque les deux sont appliqués au même élément HTML avec des styles contradictoires, les styles définis avec l’ID auront la priorité sur ceux définis avec la classe.
- Référencement en CSS : pour faire référence aux ID en CSS, il faut utiliser le dièse (
#) précédant le nom de l’ID. Pour référencer des classes, vous avez besoin du point (.) précédant le nom de la classe.
- Modifiez, partagez et stockez vos fichiers
- Data centers européens certifiés ISO
- Sécurité élevée des données, conforme au RGPD