Balisage structurel : coder sémantiquement, en fonction du besoin

Bien que travailler avec CSS soit simple, faire usage des CSS pour construire une mise en page requiert une approche assez différente de ce à quoi la plupart d'entre nous sommes habitués.

Plutôt que de penser au positionnement de chaque élément ("celui-ci va ici, celui-là va là") lorsque nous construisons un document ou une mise en page, il importe de plutôt réfléchir en terme de type d'information dans nos pages, ainsi qu'à la structure de cette information.

Nous attribuons au plus important titre de nos pages un élément <h1> ; aux sous-titres, un élément <h2>, et ainsi de suite. Les paragraphes, bien sûr, sont structurés à coups de <p>.

Cette approche se nomme balisage "structurel" ou balisage "sémantique".

Au lieu d'intégrer vos éléments de contenu dans des cellules de tableaux enveloppez-les dans des éléments div. Attribuez à chacun de vos éléments div un id ou un class qui décrit leur contenu ou leur fonctionnalité, plutôt que leur apparence.