Nous allons voir quelques notions de base avant d’aborder la présentation des balises de structuration du corps de document HTML

Balises block et inline

Chaque balise est par défaut dit de bloc (block) ou en-ligne (inline).

 Les balises de bloc par défaut ont pour conséquence de faire aller à la ligne automatiquement. On empile les blocs les un en dessous des autres.

<div>première balise bloc</div>
<div>seconde balise bloc</div>

Résultat :

première balise bloc

seconde balise bloc

 Les balises en-ligne par défaut prennent en charge des contenus qui se placeront l’un à coté de l’autre

<span>première balise en ligne</span> <span>seconde balise en ligne</span>

Résultat :

première balise en ligne seconde balise en ligne

La balise <img /> qui permet de placer une image est par défaut en-ligne.

 Connaître les balises qui sont par défaut bloc ou en-ligne est donc important pour bien placer son contenu.

Par exemple, le code qu’il faudra écrire pour placer deux images, sans maîtriser le CSS, sera la conséquence, de son caractère en ligne. Par défaut, deux balises <img /> à la suite feront s’afficher deux images sur la même ligne.

Il faudra donc employer d’autres ressources pour les faire s’afficher l’une en dessous de l’autre (par exemple d’autres balises HTML, ce que nous verrons dans un autre article sur les balises de hiérarchisation).

Affichage par défaut, apport du CSS

 Chaque navigateur interprète à sa manière les balises si leurs attributs ne sont pas définis. Les navigateurs ont chacun un réglage par défaut qui fait par exemple que pour une balise <h1></h1> l’affichage sera plus ou moins grand, que les marges d’un paragraphe seront plus ou moins larges , etc.

 Nous verrons alors par la suite comment définir le style de ces balises (correspondant à une partie de leur attribut) en utilisant plus particulièrement les feuilles de style (CSS). En effet, cette différence d’affichage peut s’avérer fort ennuyeuse quand vous avez prévu un rendu bien spécifique et que par défaut ce rendu n’est pas respecté selon les navigateurs.

Articles relatifs :

 Les codes couleurs HTML

 HTML, la mise en forme du texte

 Faire défiler un texte en HTML

 Optimiser son contenu pour le référencement