Selon le W3C, l'attribut ID dans HTML est un identifiant unique pour l'élément. Il fournit un moyen d'identifier une zone d'une page Web pour les styles CSS, les liens d'ancrage et les cibles pour les scripts.
A quoi sert l'attribut ID?
L'attribut ID effectue plusieurs actions pour les pages Web:
- Un sélecteur de feuille de style: C'est la fonction pour laquelle la plupart des gens utilisent l'attribut ID. Parce qu'ils sont uniques, vous ne styliserez qu'un seul élément de votre page Web lorsque vous styliserez à l'aide d'une propriété ID. L'inconvénient de l'utilisation d'un identifiant à des fins de style est qu'il a un très haut niveau de spécificité, ce qui peut rendre très difficile si vous devez remplacer un style pour une raison quelconque plus tard dans un feuille de style. Pour cette raison, les pratiques Web actuelles tendent à utiliser des classes et des sélecteurs de classe à la place des ID et des sélecteurs d'ID à des fins de style général.
- Ancres nommées pour le lien vers: Navigateurs Web ciblez des emplacements précis dans vos documents Web en pointant sur l'ID à la fin de l'URL. Ajoutez l'identifiant à la fin de l'URL de la page, précédé d'un dièse. Lien vers ces ancres avec la page elle-même en ajoutant la balise de hachage et le nom d'identification dans le href attribut pour l'élément. Par exemple, pour une division avec un ID de contact, un lien vers celui-ci sur cette page avec #contact.
- Une référence pour les scripts: Si vous écrivez des fonctions Javascript, utilisez l'attribut ID afin de pouvoir modifier l'élément précis de la page avec vos scripts.
- Autre traitement: L'identifiant prend en charge le traitement de vos documents Web de la manière dont vous avez besoin. Par exemple, vous pouvez extraire le code HTML dans une base de données et utiliser l'attribut ID pour identifier les champs.
Règles d'utilisation de l'attribut ID
Assurez-vous que vos attributs d'ID sont conformes à ces trois normes:
- L'ID doit commencer par une lettre (a-z ou A-Z).
- Tous les caractères suivants peuvent être des lettres, des chiffres (0-9), des tirets (-), des traits de soulignement (_), des deux-points (:) et des points (.).
- Chaque ID doit être unique dans le document.
Utilisation de l'attribut ID
Après avoir identifié un élément unique de votre site Web, utilisez feuilles de style pour styliser uniquement cet élément.
Par exemple, pour identifier un identifiant intitulé contact, utilisez l'un de ces formulaires:
div#contact { arrière-plan: #0cf;}
#contact { arrière-plan: #0cf;}
Le premier échantillon cible une division avec un attribut ID de contact. Le second cible toujours l'élément avec un ID de contact, cela ne stipulerait tout simplement pas qu'il s'agit d'une division. Le résultat final du style serait exactement le même.
Vous pouvez également créer un lien vers cet élément spécifique sans ajouter de balises.
Référencez ce paragraphe dans vos scripts avec le getElementById Méthode JavaScript:
document.getElementById("contact-section")
Les attributs d'ID sont toujours très utiles en HTML, même si sélecteurs de classe les ont remplacés à des fins de style les plus générales. L'utilisation de l'attribut ID comme crochet pour les styles, tout en les utilisant également comme ancres pour les liens ou cibles pour les scripts, signifie qu'ils ont toujours une place importante dans la conception Web aujourd'hui.