Auteur: Jérôme Forget. Publié le 11 février 2007.
Certains éléments HTML sont dits être de niveau « bloc » et d'autres de niveau « en ligne». Cette distinction se fondent sur deux notions :
Les éléments en ligne sont aussi appelés « éléments internes » car leur but est de donner du sens à des parties de texte ou de bloc. C'est le cas par exemple des éléments d'accentuation, des hyperliens, des accronymes.
Les éléments en ligne sont faits pour enrichir le texte et lui donner du sens. En général, ces éléments ne sont pas positionnés sur la page, et leur taille sera déterminée par le texte ou l'élément qu'ils contiennent.
Par défaut, les éléments en ligne ont des marges internes et externes inexistantes, contrairement aux balises bloc.
Voici une liste des principaux éléments en ligne :
Les éléments de bloc ont une structure qui leur permet de bénéficier de dimensions (hauteur, largeur, profondeur), de contenir d'autres éléments dimensionnés, de posséder des marges internes et externes, mais également d'être positionnés, c'est à dire de contribuer à la mise en page du document.
Par défaut, la plupart des éléments bloc possèdent des marges internes et externes non nulles. Ce détail est important car ces marges sont souvent différentes selon les navigateurs. La prise en compte de ces marges par défaut peut vous permettre d'éviter de gros soucis de compatibilité entre les navigateurs.
voici une liste des principaux éléments de bloc :
Notez que vous pouvez aisément passer d'une structure bloc à une structure en ligne grâce à la propriété CSS display.
h3 { display: inline; }
em { display: block; }