"Übertitel" mit korrektem Tag angeben

[blabla333]

Bislang verwende ich die einfache Struktur:

<article>
<header>
<h1>Überschrift</h1>
</header>
<p>Inhalt</p>
</article>

Jetzt möchte ich aber über der Überschrift eine Überschrift, welche die Kategorie angibt:

<article>
<header>
Kategorie
<h1>Überschrift</h1>
</header>
<p>Inhalt</p>
</article>

Die Angabe wird klein und grau gehalten sein, weshalb insgesamt <h1> und <h2> ausscheiden, da letzteres das Wichtigere darstellt.
Mir geht es vor allem darum, wie man das ganze im Sinne von HTML5 semantisch korrekt angibt.

z.B.:

Gemüse
Noch bessere Tomaten gezüchtet (h1-Überschrift)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

[Tronjer]

Zum Beispiel so:

<article>
  <hgroup>
    <h1>Titel</h1>
    <h2>Untertitel</h2>
  </hgroup>
  <p>Content…</p>
</article>

 

[blabla333]

Vielleicht stehe ich ja auf dem Schlauch, aber mein Problem ist, dass es ja genau umgekehrt dargestellt werden soll.
Die eigentliche Überschrift steht unten und darüber steht nur eine zusätzliche Information. Deshalb wäre semantisch gesehen h1 und h2 vertauscht. Würde ich aber tatsächlich h1 und h2 tauschen, wäre es vom Syntax her wieder falsch.

Siehe das formatierte Beispiel im ersten Post...

 

[threadi]

Wo steht, dass es vom Syntax her falsch wäre? In hgroup können imho beliebige Überschriften eingefügt werden?
hgroup – heading group (NEW) - HTML5

 

[blabla333]

Ich scheine da etwas grundsätzlich falsch zu verstehen, also korrigiert mich bitte:

- Semantisch gesehen steht h1 über h2, d.h. die Hauptüberschrift sollte h1 haben. Macht ja auch Sinn.
- Entsprechend müsste es in meinem Fall so aussehen, da die eigentliche Überschrift h1 erhält und die Angabe der Kategorie eine untergeordnete Bedeutung hat.

<article>
<header>
<h2>Kategorie</h2>
<h1>Überschrift</h1>
</header>
</article>

- Nach meinem Verständnis ist h2 vor h1 vom Syntax her falsch.
- Würde ich die beiden h's tauschen, hätte ich ja wieder einen ganz normalen Untertitel. Aber wie gesagt, ich möchte über dem Titel eine Angabe haben, die aber vom Sinn weniger bedeutend ist.
- Klar könnte ich einfach einen ganz normalen Text nehmen, mit span formatieren oder einen Div-Container nehmen, aber semantisch macht das dann wenig Sinn.

Wie gesagt, korrigiert mich, wenn ich irgendetwas falsch sehe.

 

[threadi]

Das siehst Du durchaus richtig. Nur ist die Aussage, dass h1 über h2 steht nicht auf deren Reihenfolge bezogen. Eine h2 kann durchaus vor einem h1 im Quellcode vorkommen.

 

[blabla333]

Echt? "fühlt" sich komisch an...

Danke.