Gunther: [HTML5] Semantik + struktureller Aufbau einer Startseite

Beitrag lesen

Hallo werte Selfgemeinde!

Ich hätte gerne mal eure geschätzte Meinung zu dem nachfolgenden Thema - besten Dank im Voraus!
Und zwar geht es um den semantischen Aufbau einer Seite, exemplarisch sei angenommen, dass es sich dabei um die Startseite (Homepage) einer Website handelt.

Folgende Elemente soll die Seite beinhalten:

  • Logo und Navigation (als "fixierte" Top-Bar)
  • eine (Header) Grafik
  • den Seiteninhalt (Content)
  • einen Footer

Prinzipiell folgt ja fast jede Seite der Grundstruktur:

  • Header
  • Main
  • Footer

Auf obiges Beispiel bezogen, dachte ich an so etwas wie:

<body>  
  
   <header>  
      <div>Logo</div>  
      <nav> Navigation</nav>  
   </header>  
  
   <main role="main">  
      <section>...</section>  
      <section>...</section>  
      <section>...</section>  
   </main>  
  
   <footer>...</footer>  
  
</body>  

Soweit so gut (hoffentlich).
Jetzt stellt sich mir aber insbesondere die Frage, wie und wo ich meine Header-Grafik (gehört zur Seite und muss nicht auf allen Seiten vorhanden sein, bzw. variiert von Seite zu Seite) hinpacke?

Als <header> in <main>?

Und wo bringe ich meinen page title <h1> unter (die Sections bekommen jeweils eine <h2> Überschrift)?

Ich bin neugierig, eure Vorgehensweise, bzw. Ansicht zum Thema zu erfahren - danke!

Gruß Gunther