Etiez-vous étonné que le titre de cette boîte dans l'exemple précédent n'ait pas été balisé comme tel? Comme cette boîte d'information était placée, dans le code source, avant le contenu avec le titre principal, un titre de niveau 2 n'aurait pas encore eu de sens.
Dans le code source de l'exemple présent, le titre de la page est noté en premier, ce qui résoud ce problème sémantique.
Cet exemple est complété d'une entête et d'un pied de page.
L'entête est définie en titre de niveau 1 <h1> et peut être formatée avec les feuilles de style comme un élément <div> - ici avec une bordure et une couleur d'arrière-plan. On pourrait aussi insérer une image comme arrière-plan ou bien comme <img> dans <h1>.
Ne considérez pas cet exemple comme une mise en page terminée. Utilisez le squelette HTML pour les contenus de votre page et adaptez les CSS à votre page selon vos désirs: essayez diverses tailles, couleurs, bordures, et ajoutez, par exemple, des images de votre choix.
Ce pied de page rétablit le flux par la propriété CSS 'clear'.