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
© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common
(diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).