Anatomie d’une balise HTML

Durée 3h

Difficulté ☆ ☆ ☆

Deux types de balises

Une balise HTML commence et se termine toujours par un chevron <balise>

Il existe deux types de balises

  • les balises classiques : il y a une balise ouvrante et une balise fermante
    Exemple :
    • <body></body>
    • <h1></h1>
    • <p></p>
  • les balises auto fermantes :
    Exemple :
    • <img/>
    • <link/>

On parle souvent de tag (balise en anglais), ou de markup pour désigner l’ensemble ou une partie des balises d’un site

Les attributs des balises HTML

Une balise peut posséder des attributs qui viennent compléter un tag.

Syntaxe de l’attribut

<balise name="value"></balise>

Exemple :

<h1 id="titre-principale"></h1>
<img src="assets/panda.gif" />
<p id="text_intro" style="width: 250px;"></p>

Caractère facultatif ou obligatoire

  • la plupart des balises peuvent posséder 0, 1 ou plusieurs attributs
  • certaines balises doivent obligatoirement posséder des attributs pour fonctionner
    • la balise IMG
    • la balise FORM
    • la balise INPUT
  • certaines balises ne possèdent jamais d’attributs
    • la balise TR
    • la balise HEAD

À quoi servent les attributs

Ils peuvent fournir des méta-informations sur la balise ou bien changer le comportement du tag.

Des exemples d’attributs :

  • id : il permet d’identifier de manière unique une balise
  • class : permet de signifier l’appartenance d’une balise à une même catégorie d’entités
  • src : src attend comme valeur un chemin d’accès à un fichier
  • type : modifie le comportement et/ou l’aspect de certaines balises de formulaires
  • onclick : attribut d’évènement, il attend comme valeur un code JavaScript
  • data-* : nouveau type d’attribut autorisé par la norme HTML5, qui permet de stocker une donnée arbitraire

Il existe certains attributs obsolètes

…mais que l’on rencontre encore souvent

  • width
  • height
  • border

Les attributs universels

  • ils peuvent être utiles à toutes les balises
  • ils sont généralement facultatifs

Exemples :

  • l’identifiant : id
  • la classe : class
  • l’attribut de stockage de données : data-*
  • les attributs d’évènement : onclick, onmouseover, ...

Les attributs spécifiques des balises HTML

  • ils sont spécifiques à certaines balises
  • s’ils sont utilisés sur des balises auxquelles ils ne sont pas destinés, ils seront sans effet
  • ils sont parfois obligatoires

Exemples :

Les balises images possèdent des attributs specifiques :

  • src : qui est le chemin vers le fichier source de l’image
  • alt : qui décrit l’image aux moteurs de recherche
  • title : qui décrit l’image aux utilisateurs

L’attribut src n’est pas spécifique à la balise image, il sert aussi à d’autres balises :

  • <video src="assets/films/biglebowski.mp4"> pour afficher des vidéos
  • <script src="assets/javascript/slider.js"> pour charger des scripts JavaScript
  • <link src="assets/css/style.css"> pour charger les feuilles de style du site

Le contenu des balises

Sauf exception, une balise doit toujours posséder un contenu.

Différents types de contenus :

  • du texte
  • une ou plusieurs autres balises
  • un mélange de texte et de balises

Le cas des balises auto-fermantes

  • elles ne possèdent par définititon pas de contenu
  • la plupart d’entre elles définissent leur apparence grâce à leurs attributs

Exemples :

La balise <img /> possède l’attribut src="assets/"

La balise <br /> ne possède aucun attribut obligatoire : son comportement est intrinsèque, elle saute une ligne.