Les balises importantes (3)

Les balises inline

Une balise inline, lorsqu’elle est rendue, n’a ni saut de ligne avant ni après elle.

• <a> Définit un hyperlien, c'est-à-dire une liaison entre deux pages  ;
• <em> (emphasis - emphase, en français) Par défaut, les navigateurs mettent en italique le contenu de cette balise, et elle est utilisée pour quelque chose à prononcer différemment ;
• <strong> (strong importance) Par défaut, les navigateurs mettent en gras le contenu de cette balise, et elle est utilisée pour signifier l'importance de son contenu (cf. html5doctor) ;
• <img src="lien/vers/image.jpg"> Balise qui affichera une image ;
• <button> Un bouton.

Info

Par défaut, on ne peut pas donner à un élément inline de dimension verticale, ni de padding vertical ni de marge verticale.

Il y a des exceptions, cependant : les balises qui ont des dimensions intrinsèques, comme <img> et button.

Autres balises importantes à connaître

• <video> pour l’insertion de contenus vidéo ;
• <audio> pour l’insertion de contenus audio ;
• <figure> est un conteneur sémantique qui regroupe un contenu multimédia (image, graphique, photos, schéma, tableau, vidéo, etc.) et est associé à une balise <figcaption>.

Les balises non sémantiques

• <div> et <span> sont des balises qui n'informent en rien de ce qu'elles contiennent, elles sont donc non sémantiques.

La balise <div> a pour display par défaut block (cf. CSS).

Au contraire, la balise <span> a pour display par défaut inline (cf. CSS), ce qui signifie qu'il n'y aura ni saut de ligne avant ni saut de ligne après la balise.

• <i> (Initialement italique) Les navigateurs mettent en italique le contenu de cette balise, et elle est utilisée pour les mots techniques ou traduits, les lecteurs d'écran sont censés utiliser une voix alternative pour le contenu ;
• <b> (Initialement bold, c'est-à-dire à police grasse) Les navigateurs mettent en gras le contenu de cette balise, et elle est utilisée pour les mots-clés.