HTML Attributs id et class

Ces 2 attributs permettent de nommer des balises HTML. Et ainsi de pouvoir les différencier. Cela est notamment indispensable pour gérer les styles CSS.

id

L’attribut id (pour identifiant) permet de nommer une balise précise. Par exemple, une balise <div> regroupant les éléments du menu de navigation pourrait avoir un id="menu" :

<div id="menu">
  <ul>
    <li>...</li>
  </ul>
</div>

Attention, un id doit être unique. Il ne peut y avoir qu’un seul id identique par page.

class

L’attribut class permet de donner un nom à un ensemble de balises. Le principe est le même que pour l’attribut id, sauf que l’on peut utiliser la même class plusieurs fois par page

<div>
  <p class="un-element">...</p>
  <p>...</p>
  <p>...<a class="un-element">...</a>...</p>
</div>
<h4 class="un-element"></h4>

Dans cet exemple, on ajoute class="un-element" au premier paragraphe, au lien du troisième paragraphe, et au h4. On signale donc que ces éléments ont un nom commun (et certainement une mise en forme commune)

Notez qu’il est également possible d’ajouter plusieurs classes au même élément. Pour cela, séparez les classes avec un espace :

<div class="item bloc">...</div>

Dans cet exemple, l’élément reçoit la classe item et la classe bloc.

Exercice 3 - Organisez le contenu

• Englobez les différentes parties de votre site (l’entete, le contenu et le footer) à l’aide de <div> en utilisant l’attribut id ou des éléments structurants sémantiques

• Créez un menu de navigation entre l’entête et le contenu

  • une <div id="menu">
  • qui contient une liste non numérotée de liens
  • doit contenir les liens vers vos autres pages et/ou des liens externes