it-swarm.com.de

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

Meines Wissens nach (basierend auf diesem Kapitel von Dive into HTML5: http://goo.gl/9zliD ) kann die Verwendung von H1-Tags in mehreren Bereichen der Seite als semantisch angemessen angesehen werden Methode zum Festlegen des wichtigsten Titels 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 darstellen, aber auch "Kinder" des Titels des ABSCHNITTS sind.

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>
10
Matt

Der Pilger ist nicht der Einzige, der das behauptet.

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

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

Bisher bieten die neuen Abschnitte nicht viel mehr als die früheren HTML-Versionen. Hier ist der Kicker: In HTML5 verfügt jeder Abschnitt des Inhalts über eine eigene, in sich geschlossene Gliederung. 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)

7
Yahel

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

In der HTML5-Spezifikation sollen articles als unabhängiger, eigenständiger Teil der Seite behandelt werden. Sie sollten in der Lage sein, das article -Element wie es ist auf eine andere Seite zu übertragen, ohne die Überschriften neu zu formatieren.

Wenn Artikelüberschriften eine Fortsetzung der Dokumentüberschriftenhierarchie sein mussten, müssen Sie beim Ablegen des article direkt unter einem body -Tag zu h1 wechseln Wenn Sie es unter verschachtelten Abschnitten ablegen, müssen Sie es in h3/h4/h5/etc. ändern, je nachdem, wo Sie es platzieren.

Tatsächlich sollten Sie jedes Mal, wenn Sie ein neues section oder article erstellen, zu h1 zurückkehren, da die folgenden Angaben identisch sind:

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

Wenn Ihre Kopfzeile nur ein Überschriftenelement (z. B. h1) und sonst nichts ist, müssen Sie sie nicht in ein header -Element einschließen.

2
Lèse majesté

Während die Artikelüberschriften Ihrer Seite wichtig sind, definiert in der Regel 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.

0
Richard Testani