it-swarm.com.de

Wie man h1 in HTML5 richtig benutzt

Welche der folgenden Methoden ist die richtige Art, eine Seite zu strukturieren:

1) h1 Nur in header

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

Wenn ich h1 Ausschließlich innerhalb von header als Seitentitel verwende, hat jede Seite den gleichen Inhalt für das Tag h1. Das scheint nicht sehr informativ zu sein.


2) h1 In header und section fü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 mehrfache Verwendung von h1 In den beiden Tags header und section gesehen. Ist es nicht falsch, zwei Titel für dieselbe Seite zu haben? Dieses Beispiel zeigt mehrere Header- und h1 - Tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/


3) h1 Nur in section unter Hervorhebung des Seitentitels

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

Schließlich scheint W3 die Verwendung von h1 Im Hauptelement section zu empfehlen. Heißt das, ich sollte es nicht im Element header verwenden?

Abschnitte können Überschriften mit beliebigem Rang enthalten. Autoren wird jedoch dringend empfohlen, entweder nur h1-Elemente oder Elemente mit dem entsprechenden Rang für die Verschachtelungsebene des Abschnitts zu verwenden.

76
deb

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

Hier ist ein guter Artikel dazu.

59
Rob

Ich würde empfehlen, durchgehend h1 Zu verwenden. Vergessen Sie h2 Durch h6.

Zurück in HTML4 wurden die 6 Überschriftenebenen verwendet, um die Abschnitte implizit zu definieren. Beispielsweise,

<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 section -Element können Sie jetzt die Abschnitte explizit definieren, anstatt sich auf die impliziten Abschnitte verlassen zu müssen, die von Ihrem Browser beim Lesen der verschiedenen Überschriftenebenen erstellt wurden. Ein mit HTML5 ausgestatteter Browser weiß, dass alles in einem section -Element um eine Ebene in der Gliederung des Dokuments "herabgestuft" wird. So wird beispielsweise ein section > h1 Semantisch wie ein h2 Behandelt, ein section > section > h1 Wie ein h3 Usw.

Verwirrend ist, dass Browser [~ # ~] immer noch [~ # ~] implizite Abschnitte basierend auf den Überschriftenebenen h2 - h6 Erstellen. Die Elemente h2 - h6 ändern jedoch ihren Stil nicht. Das bedeutet, dass ein h2, Egal in wie vielen Abschnitten es verschachtelt ist, immer noch wie ein h2 Angezeigt wird (zumindest im Webkit). Dies wäre verwirrend, wenn Ihr h2 Beispielsweise eine Überschrift der Stufe 4 sein sollte.

Das Mischen von h2 - h6 Mit section führt zu sehr unerwarteten Ergebnissen. Bleiben Sie nur bei h1 Und 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>

Außerdem können Sie das Element <main> verwenden. Dieses Element enthält nur Informationen, die für die Seite spezifisch sind, und sollte keinen Inhalt enthalten, der auf der gesamten Website wiederholt wird, z. B. Navigationslinks, Kopf-/Fußzeilen der Website usw. Möglicherweise gibt es nur eine <main> - Element in <body>. So einfach kann Ihre Lösung sein:

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

Vergessen Sie jedoch nicht die Zugänglichkeitsbedenken. Laut MDN , "sind derzeit keine Implementierungen des Gliederungsalgorithmus in grafischen Browsern oder Benutzeragenten für Hilfstechnologien bekannt." Dies bedeutet, dass ein Screenreader möglicherweise nicht in der Lage ist, die relative Bedeutung von Abschnitten mit nur <h1>. Möglicherweise sind weitere Überschriftenebenen erforderlich, z. B. <h2> und <h3>.

5