Semantisches Markup: <main>...<header> oder <header>...<main> ?

[molily]

Hallo,

header [dokumentweit]
  hgroup [Titel der Website]
    h1
    h2

Das hgroup-Element gibt es nicht mehr, es wurde aus HTML5 entfernt.

Dass im dokumentweiten header nur der allgemein Titel der Website vorkommt und nicht der wichtigere, dokumentspezifischen Titel, ist nicht so schön und hat Usability- und SEO-Implikationen. Ich würde den Site-Titel daher nicht unbedingt als Hauptüberschrift auszeichnen, sondern nur den Dokument-Titel.

nav
main
  header [Überschrift der Einzelseite = ein anderer header!]

Das funktioniert nicht, so hat das Dokument zwei dokumentweite Header. Dieser header ist auch dokumentweit!

article
    header [wieder ein anderer header!]
  article
    header
  article
    header
footer

Das ist okay.

Ich hatte mich also gefragt: ist dieser zweite header korrekt plaziert (main - header) oder sollte ich nicht besser header - main schreiben?

Wie gesagt, das ist in dem Fall nachrangig und eher Geschmacksfrage, es ändert seine Bedeutung nicht.

Aber ich glaube, so wie ich es hier drüber dargestellt habe, ist es schon korrekt, denn wenn ich den zweiten header als Einzelseitenüberschrift über den main stelle, hätte ich ja zwei dokumentweite Hauptheader auf der oberen Ebene.

Das hast du sowieso! Wie gesagt, main bildet keine Section. header im main oder nicht, es ist ein dokumentweiter header. Bei dir existieren zwei header, die als Bezugspunkt das Dokument haben.

Ich habe übrigens für die Einzelseitenüberschrift <header> und nicht bloss <h1> verwendet, weil es sich nicht um eine kurze Überschrift handelt, sondern um einen semantischen Abschnitt, der auch weitere Zusatzangaben beinhaltet.

Wenn es ein Abschnitt ist, gehört es in ein section-bildendes Element. Z.B. section, article oder aside. main ist keines.

Ich würde also eher folgendes vorschlagen:

nav
  hX Navigation (Überschrift kann zugänglich versteckt sein)
  p.site-title Site-Titel
  ul
header
  h1 Dokument-Titel
  p Einleitung
main
  article
    header
      h2 Abschnitt
    p Inhalt
  article
   usw.
  article
   usw.
footer
 hX Footer

Dann gibt es nur einen dokumentweiten Header. Die genaue Position der anderen Elemente ist weniger wichtig. Meinetwegen auch den Header ins main, auch wenn ich das für inkonsistent halte.

Mathias