Gunther: [HTML5] Semantik + struktureller Aufbau einer Startseite

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

  1. @@Gunther:

    nuqneH

    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>?

    Ja, wäre denkbar. Wenn die Grafik nicht ins Stylesheet gehört.

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

    Auch in main > header, wenn er schon mal da ist. Ansonsten als Kind von main.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar:

      nuqneH

      Vielen Dank für deine Antwort.
      Da bin ich ja beruhigt, dass ich nicht ganz daneben gelegen habe ...! ;-)

      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>?

      Ja, wäre denkbar. Wenn die Grafik nicht ins Stylesheet gehört.

      Ja, da hab' ich mich nicht genau/ präzise genug ausgedrückt.
      Sieh' es mehr als individuellen page header, der u.a. auch eine Hintergrundgrafik beinhaltet (die natürlich im Stylesheet), oder ggf. so etwas wie ein "Content Slider".

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

      Auch in main > header, wenn er schon mal da ist. Ansonsten als Kind von main.

      ACK.

      Gruß Gunther

  2. Hi!

    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 Hintergrund in den Header, waere die Standardantwort.

    Als <header> in <main>?

    Nicht wirklich. Aber wir reden hier schon ueber Design. Und das erfordert gelegentlich spezielle Strukturen.

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

    Was meinst Du mit Page Title? Den Namen der Website oder der einzelnen Seite? (beides macht sich im Header ganz gut, letzteres Evtl darunter. Da sind wir schon wieder beim Design. h1 waere in dem meisten Faellen der Name der Website und evtl mit dem Logo verbandelt. Und schon sind wir beim Logo: Wozu n Div? Es allein als img stehen zu lassen oder, weils quasi dem Titel der Website entspricht, in ein h1 packen boete sich doch an?

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

    Bitte.

    Ohne HTML5 hab ich ganz gern ein <h1> als <header>-Ersatz genommen(ohne Navi). Vielleicht hilft Dir diese Denke etwas?

    --
    Signaturen sind bloed.
    1. Hi!

      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 Hintergrund in den Header, waere die Standardantwort.

      Nein, denn mit "Header" ist hier nicht der websiteweite Header gemeint, sondern der spezielle Header für diese Seite.

      Der websiteweite Header steht ja als erstes nach Body und enthält u.a. die Navigation.

      Als <header> in <main>?

      Nicht wirklich. Aber wir reden hier schon ueber Design. Und das erfordert gelegentlich spezielle Strukturen.

      Nö, bevor ich irgendetwas layouten kann, muss ich ja erstmal meine HTML Struktur haben, die ggf. spezielle Anpassungen erfordert, um hinterher ein gewünschtes Layout erreichen zu können.

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

      Was meinst Du mit Page Title? Den Namen der Website oder der einzelnen Seite? (beides macht sich im Header ganz gut, letzteres Evtl darunter.

      Mit Page Title meine ich den Seitentitel, also den Titel der jeweiligen Seite.
      Der Name der Website gehört imho in den <title> im <head>.

      Da sind wir schon wieder beim Design. h1 waere in dem meisten Faellen der Name der Website und evtl mit dem Logo verbandelt. Und schon sind wir beim Logo: Wozu n Div? Es allein als img stehen zu lassen oder, weils quasi dem Titel der Website entspricht, in ein h1 packen boete sich doch an?

      Nein, denn wenn man der aktuellen "Empfehlung" des W3Cs folgen möchte, und nur jeweils ein H1 Element pro Seite verwendet, dann sollte das der Page Title, und nicht der Website Title sein.

      Ohne HTML5 hab ich ganz gern ein <h1> als <header>-Ersatz genommen(ohne Navi). Vielleicht hilft Dir diese Denke etwas?

      Nicht wirklich ..., denn die in Zeiten ohne "sectioning" und dementsprechend "named sections" war halt Vieles noch anders! ;-)

      Gruß Gunther

      1. Hi,

        Mit Page Title meine ich den Seitentitel, also den Titel der jeweiligen Seite.
        Der Name der Website gehört imho in den <title> im <head>.

        Da kann man auch anderer Meinung sein – mit guter Begründung: In title gehört der Titel/die Hauptüberschrift der jeweiligen Seite – denn title ist das, was beim bookmarken von Seiten als Name des Bookmarks vorgeschlagen wird, und primär was zur Identifikation von (nicht aktiven) Tabs im Browser dient.

        Ein Dutzend Bookmarks oder Tabs, die nur den Website-Namen enthalten, sind schlecht für die Übersichtlichkeit.

        IdR. wird empfohlen, den Seiten-Titel in title zuerst aufzunehmen – dann ggf. gefolgt vom Website-Namen, abgetrennt durch ein sinnvolles Trennzeichen oder mehrere. (Wobei man mit letzteren auch nicht zu „typografisch“ werden sollte – !::! o.ä. hört sich in einem Screenreader auch nicht so dolle an.)

        MfG ChrisB

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
        1. Hi,

          IdR. wird empfohlen, den Seiten-Titel in title zuerst aufzunehmen – dann ggf. gefolgt vom Website-Namen, abgetrennt durch ein sinnvolles Trennzeichen ...

          Jep, da hast natürlich vollkommen Recht.

          Aber im H1 Element braucht/ sollte dann nur der Page Title stehen.

          Gruß Gunther