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

SELF-Forum

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

pixxma
– Informationen zu den Bewertungsregeln

Hallo,

eigentlich ist es doch egal, welche der beiden folgenden Alternativen ich verwende, oder?

<body>  
<?php include “navigation.php”; ?>  
<main>  
        <header>Seitenüberschrift</header>  
        <article>  
        <header>Abschnittsüberschrift</header>  
        Text eines Abschnitts  
        </article>  
</main>  
<footer>Text Footer</footer>  
</body>

<body>  
<?php include “navigation.php”; ?>  
<header>Seitenüberschrift</header>  
<main>  
        <article>  
        <header>Abschnittsüberschrift</header>  
        Text eines Abschnitts  
        </article>  
</main>  
<footer>Text Footer</footer>  
</body>

Beim ersten Beispiel definiere ich die Seitenüberschrift als zugehörig zum main-Bereich, beim zweiten Beispiel gehört sie nicht dazu. Das ist doch eher eine Frage meiner Sichtweise als eine Frage von richtiger und falscher HTML5-Grammatik, oder wie seht ihr das?

MfG

pixxma

Beitrag melden
–
Informationen zu den Bewertungsregeln

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

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, pixxma!

    Beim ersten Beispiel definiere ich die Seitenüberschrift als zugehörig zum main-Bereich, beim zweiten Beispiel gehört sie nicht dazu. Das ist doch eher eine Frage meiner Sichtweise als eine Frage von richtiger und falscher HTML5-Grammatik, oder wie seht ihr das?

    Für Überschriften gibt es h1 - h6. Für richtige header würde ich zu 2. raten.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rum und Rumpelstilzchen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

    molily Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    eigentlich ist es doch egal, welche der beiden folgenden Alternativen ich verwende, oder?

    Ich halte beide für verbesserungsfähig.

    <?php include “navigation.php”; ?>

    <header>Seitenüberschrift</header>
    <main>
            <article>
            <header>Abschnittsüberschrift</header>
            Text eines Abschnitts
            </article>
    </main>
    <footer>Text Footer</footer>

      
Wenn der footer ein Kind von body ist und nicht Teil von main, sollte das auch für header gelten.  
  
Üblicherweise bringt man die Hauptnavigation ausgezeichnet mit nav im dokumentweiten header unter. Das ist nicht zwingend nötig, erscheint mir aber logisch. Ich würde vorschlagen:  
  
header  
  h1  
  nav  
    h1|h2  
    ul  
main  
  (Content|section|article|aside)+  
footer  
  h1|h2  
  
Der erste header, der nicht in einem Sectioning-Element verschaltet ist, ist der dokumentweite Header. Die Bäume  
  
nav  
header  
main  
  
und  
  
nav  
main  
  header  
  
erzeugen denselben Outline. Der dokumentweite header steht logisch gesehen ÜBER dem nav. Daher würde ich die Reihenfolge entsprechend anpassen. Und für mich gehört das oberste nav in den obersten header, wenn es nicht aus besonderen Gründen Teil von main ist. (Die meisten Hauptnavigationen sind nicht der Hauptinhalt, auf Portal- und Übersichtsseiten kann das natürlich der Fall sein.)  
  

> Beim ersten Beispiel definiere ich die Seitenüberschrift als zugehörig zum main-Bereich  
  
Das main-Element [erzeugt keine Section](http://www.w3.org/TR/html5/grouping-content.html#the-main-element). Der Outline ist also derselbe. Diese Zugehörigkeit gibt es natürlich im entstehenden DOM, aber nicht aus Sicht der HTML5-Sectioning-Logik.  
  
Mathias

-- 
[Chaplin.js - JavaScript application architecture on top of Backbone.js](http://chaplinjs.org/)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

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

      pixxma
      – Informationen zu den Bewertungsregeln

      Hallo,

      Wenn der footer ein Kind von body ist und nicht Teil von main, sollte das auch für header gelten.

      Üblicherweise bringt man die Hauptnavigation ausgezeichnet mit nav im dokumentweiten header unter. Das ist nicht zwingend nötig, erscheint mir aber logisch. Ich würde vorschlagen:

      header
        h1
        nav
          h1|h2
          ul
      main
        (Content|section|article|aside)+
      footer
        h1|h2

      Ohweh, ich hätte besser meine navigation.php auflösen sollen, die beinhaltet nämlich den dokumentweiten Haupt-Header und sollte deswegen wohl auch besser "header.php" heißen. Letztendlich habe ich es mit der PHP-Auflösung ziemlich genau so gemacht wie von Dir vorgeschlagen:

      header [dokumentweit]
        hgroup [Titel der Website]
          h1
          h2
        nav
      main
        header [Überschrift der Einzelseite = ein anderer header!]
        article
          header [wieder ein anderer header!]
        article
          header
        article
          header
      footer

      Meine Frage war schlecht formuliert, sie zielte nicht auf den ersten header ab, sondern auf den zweiten header [Überschrift der Einzelseite].
      Ich hatte mich also gefragt: ist dieser zweite header korrekt plaziert (main - header) oder sollte ich nicht besser header - main schreiben?
      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 entspräche ja nicht den Gegebenheiten.

      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.

      MfG

      pixxma

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        molily Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        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

        --
        Chaplin.js - JavaScript application architecture on top of Backbone.js
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

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

          pixxma
          – Informationen zu den Bewertungsregeln

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

          Was hältst Du von

          header
            h1.site-title
            nav
              ul
            h2.doc-title
            h3.doc-subtitle
          main
            ...

          Dann würde im dokumentweiten header auch der dokumentspezifische Titel vorkommen.

          MfG

          pixxma

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln