HTML5-Semantik - H1 oder H2 für ARTIKEL-Titel in einem ABSCHNITT

10

Nach meinem Verständnis (basierend auf diesem Kapitel von Dive in HTML5: http://goo.gl/9zliD ) kann es als semantisch angemessen angesehen werden, H1-Tags in mehreren Bereichen der Seite als Methode zum Festlegen des wichtigsten Titels zu verwenden für diesen bestimmten Inhalt.

Wenn ich diese Methode verwende und einen ABSCHNITT habe, dem ich ein H1 von 'Artikeln' zugewiesen habe, sollte ich H1 oder H2 verwenden, um die Titel für ARTIKEL in diesem ABSCHNITT zu definieren? Dies ist für mich etwas verwirrend, da die Titel der Artikel die wichtigste Überschrift für ihren ARTIKEL sind, aber auch "Kinder" des Titels des ABSCHNITTS.

Beispielcode:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>
Matt
quelle
Ich habe gemischte Kritiken über die Dive into ... -Serie gehört. Soweit ich weiß, ist es möglicherweise nicht die beste Referenz.
the_e
4
@espais: Wo hast du diese Bewertungen gehört? Haben Sie einen Link zu einem der negativen?
Lèse Majesté
@ Lèse: Ich kann es an dieser Stelle nicht mehr als hier sagen. Ich bin mir ziemlich sicher, dass ich es in der Vergangenheit auf einer der SE-Sites gesehen habe ... aber im Moment habe ich keine Quellen.
the_e
1
@espais bizarr, da alle Verweise, die ich in Webmasters und SO darauf finden kann, nicht nur positiv, sondern in der Regel hoch bewertet sind. stackoverflow.com/search?q=%22dive+into+html5%22 , webmasters.stackexchange.com/search?q=%22dive+into+html5%22
Yahel
@ Lèse: Ja, da ich meinen Kommentar wirklich nicht
sichern kann,

Antworten:

7

Der Pilger ist damit nicht allein.

Laut Jeremy Keiths HTML5 für Webdesigner können Sie mehrere <h1>s in einem Dokument verwenden, ohne die Dokumentzusammenfassung zu ruinieren, solange sie in diskreten semantischen Abschnitts-Tags verschachtelt sind.

Zitieren direkt aus dem eBook (das ich bei iBooks gekauft habe)

Bisher bietet uns der neue Abschnittinhalt nicht viel mehr als das, was wir mit früheren HTML-Versionen tun könnten. Hier ist der Kicker: In HTML5 hat jeder Teil des Abschnittsinhalts einen eigenen Umriss. Das bedeutet, dass Sie nicht verfolgen müssen, welche Überschriftenebene Sie verwenden sollten - Sie können jedes Mal einfach von h1 aus starten:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Beispielcode auch aus dem Buch, Seite 73)

Yahel
quelle
@ Matt kein Problem. Dies bedeutet nicht, dass es möglicherweise keine Probleme damit gibt. Zwei kommen mir in den Sinn. Erstens kann dies für CSS etwas seltsam sein, aber es ist überschaubar. Noch wichtiger ist jedoch, dass dies für SEO gefährlich sein kann, da es eine ziemlich gut etablierte konventionelle Weisheit gibt, dass man nur eine <h1>auf Ihrer Seite haben sollte und dass alles andere die Fähigkeit von Crawlern beeinträchtigt, Ihre Website zu entschlüsseln. Aber ich bin kein SEO-Guru, deshalb kann ich das nicht kommentieren.
Yahel
2

Ich würde eher der Interpretation von Mark Pilgrim zustimmen . Wenn Sie Ihren Artikel in ein articleElement einschließen , können Sie erneut mit einer h1Überschrift für den Artikel beginnen.

In der HTML5-Spezifikation sollen articles als unabhängiger, in sich geschlossener Teil der Seite behandelt werden. Sie sollten in der Lage sein, das articleElement unverändert auf eine andere Seite zu übertragen, ohne die Überschriften neu zu formatieren.

