Sur cette page :

  1. Trois catégories de balises
    1. Les balises de type bloc
    2. Les balises de type en-ligne
    3. Les balises invisibles
    4. Et le reste ?

5.1# Les balises de type bloc

La première catégorie de balises à utiliser pour décrire le contenu est celle des balises “bloc”. On peut facilement les reconnaître car ils vont créer une séparation avec les autres blocs, autrement dit, un bloc est toujours précédé et suivi d’un retour à la ligne.

Un bloc est constitué d’une série de propriétés : la largeur (width), la hauteur (height), la marge extérieure (margin), la marge intérieure (padding) et la bordure. Par défaut, un bloc possède une largeur de 100%, c’est à dire qu’il prendra le plus de place possible. Sa hauteur sera adaptée au contenu. La bordure est généralement absente tandis que les marges dépendent des éléments.

Attention cependant, car tous les navigateurs n’ont pas rigoureusement la même implémentation de ces propriétés et la seule solution pour éviter les mauvaises surprises, c’est le test.

La modification de ces propriétés s’effectue à l’aide des CSS, ce n’est donc pas encore tout à fait au programme !

Il existe une balise bloc générique, appelée <div> (pour division). Elle ne possède ni bordure, ni marge. Elle est très utile mais ne doit pas être utilisée à la place d’autres qui seront porteuses d’un sens. Vous entendrez parfois parler de “calques” à propos de cet élément, c’est une approximation issue des vieilles mauvaises pratiques.

  1. Ceci est une phrase !

5.2# Les balises de type en-ligne

Cette seconde catégorie d’élément permet de définir des informations à l’intérieur d’un bloc, pour mettre en valeur des extraits d’une phrase par exemple. Contrairement à un bloc, une balise en-ligne ne provoque pas de retour à la ligne.

La balise “en-ligne” générique est <span> (fusion). Comme son homologue, elle ne doit pas être utilisée à la place d’une autre balise qui possède une valeur sémantique.

  1. Ceci est une phrase dans laquelle je peux mettre en valeur <span>quelques mots</span> !

5.3# Les balises invisibles

Les balises invisibles sont des balises qui permettent d’insérer des informations qui n’auront pas d’influence sur le contenu. La plupart de ces balises peuvent être placée dans l’en-tête, mais il est parfois utile (voire nécessaire) de les placer dans le corps de page. Elles permettent, par exemple, de faire appel à Javascript ou une feuille de style CSS.

5.4 # Et le reste ?

D’autres balises vont avoir un mode d’affichage différent, notamment les éléments utilisés pour construire un tableau, nous en parlerons quand nous étudierons ces balises.