Hatten Sie sich im letzten Beispiel gewundert, warum die Überschrift dieser Box nicht als solche ausgezeichnet war? Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht und erst in diesem die Hauptüberschrift notiert war, wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.
Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert, wodurch auch dieses semantische Problem gelöst ist.
Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.
Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet und kann genauso gut wie ein <div> über CSS formatiert - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden. Auch eine Grafik könnte in <h1> als Hintergrundbild definiert oder über <img> eingebunden werden.
Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage. Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite und passen Sie das CSS nach Belieben Ihren Vorstellungen an: experimentieren Sie mit den Größenangaben, Farben und Rändern und fügen Sie z.B. individuelle grafische Elemente ein.
Diese Fußzeile stellt über die CSS-Eigenschaft 'clear' den Elementenfluss wieder her.