Mise en forme des éléments

Le rôle de HTML est de décrire et d'organiser le contenu des pages. Ecrire du code HTML, c'est dire au navigateur à propos de notre page HTML : "c'est un titre", "c'est un paragraphe", "c'est une liste", c'est la ligne d'une liste", "c'est une image", "c'est un lien", etc.

Avec HTML, on ne donne aucune information sur la façon dont seront affiché le titre, le paragraphe, la liste, le lien, etc. Le navigateur affichera les éléments avec une mise en forme des plus "frustres" qui n'a pas vraiment de rapport avec ce que l'on est habitué à voir sur le Web.

Pour la mise en page, le navigateur se basera uniquement sur le mode d'affichage des éléments pour les afficher les uns en dessous des autres (éléments de bloc) ou les uns à côté des autres (éléments en ligne). Si on veut afficher des contenus en vis à vis avec uniquement HTML, il faut "tricher" en utilisant des tableaux pour décrire la structure.

On distinguera la mise en forme de la mise en page.

La mise en forme concerne la forme du contenu comme la police de caractère utilisée, la tailles des caractères et leur couleur, la couleur ou l'image de fond, la graisse, l'entourage par une bordure, l'alignement, la justification, ...

La mise en page concerne l'agencement des contenus les uns par rapport aux autres dans la fenêtre du navigateur. La mise en page concerne donc le positionnement, les dimensions, les marges, les chevauchements, ...

Pour définir la mise en forme et la mise en pages des contenus on utilise le langage CSS (spécification W3C, wikipedia). Ce langage a sa propre grammaire et sa propre syntaxe. Il permet grâce à des règles de style que l'on attache à des éléments HTML d'agir sur des propriétés de mise en forme ou de mise en page de ces éléments. Un tutoriel est entièrement consacré à l'étude des CSS sans lesquelles un document HTML n'aurait pas du tout l'aspect que l'on voit sur le Web.

page d'accueil de Mozilla avec CSS
page d'accueil de Mozilla sans CSS