OUJOOD.COM
Définition et utilisation L’attribut id
HTML Les attributs globauxL'attribut id spécifie un identifiant unique pour un élément HTML (la valeur doit être unique dans le document HTML).
L'attribut id est plus utilisé pour pointer vers un style dans une feuille de style (voir notre tutorial sur l’utilisation de class en html)., et par JavaScript (via le DOM HTML) pour manipuler l'élément avec l'id spécifique (voir notre tutorial javascript).
Syntaxe<element id="Identifiant">
Exemple Utilisez l'attribut id pour manipuler le texte avec JavaScript:
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>html5 demo</title>
<script type="text/javascript">
function afficher()
{
document.getElementById("monTitre").innerHTML="Quel beau jour!";
}
</script>
</head>
<body>
<h1 id="monTitre">Bonjour le monde!</h1>
<button onclick="afficher()">Changer texte</button>
</body>
</html>
(autre exemple au bas de cette page)
Navigateurs pris en charge
L'attribut id est pris en charge dans tous les principaux navigateurs.
Différences entre HTML 4.01 et HTML5
En HTML5, l'attribut id peut être utilisée sur n'importe quel élément HTML .
En HTML 4.01, l'attribut id ne peut pas être utilisé avec: <base>, <head>, <html>, <meta>, <param>, <script>, <style> et <title>.
Remarque: HTML 4.01 a de plus grandes restrictions sur le contenu des valeurs id (par exemple, des valeurs id HTML 4.01 ne peut pas commencer par un chiffre).
Valeurs de l’attributs id
| Valeur | Description |
|---|---|
| Identifiant |
Spécifie un identifiant unique pour l'élément. Règles de
nomination : Doit contenir au moins un caractère Ne doit contenir aucun espace En HTML, toutes les valeurs sont insensibles à la casse |
Exemple Ajouter un attribut id à un élément HTML, et l'utiliser en CSS
Utilisez l'attribut id pour le style du texte avec CSS.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>html5 demo</title>
<style>
#monTitre
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 id="monTitre">Le site Apprendre créer sites est le
meilleur !</h1>
</body>
</html>
Par gerywa 20 mars 2014