Types d'affichage
Affichage par défaut
En règle générale, chaque balise HTML s'affiche de l'une des 2 manières de base disponible dans un navigateur web, soit en bloc ou en ligne. Cet affichage par défaut de chaque balise indique au navigateur comment disposer l'élément dans son interface graphique.
Dans cette page, nous vous expliquerons comment fonctionne ces 2 types d'affichage et nous vous indiquerons quelle balise utilise ce type d'affichage par défaut.
Affichage en bloc (block)
L'affichage en bloc est un affichage qui force son élément à prendre toute l'espace possible sur la largeur et à ne prendre que l'espace nécesssaire en hauteur. Par conséquant, tous les éléments en bloc auront tendance à ce mettre un en dessous de l'autre.
Voici une liste des balises vu jusqu'à maintenant qui utilise l'affichage en bloc.
- <p>
- <h?>
- <ul>
- <ol>
- <li>
- <header>
- <footer>
- <main>
- <nav>
- <section>
- <table>
Affichage en ligne (inline)
L'affichage en ligne est un affichage qui force son élément à suivre le texte dans un site Web. Les balises pouvant manipuler du texte ou s'insérer facilement dans le texte ont généralement ce type d'affichage. En général, puisque ce type d'affichage suis le texte, les balises ayant ce type d'affichage se retrouverons l'une à côté de l'autre si elles sont utilisées conjointement.
Voici une liste des balises vu jusqu'à maintenant qui utilise l'affichage en ligne.
- Le texte
- <strong>
- <a>
- <img>
- <video>
- <audio>
- <iframe>
Autres types d'affichage
Il existe de nombreux autres types d'affichage. Par exemple, les tableaux, les rangées de tableaux, les cellules de tableau, les listes ainsi que les éléments de liste ont tous leur propre affichage, même si certains d'entre eux ont un affichage très similaire à l'affichage en bloc. Il en existe aussi plusieurs autre.
Nous verrons comment manipuler les types d'affichage des éléments HTML lorsque nous verrons le CSS. En effet, la mise en page et la disposition des éléments entre dans le visuel de la page et sera donc fait par le langage CSS.