Wie man h1 in HTML5 richtig benutzt

Question 1

Welche der folgenden Methoden ist die richtige Strukturierung einer Seite:

1) h1nur inheader

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

Wenn ich h1ausschließlich inside headerals Titel der Site verwende, hat jede Seite den gleichen Inhalt für das h1Tag. Das scheint nicht sehr informativ zu sein.

2) h1in headerund sectionfür Site- und Seitentitel

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Ich habe auch Beispiele für die h1mehr als einmalige Verwendung in beiden headerund sectionTags gesehen. Ist es jedoch nicht falsch, zwei Titel für dieselbe Seite zu haben? Dieses Beispiel zeigt mehrere Header und h1Tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3) h1nur in section, wobei der Seitentitel hervorgehoben wird

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Schließlich scheint W3 die Verwendung h1innerhalb des sectionHauptelements zu empfehlen. Bedeutet das , dass ich es nicht im headerElement verwenden sollte?

Abschnitte können Überschriften eines beliebigen Ranges enthalten. Den Autoren wird jedoch dringend empfohlen, entweder nur h1-Elemente oder Elemente des entsprechenden Ranges für die Verschachtelungsebene des Abschnitts zu verwenden.

Question 2

Wie ich in meinem Kommentar feststelle und Sie im W3C zitieren, ist h1 eine Überschrift und kein Titel. Jedes Schnittelement kann eigene Überschriftenelemente haben. Sie können sich h1 nicht nur als Titel einer Seite vorstellen, sondern als Überschrift dieses bestimmten Abschnitts der Seite. Genau wie die Titelseite einer Zeitung kann jeder Artikel eine eigene Überschrift (oder einen eigenen Titel) haben.

Hier ist ein guter Artikel dazu.

Question 3

Ich würde empfehlen, h1überall zu verwenden. Vergiss h2durch h6.

Zurück in HTML4 wurden die 6 Überschriftsebenen verwendet, um die Abschnitte implizit zu definieren. Zum Beispiel,

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

Mit dem sectionElement können Sie jetzt die Abschnitte explizit definieren, anstatt sich auf die impliziten Abschnitte verlassen zu müssen, die von Ihrem Browser erstellt wurden, um die verschiedenen Überschriftsebenen zu lesen. Ein mit HTML5 ausgestatteter Browser weiß, dass alles in einem sectionElement um eine Ebene in der Dokumentübersicht "herabgestuft" wird. So wird zum Beispiel a section > h1semantisch wie ein behandelt h2, a section > section > h1ist wie ein h3usw.

Was verwirrend ist , dass Browser STILL implizite Abschnitte erstellen auf der Grundlage der h2- h6Schriftsebenen, aber die h2- h6Elemente ihre Stile ändern sich nicht. Das bedeutet, dass ein h2, egal in wie vielen Abschnitten es verschachtelt ist, immer noch wie ein erscheint h2(zumindest in Webkit). Dies wäre verwirrend, wenn Sie h2beispielsweise eine Überschrift der Stufe 4 sein sollten.

Mischen h2- h6mit sectionführt zu sehr unerwarteten Ergebnissen. Bleiben Sie einfach bei h1und verwenden Sie section, um explizite Abschnitte zu erstellen.

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <p>you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.</p>
<!-- optional --></header>
<section>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <p>that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
    <section>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

Darüber hinaus können Sie das <main>Element verwenden . Dieses Element enthält nur seitenspezifische Informationen und sollte keinen Inhalt enthalten, der auf der gesamten Website wiederholt wird, z. B. Navigationslinks, Kopf- / Fußzeilen der Website usw. Möglicherweise ist nur ein <main> Element in der Website vorhanden <body>. Ihre Lösung kann also so einfach sein:

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>

Question 4

Vergessen Sie jedoch nicht die Bedenken hinsichtlich der Barrierefreiheit. Laut MDN "sind derzeit keine Implementierungen des Gliederungsalgorithmus in grafischen Browsern oder Benutzeragenten für unterstützende Technologien bekannt." Dies bedeutet, dass ein Bildschirmleser möglicherweise nicht in der Lage ist, die relative Bedeutung von Abschnitten nur mit zu ermitteln <h1>. Möglicherweise sind mehr Überschriftenebenen wie <h2>und erforderlich <h3>.