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

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

Answer 2

5

Ein interessantes Thema lautete: iheni.com/html-5-to-the-h1-debate-rescue

Michael Jasper

Answer 3

59

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.

rauben
quelle

1

Ich habs. Es ist also in Ordnung, h1 in HTML5 mehrmals zu verwenden. Aus dem Artikel "In HTML 5 können Sie alle" sekundären "Inhalte auf einer Seite wie Navigation, Branding, Copyright-Hinweise spezifisch markieren". Was ist das richtige Markup für das Branding (Logo + Site-Titel)?

Deb

1

Am logischsten wäre das von Ihnen gewählte Header-Element. Es ist die Einführung in einen beliebigen Abschnitt und in Ihrem Fall in die gesamte Seite. Darin können Sie Dinge mit Divs, Navs, Hgroups usw. gruppieren oder Bilder einfach so lassen, wie sie sind, ein Element für sich.

Rob

2

@ Rob: meine Frage ist : „Was macht ein‚sectioning Element‘Hat es ein tatsächliches sein? <section>, <article>Oder anderes html5 Element oder kann es so etwas wie eine sein <div>mit einem sectionoder calloutKlasse?“.

Tenub

1

Abgesehen von @tenub article sind nav und section die einzigen Elemente, die Schnittelemente sind. Sie können alles darüber hier lesen: developer.whatwg.org/content-models.html#sectioning-content-0

Rob

Answer 4

1

Ich habs. Es ist also in Ordnung, h1 in HTML5 mehrmals zu verwenden. Aus dem Artikel "In HTML 5 können Sie alle" sekundären "Inhalte auf einer Seite wie Navigation, Branding, Copyright-Hinweise spezifisch markieren". Was ist das richtige Markup für das Branding (Logo + Site-Titel)?

Deb

Answer 5

1

Am logischsten wäre das von Ihnen gewählte Header-Element. Es ist die Einführung in einen beliebigen Abschnitt und in Ihrem Fall in die gesamte Seite. Darin können Sie Dinge mit Divs, Navs, Hgroups usw. gruppieren oder Bilder einfach so lassen, wie sie sind, ein Element für sich.

Rob

Answer 6

2

@ Rob: meine Frage ist : „Was macht ein‚sectioning Element‘Hat es ein tatsächliches sein? <section>, <article>Oder anderes html5 Element oder kann es so etwas wie eine sein <div>mit einem sectionoder calloutKlasse?“.

Tenub

Answer 7

1

Abgesehen von @tenub article sind nav und section die einzigen Elemente, die Schnittelemente sind. Sie können alles darüber hier lesen: developer.whatwg.org/content-models.html#sectioning-content-0

Rob

Answer 8

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>

Answer 9

Ich habe meine Meinung geändert. Nachdem ich das, was Sie geschrieben haben, noch einmal gelesen habe, verstehe ich den Punkt, den Sie ansprechen möchten, aber ich finde, dass Ihr Schreiben verwirrend ist. wie der Punkt über die Herabstufung von hx-Elementen, der, wenn er wörtlich genommen wird, falsch ist, aber im Kontext der Gliederung kann ich sehen, woher Sie kommen.

Rob

Answer 10

Beachten Sie, dass Sie <main> nicht in <article> verschachteln können . Logischerweise wäre es sinnvoll, den Hauptinhalt jedes Artikels zu markieren (z. B. den Hauptinhalt jedes Blogeintrags, wenn das gesamte HTML-Dokument das Rendern mehrerer Blogeinträge enthält), dies ist jedoch in der Spezifikation nicht zulässig.

Mikko Rantalainen

Answer 11

7

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

Michael McGinnis
quelle

Wenn unser Fokus also auf der Barrierefreiheit gegenüber SEO liegt, ist der Gliederungsalgorithmus und die Antwort von @ chharvey umstritten? Sollten wir OPs Szenario Nr. 1 verwenden, in dem h1 nur der Site-Titel ist und alle Seitentitel h2 sind?

Swhitmore

1

Nicht genau. Ich stimme Adrian Roselli zu , der sagt, dass er ein einzelnes <h1> pro Seite verwenden soll, wie einen Seitentitel, keinen Site-Titel. Es handelt sich also um denselben Inhalt wie das <title> -Tag, mit Ausnahme des Site-Namens, des Marketing-Slogans usw. Der Dokumentumrissalgorithmus wurde in keinem Browser implementiert. Für Abschnittsüberschriften verwende ich h2. Ein h1 ist eine Überschrift der obersten Ebene, unabhängig davon, wo Sie es verschachteln.

Michael McGinnis

Answer 12

Wenn unser Fokus also auf der Barrierefreiheit gegenüber SEO liegt, ist der Gliederungsalgorithmus und die Antwort von @ chharvey umstritten? Sollten wir OPs Szenario Nr. 1 verwenden, in dem h1 nur der Site-Titel ist und alle Seitentitel h2 sind?

Swhitmore

Answer 13

1

Nicht genau. Ich stimme Adrian Roselli zu , der sagt, dass er ein einzelnes <h1> pro Seite verwenden soll, wie einen Seitentitel, keinen Site-Titel. Es handelt sich also um denselben Inhalt wie das <title> -Tag, mit Ausnahme des Site-Namens, des Marketing-Slogans usw. Der Dokumentumrissalgorithmus wurde in keinem Browser implementiert. Für Abschnittsüberschriften verwende ich h2. Ein h1 ist eine Überschrift der obersten Ebene, unabhängig davon, wo Sie es verschachteln.

Michael McGinnis

Wie man h1 in HTML5 richtig benutzt

Antworten: