verschachtelte Überschriften nicht erlaubt?

[michat]

Hi,

ich habe jetzt bestimmt ein Stunde vergeblich versucht Überschriften ineinander zu verschachteln, also einer h2 Überschrift eine h3 "Unter"-schrift zu verpassen:

Egal ob h2 im Stylsheet überhaupt definiert ist oder nicht, die h3 Überschrift läßt sich so nicht wie gewünscht platzieren:

<h2 id="angebot_titel">
Individuelles Fitnesstraining
<h3 class="angebot_art">Einzelkurs</h3>
</h2>

Was mit einem div ohne probleme funktioniert:

<div id="angebot_titel">
Individuelles Fitnesstraining
<h3 id="angebot_art">Einzelkurs</h3>
</div>

Ich habe das zugehörige CSS hier nicht miteingefügt, weil es recht verschachtelt ist, ich jedoch nun vermute dass es mit einer falschen Verschachtelung überhaupt nichts zu tun hat sondern schlichtweg Überschriften (hn°) prinzipiell nicht wie im Beispiel ineinander verschachtelbar sind.

Habe ich mit dieser Annahme recht?

bye

MH

[misterunknown]

Moin,

Habe ich mit dieser Annahme recht?

Ja, du hast recht, h-Elemente zu verschachteln ist nicht valide. Allerdings verstehe ich auch nicht, warum du das machen willst. Mit CSS lässt sich auch eine <http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Überschrift h2 nach einer Überschrift h1> selektieren.

<h1>Überschrift 1</h1>  
<h2>Überschrift 2</h2>

h1 + h2 { font-size: 0.8em; color: red; }

Grüße Marco

[michat]

»»... Allerdings verstehe ich auch nicht, warum du das machen willst. Mit CSS lässt sich auch eine <http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Überschrift h2 nach einer Überschrift h1> selektieren.

Das betreffende h2/div-Element ist absolut positioniert. Das ging aus meinem ersten Posting ohne CSS nicht hervor, mea culpa. Unter diesen Umständen muss das untergeordete h3-Element wohl vom übergeordneten h2/div umschlossen werden. Zumindest habe ich das nur so hinbekommen. Aber halt nur mit nem div, nicht mit nem h2.

Verschachtelte hn°-Elemente lassen sich auch nicht mit Tricks wie display: inline o.ä. zu validem code machen?

Es bleibt mir also unter den gegebenen Umständen nur ein div statt hn°-Element zu benutzen?

Danke euch beiden.

bye

MH

[ChrisB]

Hi,

Das betreffende h2/div-Element ist absolut positioniert. Das ging aus meinem ersten Posting ohne CSS nicht hervor, mea culpa. Unter diesen Umständen muss das untergeordete h3-Element wohl vom übergeordneten h2/div umschlossen werden. Zumindest habe ich das nur so hinbekommen. Aber halt nur mit nem div, nicht mit nem h2.

Und warum positionierst du dann nicht ein Div absolut, das h2- und h3-Überschrift gruppiert?

Verschachtelte hn°-Elemente lassen sich auch nicht mit Tricks wie display: inline o.ä. zu validem code machen?

Nein. HTML ist und bleibt HTML, egal wie es eventuell formatiert wird.

MfG ChrisB

[michat]

Und warum positionierst du dann nicht ein Div absolut, das h2- und h3-Überschrift gruppiert?

Der Begriff "Div-Suppe" hat sich mir so stark eingeprägt, dass ich natürlich versuche genau das zu vermeiden ... wenn es geht. Deine Anregung berücksichtig jedoch wie an sich gewünscht bestimmte Elemente *hierarchisch* auszuzeichen. Das ist ne Überlegung wert.

Das Beispiel zeigt eigentlich, dass eine Verschachtelung von hn°-Elementen durchaus sinnvoll sein könnte.

[Gunther]

Hi!

Der Begriff "Div-Suppe" hat sich mir so stark eingeprägt, dass ich natürlich versuche genau das zu vermeiden ... wenn es geht. Deine Anregung berücksichtig jedoch wie an sich gewünscht bestimmte Elemente *hierarchisch* auszuzeichen. Das ist ne Überlegung wert.

Die "Div-Suppe" oder auch "Divitis" hat aber nichts damit zu tun, dass man nicht ein Div-Element verwenden kann,_da_wo es_erforderlich_ist! Die Erfordernis kann durchaus, oder eigentlich nur durch Anforderungen für die Positionierung/ Gestaltung entstehen.

Das Beispiel zeigt eigentlich, dass eine Verschachtelung von hn°-Elementen durchaus sinnvoll sein könnte.

Sorry, aber hier muss ich dann doch widersprechen. Denn bei der Auszeichnung von Text mittels HTML geht es darum, diesem jeweils die bestmögliche Bedeutung (Stichwort "Semantik") zu verleihen.
Hx-Elemente kennzeichnen Überschriften der Ordnung 'x'. Und entweder ist ein Text eine Überschrift, oder nicht. Und wenn ja, dann hat diese Überschrift eine bestimmte Ordnung, die sich aus ihrer jeweiligen Position im Gesamtkontext ergibt. Von daher halte ich es für ausgeschlossen, dass es einen "sinnvollen" (oder besser: semantisch korrekten) Fall geben kann, wo eine Überschrift der Ordnung X eine weitere Überschrift der Ordnung X+1 enthält.

Gruß Gunther

[michat]

Hi!

...Die Erfordernis kann durchaus, oder eigentlich nur durch Anforderungen für die Positionierung/ Gestaltung entstehen.

Damit kann ich dann gut leben, also ein umschließendes div für dei absolute Positionierung.

Das Beispiel zeigt eigentlich, dass eine Verschachtelung von hn°-Elementen durchaus sinnvoll sein könnte.

Sorry, aber hier muss ich dann doch widersprechen. Denn bei der Auszeichnung von Text mittels HTML geht es darum, diesem jeweils die bestmögliche Bedeutung (Stichwort "Semantik") zu verleihen.

Zustimm.

Hx-Elemente kennzeichnen Überschriften der Ordnung 'x'. Und entweder ist ein Text eine Überschrift, oder nicht.

In meinem Beispiel geht es um Überschriften. Die durch hx kenntlich gemachte Hierarchie ist aber nicht notwendigerweise in sich wiederspruchsfrei. Ok, das ist jetzt ein anderes Thema, und führt von meinem oben angesprochenen Problem weg. Sieh also bitte das weitere nicht als Widerspruch gegen die Lösung mit dem div sondern eher als Überlegung:

Die Hierarchie

h1 ->(mehrere)h2 -> (jeweiles mehrere) h3

kann sinnvoll verstanden werden als Hierarchisierung vom Allgemeinen ins Spezielle und/oder vom Wichtigen zum Unwichtigen. Oder auch vom Einmaligen über das Allgemeine zum Speziellen.
Das Einmalige ist die Firma/das Geschäft/die Praxis
Das Allgemeine sind die Einzelkurse, die Gruppenkurse, ...
Das Spezielle ist das individuelle Fitnesstraining / die Einzelmassage, ...

In diesem Fall ist das in der Hierarchie höher stehende Element, das unwichtigere, es ist eigentlich mehr ein Sortierkriterium, und als solches eigentlich ein Attribut oder eine Klasse, es besteht eine Abhängigkeit. Die Richtungsumkehrung von Allgemein->Speziell und Unwichtiger<-Wichtiger ließ mich für das in der Hierarchie höhere Element eine h3-Überschrift wählen (weil allgemeiner/unwichtiger/nur Attribut) und für das an sich niedrigere Element eine h2-Überschrift wählen. Und die Empfindung dass das höhere Element für das niedriger eigentlich nur eine Art Klasse darstellt führt mich wohl dazu, es wie im Beispiel zu umklammern.

Ja, die Wichtigkeit alleine könnte man natürlich auch rein durch die gewählte font-size und font-weight veranschaulichen ohne h2 und h3 zu vertauschen. Ich räume ein, dass ich dabei dann doch Suchmaschinenverhalten im Hinterkopf habe, was mich veranlaßt in diesem Fall das Wichtigere/Speziellere in der Hierarchie gegenüber dem Allgemeineren zu bevorzugen.

Und wenn ja, dann hat diese Überschrift eine bestimmte Ordnung, die sich aus ihrer jeweiligen Position im Gesamtkontext ergibt. Von daher halte ich es für ausgeschlossen, dass es einen "sinnvollen" (oder besser: semantisch korrekten) Fall geben kann, wo eine Überschrift der Ordnung X eine weitere Überschrift der Ordnung X+1 enthält.

Ich widerspreche dem nicht grundsätzlich, denn es wird in den meisten Fällen so sein, aber s.o.

bye

MH

[Gunnar Bittersmann]

@@michat:

nuqneH

Das Beispiel zeigt eigentlich, dass eine Verschachtelung von hn°-Elementen durchaus sinnvoll sein könnte.

Nein. Mir ist auch nicht klar, warum du Überschriften schachteln willst anstatt sie nacheinander zu notieren.

Was du schachteln kannst, sind section- und article-Elemente:

<section>  
  <h2>foo</h2>  
  <section>  
    <h3>bar</h3>  
    <p>baz</p>  
  </section>  
</section>

Und zum Gruppieren von Überschriften gibt es hgroup, was aber nur die erste Überschrift in der Outline lässt. Das willst du wohl nicht.

Qapla'

[dedlfix]

Tach!

Ich habe das zugehörige CSS hier nicht miteingefügt, weil es recht verschachtelt ist, ich jedoch nun vermute dass es mit einer falschen Verschachtelung überhaupt nichts zu tun hat sondern schlichtweg Überschriften (hn°) prinzipiell nicht wie im Beispiel ineinander verschachtelbar sind.

Du versuchst Block-Elemente zu verschachten, die in dem Fall nicht verschachtelbar sind. Die Browser schließen daraufhin das erste Element und das zweite wird dann ein Geschwister von ihm. Anschließend kommt noch ein schließender Tag, der ignoriert wird, weil keiner zugehöriges Element mehr offen ist. Du kannst das sehr schön nachvollziehen, wenn du dir mit einem Tool wie Firebug oder einem anderen browserinternen DOM-Visualisierer anschaust, was der Browser draus gemacht hat. Da stehen dann die beiden Überschriften in derselben Hierarchiestufe.

dedlfix.