Gliederung der Überschriften in HTML5

[dodo123]

Hallo. Ich arbeite gerade an einem Wordpress-Design mit sehr vielen Überschriften.

Ich überlege, nun wie ich die Überschriften angehen soll. Also entweder klassisch von h1-h6 oder mit dem neuen Gliederungsalgorytmus, bei dem man mehrere Überschriften der gleichen Ordnung haben kann.

Das Problem ist folgendes: In meinem Aktuellen Design gibt es mehr als 6 Ebenen. Zur Erklärung: Die Überschrift in meinen Artikeln ist eine H1, dann hat noch jeder Artikel eine Unterüberschrift (H2). Im Artikel selbst soll es möglich sein, den Text in einzelne Abschnitte zu unterteilen, dafür nutze ich H3. Die Überschriften in der Sidebar sind mit H4 ausgezeichnet. Im Footer nutze ich für die Überschriften ein H5. Jetzt habe ich mit der alten Methode ja nur noch H6 übrig. Aber im Footer tauchen auch nochmal die Blogüberschriften auf (unter neueste Beiträge). Es soll die normale Überschrift und die Unterüberschrift angezeigt werden. Hätte ich in den Artikeln keine Unterüberschrift, wäre das auch kein Problem, ich würde einfach H6 nehmen und fertig.
Nun hätte ich aber mit dieser Methode noch eine H7. Laut HTML5 kann man ja beliebig viele Ebenen haben. (H1-Hxx). Kann ich also einfach eine H7 für die Unterüberschrift im Footer benutzen oder sollte ich das Dokument mit der anderen Methode aufbauen (so, dass jeder Bereich seine eigene H1 bekommt)? Ich glaube Sectioning Content nannte sich das.

Hier mal ein kleines Beispiel, was ich meine.

Alte Methode:

<section id="articles">
  <article>
     <h1>Artikelüberschrift</h1>
     <h2>Unterüberschrift</h2>
     <p>Lorem Ipsum dolor sit amet</p>
     <h3>Überschrift im Artikel</h3>
  </article>
</section>
    
<section id="sidebar">
  <h4>Infos</h4>
  <p>Lorem Ipsum dolor sit amet.</p>
</section>
    
<footer>
  <h5>neueste Beiträge</h5>
  <h6>Artikelüberschrift</h6>
  <h7>Unterüberschrift</h7> <!-- geht das? -->
</footer>

Neue Methode:

<section id="articles">
  <article>
    <h1>Artikelüberschrift</h1>
    <h2>Unterüberschrift</h2>
    <p>Lorem Ipsum dolor sit amet</p>
    <h3>Überschrift im Artikel</h3>
  </article>
</section>
    
<section id="sidebar">
  <h1>Infos</h1>
  <p>Lorem Ipsum dolor sit amet.</p>
  <h1>Kategorien</h1>
  <ul>
    <li><a href="//">Kategorie 1</a></li>
    <li><a href="//">Kategorie 2</a></li>
  </ul>
</section>
    
<footer>
  <h1>neueste Beiträge</h1>
  <h2>Artikelüberschrift</h2>
  <h3>Unterüberschrift</h3>
  <p>Lorem Ipsum Dolor Sit amet</p>
      
  <h1>Neueste Kommentare</h1>
  <p>blabla</p>
</footer>

Welche Methode ist besser bzw. sinnvoller? Und wie sieht das in Bezug auf SEO aus, wenn ich Methode 2 wähle?

Grüße Dodo

 

[Anna Bolika]

Was spräche denn in der sidebar gegen dies hier?

<section id="sidebar">

   <header>Infos</header>
  
   <p>Lorem Ipsum dolor sit amet.</p>
  
   <dl>
      <dt>Kategorien</dt>

      <dd>Kategorie 1</dd>
      <dd>Kategorie 2</dd>
   </dl>
</section>

Was deinen footer angeht, verstehe ich dich nicht ganz. Gibst du da Beiträge vollständig aus, teast du sie an oder ist das nur eine Aufzählung. Im letzten Fall würde ich auch eine <dl> verwenden. Gibt es die Seite irgendwo zu sehen?

 

[dodo123]

Mein Beispiel war ein bisschen ungenau. Die Kategorien sollen eigentlich eine Linkliste sein. Hab es jetzt nur der Einfachheit halber weggelassen, aber ich ändere das noch.

im Footer sollen die Beiträge kurz angeteasert werden, also nur mit den beiden Überschriften und einem kurzen Text. Die Seite ist noch nicht online, bis jetzt ist das nur ein HTML-Dummy aus dem ich später ein WP-Theme basteln will. Einfach nur zur Übung, ich dachte dadurch lern ich Wordpress am besten.

 

[harryman]

Für deine

<section id="sidebar"></section>

würde ich

<aside></aside>

nehmen.

Innerhalb der einzelnen Blöcke würde ich mit der Überschriftennummerierung immer wieder von vorn beginnen (also deine 2. Variante), wobei aus SEO-Sicht ich nur 1x h1 für die gesamte Webseite verwenden würde.