Les balises de type block et inline

Introduction

Avant de commencer à créer du contenu dans le body de votre site, il est nécessaire de comprendre quels sont les types de balises que vous allez devoir utiliser ainsi que leurs caractéristiques.
Je rappelle que le rôle du langage HTML est de structurer et de donner du sens au contenu pour votre navigateur.
Nous allons donc voir ici, les deux grands types de balises que l’on rencontre dans le body, et le générique correspondant à chacun.

 

1-Les balises de type block

Dans votre éditeur de texte, lorsque vous allez créer un élément avec des balises de type block, vous allez créer sur votre page Web, un retour à la ligne avant et après le contenu de votre élément. En fait, une page Web est composée de blocks qui se suivent et/ou qui s’emboîtent de la manière dont vous pouvez voir ci-contre.

Bien évidemment, ceci n’est qu’un exemple et il existe un infini de possibilités, des plus simples aux plus complexes. Prenez le temps de regarder un site Web, Wikipédia par exemple, et observez les différents blocks que vous pouvez voir.
La balise générique pour les blocks est la balise div, celle-ci indique à votre navigateur un block sans plus de renseignements. Nous verrons dans un prochain cours les différents tags des balises blocks.

2-Les balises de type inline

Comme son nom l’indique, une balise de type inline (en ligne en français) verra son élément rester sur la même ligne. Il n’y a ni retour avant, ni après l’élément. Par conséquent, une balise inline s’écrira toujours à l’intérieur d’une balise block. Par exemple, la balise de tag a qui permet d’insérer un lien sur le contenu de son élément est une balise inline.
La balise générique pour le type inline est la balise span. Celle-ci va simplement indiquer à votre navigateur que vous avez placé du contenu dans une balise. En apparence ça ne changera rien du tout. Mais c’est ce que l’on appellera par la suite un sélecteur en CSS. Il sera utilisé afin de mettre en forme le contenu de cet élément. Nous verrons plus tard en détails les différentes balises inline à connaître.

3-Éléments Spécifiques

Il existe cependant des balises qui ne sont ni block ni inline et qu’il est important de connaître :

• Les commentaires, ce sont des annotations que vous pouvez mettre n’importe où sur votre fichier html. Elles n’auront pas d’influence sur l’affichage de votre page et n’apparaîtront donc pas. On s’en sert généralement pour se faire des rappels ou pour donner des explications à des futurs utilisateurs du fichier.
  Pour faire un commentaire, il faut l’écrire ainsi:
  <!– ceci est un commentaire –>
• Le retour à la ligne, nous l’avons déjà rencontré dans un cours précédent, il est composé d’une balise orpheline et s’écrit <br>
• Le retour à la ligne avec une barre horizontale, déjà plus rare, on peut cependant le rencontrer de temps en temps, il fonctionne comme le retour à la ligne normal et s’écrit <hr>

 

Conclusion

Pour résumer ce cours, il est important de retenir qu’une page Web est composée de blocks. Ces blocks peuvent se suivre et s’emboîter. Le contenu texte de ces blocks peut être inséré dans des éléments inlines qui le rendront spécifique. Il existe aussi des balises spécifiques qui n’entrent pas dans ces catégories. C’est effectivement le cas pour les balises de retour à la ligne et les commentaires.
N’hésitez pas à laisser un commentaire ou une question, à bientôt pour le prochain cours, JB