Wenn Artikelüberschriften eine Fortsetzung der Dokumentüberschriftenhierarchie sein müssten, müssten Sie, wenn Sie das articledirekt unter einem bodyTag ablegen, zu gehen h1, aber wenn Sie es unter verschachtelten Abschnitten ablegen, müssten Sie es in h3/ ändern h4// h5usw., je nachdem, wo Sie es platzieren.

Tatsächlich sollten Sie jedes Mal, wenn Sie ein neues sectionoder erstellen article, zurückkehren h1, da Folgendes identisch ist:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

und:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

Nebenbei bemerkt, wenn Ihre Kopfzeile nur ein Überschriftenelement ist (z. B. h1) und nichts anderes, müssen Sie sie nicht in ein headerElement einschließen.

Lèse Majestät
quelle
Danke Lèse. Könnten Sie eine Referenz für Ihre Notiz zur angemessenen Verwendung des Elements 'header' angeben? Ich bin daran interessiert, mehr darüber zu lesen.
Matt
@Matt: Ich stütze mich hauptsächlich auf den Wortlaut der HTML5-Spezifikation, die header"eine Gruppe von Einführungs- oder Navigationshilfen" nennt . Dies und die Tatsache, dass die Spezifikationen für h1- h6nicht erfordern, dass sie in a verschachtelt sind header(und viele Beispiele enthalten, die direkt in dem Abschnitt verwendet werden, zu dem sie gehören), legen mir nahe, dass dies nicht erforderlich ist . Dieses Gefühl wird sowohl von Oli Studholme als auch von Remy Sharp von HTML5 Doctor bestätigt.
Lèse Majesté
0

Während die Artikeltitel Ihrer Seite wichtig sind, definiert im Allgemeinen die Überschrift der obersten Ebene der Seite den Inhalt der Seite. Manchmal ist es der Name des Artikels und manchmal, wie Sie zeigen, der Titel einer Auflistung von Artikeln.

<h1>My Very Interesting Articles</h1>

Diese Überschrift definiert die gesamte Seite als "interessante Artikel". Dann wird jeder Artikel aufgelistet, hat aber eine geringere Überschriftenebene.

Richard Testani
quelle
-1

Die offizielle Antwort von w3schools auf die Verwendung von Überschriften-Tags auf einer Seite lautet wie folgt: H1-Überschriften sollten als Hauptüberschriften verwendet werden, gefolgt von H2-Überschriften, dann den weniger wichtigen H3-Überschriften und so weiter.

Keith Groben
quelle
5
Es gibt eigentlich nichts "offizielles" an W3Schools. Es ist ein irreführender Name, da sie in keiner Weise mit dem W3C verbunden sind oder von ihm unterstützt werden.
Lèse Majesté
In der Tat finden Sie unter w3fools.com eine detaillierte Beschreibung, wie schrecklich W3Schools ist.
Yahel
Ich dachte, diese Q & A-Site hätte ein paar konstruktivere Benutzer. Ihr scheint ein bisschen hochmütig zu sein.
Keith Groben
2
Es hat nichts mit Hochmut zu tun und nichts mit dem Wunsch, gemein zu sein, und alles mit dem Wunsch, solche Fehlinformationen zu unterdrücken. Zu viele Leute denken, dass w3schools eine maßgebliche, genaue Quelle ist und die Qualität der Webentwicklung extrem beeinträchtigt. Der Sinn der Stackexchange-Sites besteht darin, genaue und qualitativ hochwertige Antworten bereitzustellen und ungenaue, falsche oder irreführende Antworten nach unten zu drücken und zu korrigieren.
Yahel
1
Tatsächlich hat Ihre Antwort meine Frage völlig ignoriert und eine Frage beantwortet, die nicht gestellt wurde. In meiner Frage stand klar: "Wenn ich diese Methode verwende ..." Dieser Teil war sogar fett gedruckt, um sicherzustellen, dass die Frage klar war. Ich würde annehmen, dass dies der wahrscheinlichste Grund ist, warum Ihre Antwort abgelehnt wurde.
Matt