HTML L’attribut id

.......................

Somaire

Définition et utilisation L’attribut id

HTML Les attributs globaux

L'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:

Sélectionner 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

Internet Explorer Firefox Opéra Google Chrome Safari

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.

Sélectionner 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>
 
 Retour à la liste des attributs globaux       
accueil HTML 5
Par gerywa 20 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Balise bouton

    Définit un bouton cliquable

    Balise li

    Définit un élément de liste

    Créer un lien hypertexte

    Les liens hypertextes (ou ancres) permettent de lier des pages Web entre elles. Comment ça marche?...



    Rentabilisez efficacement votre site