inline et block

Tous les éléments HTML ont une valeur d'affichage par défaut. Cette valeur est inline ou block pour la plupart des éléments.

Eléments de type block

Un élément de type block débute toujours sur une nouvelle ligne et occupe toute la largeur disponible.

Exemples d'éléments de type block par défaut :

  • Elément délimité par les balises <div> et </div>. Un élément div est un élément de type block "générique" : aucune sémantique n'est associée à cette balise. On utilise donc cette balise à chaque fois que les balises "sémantiques" de type block ne conviennent pas.
  • Elément délimité par les balises <section> et </section>.
  • Elément délimité par les balises <p> et </p> pour délmiter un paragraphe.
  • Elément délimité par les balises <h1> et </h1> pour délmiter un titre (et de même pour h2, h3, h4, h5, h6).
  • Elément délimité par les balises <article> et </article>.
  • ...

Les éléments de type inline

Un élément de type inline ne commence pas sur une nouvelle ligne (mais s'inscrit à la suite de la ligne en cours) et n'occupe pas toute la largeur de l'élément parent : il n'occupe que la largeur nécessaire à l'affichage de son contenu.

Exemples d'éléments de type inline par défaut :

  • Elément délimité par les balises <span> et </span>. Un élément span est un élément de type inline "générique" : aucune sémantique n'est associée à cette balise.
  • Elément img pour embarquer une image dans la page.
  • Elément ancre délimité par les balises <a> et </a>.
  • ...