Korrekte Verwendung von H1-H6 Tags?

[Josh]

Hallo alle

Ein einfaches HTML Dokument sollte nur ein einziges H1 Tag haben zuoberst im Dokument, denke ich.

Aber was ist mit komplexeren Layouts? Was, wenn ich mehrere, nebeneinander existierende Inhalte habe, und nicht nur "einen Inhalt"? Z.B. könnte ich Teaser Boxen haben, welche auf ähnliche Artikel wie der Hauptartikel verweisen etc. Sollte ich für diese auch Header Tags (H1-H6) verwenden, oder würde das irgendwie die semantische Struktur des Hauptinhalts "abschwächen"?

Oder sollte ich alternativ diese zusätzlichen Header Tags faken mittels CSS Klassen o.ä.?

Im Moment arbeite ich an der Struktur einer neuen Website, welche in etwa so aussieht (der Hauptinhalt befindet sich zuoberst für bessere Accessibility):

CODE <style>
.hidden { display: absolute; left: -999px; width: 990px; }
</style>

<div id="content">
<h1>Titel des Hauptinhalts</h1>
...Viel Inhalt in Paragraphen und Subheaders...
</div>

<div id="boxes">
<h1 class="hidden">Teaser Boxen</h1>

<h2>Titel der Teaser Box 1</h2>
...wenig Inhalt...

<h2>Titel der Teaser Box 2</h2>
...wenig Inhalt...
</div>

<div id="header">
<h1 class="hidden">Navigation</h1>

<h2 class="hidden">Nützliche Links</h2>
...eine Liste nützlicher Links wie "Hilfe", "Kontakt", "Über" etc...

<h2 class="hidden">Sitemap</h2>
...eine hierarchisch verschachtelte Liste mit Links zu den versch. Bereichen der Website... (in visuellen Browsern wird dies mittels CSS als Dropdownmenü dargestellt)

<h2>Suche</h2>
...Suchform...

</div>

<div id="footer">
<h1>Disclaimer</h1>
...einige Statements und Links...
</div>



So, wie man sehen kann, würde ein Screenreader die Seite in etwa so "darstellen":


CODE
Titel des Hauptinhalts
Ein H2
Ein H3
Ein weiterer H3
Ein weiterer H2
Noch ein H3
Teaser Boxen
Titel der Teaser Box 1
Titel der Teaser Box 2
Navigation
Nützliche Links
Sitemap
Suche
Disclaimer



Und ein visueller Browser würde es in etwa so rendern:


CODE
+-----------------------------------------------------------------------------+
| (Nützliche Links Liste) |
| (Sitemap Liste) (Suchen Formular) |
+----------------------------------------------------+------------------------+
| Titel des Hauptinhalts | Titel der Teaser Box 1 |
| Ein H2 | |
| Ein H3 | Titel der Teaser Box 2 |
| Ein weiterer H3 | |
| Ein weiterer H2 | |
| Noch ein H3 | |
+----------------------------------------------------+------------------------+
| Disclaimer |
+-----------------------------------------------------------------------------+



Ist dies nun also semantisch korrekter Einsatz von Header Tags? Or sollte nur der Hauptinhalt über Header Tags verfügen? Und aller andere Inhalt sollte Fake Tags wie <div class="h1">, <div class="h2"> etc. benützen?

Was ist eure Meinung?

Ich freue mich auf eure interessanten Antworten!
Josh

 

[Guest]

Der juweliershop ist ja ganz schick geworden. Kannst du den nicht noch zentrieren ?

 

[DZVO]

also h1 sollte man nur einmal benutzen
h2 dagegen kann man öfters benutzen
denn h2 überschriften beziehen sich oder sollten sich auf den h1 tag beziehen.
jedenfalls hatte ich damit immer recht gute erfolge gehabt.

was aber unssing ist wäre
<h2>ähnliche Beiträge</h2>
hier würdest du deine seite abschwächen (keyworddichte - bei überschriften)
wie viele überschriften du auf einer seite verwenden kannst musst du testen.
ich selber versuche nicht mehr als 4-6 überschriften pro dukument zu verwenden.