Sub-Überschriften und CSS dafür

[Robert ohne]

Hallo Leute,

wie muss ich das im CSS notieren, damit alle Subüberschriften zu den jeweiligen Hauptunterschriften immer um einige pt oder % kleiner dargestellt werden und der Absand zum nachfolgenden Text erst nach der Subüberschirft wirkt?

[h1 - meine Überschrift ]
[h1sub - meine Subunterschift]
... Margin [Der Text]

Der H-Sub-Robert

[Matthias Apsel]

Hallo Robert ohne,

[h1 - meine Überschrift ]
[h1sub - meine Subunterschift]
... Margin
[Der Text]

Zunächst einmal wäre eine Überschrift der Gliederungsebene 2 denkbar.

<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
<p>Text</p>

Hier kannst du dann im CSS etwa mit h1 + h2 die Überschrift zweiter Ordnung ansprechen und dieser dein gewünschtes margin-bottom geben.

Handelt es sich aber nicht um eine eigenständige Überschrift, gibt es folgende Möglichkeit

<h1>Überschrift erster Ordnung</h1>
<p class="subheading">Ergänzung zur Überschrift</p>
<p>Text</p>

Im CSS an h1 + .subheading ein gewünschtes margin-bottom geben. Ob „subheading“ jetzt wirklich der passende Klassenbezeichner ist, …

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Handelt es sich aber nicht um eine eigenständige Überschrift, gibt es folgende Möglichkeit

<h1>Überschrift erster Ordnung</h1>
<p class="subheading">Ergänzung zur Überschrift</p>
<p>Text</p>

Das sollte dann so aussehen:

<header>
  <h1>Überschrift erster Ordnung</h1>
  <p>Ergänzung zur Überschrift</p>
</header>
<p>Text</p>

Ob „subheading“ jetzt wirklich der passende Klassenbezeichner ist, …

Die Klasse braucht man gar nicht.

LLAP 🖖

[Rolf b]

<header>? Das ist doch für den Seitenheader vorgesehen und nicht zum Klammern von Überschriften mit anderen Teilen. Oder habe ich jetzt das Prinzip <header> falsch verstanden?

Ich hätt's ja so gemacht (ungefiddlet):

<h1>Das ist meine Überschrift
<span>Das ist die Unterschrift zur Überschrift</span></h1>
<p>Lorem ipsum</p>

span, weil das das einzige Stil-Element ist, das in einem h1 erlaubt ist ohne eigenes Styling mitzubringen. Und ich würde es dann so stylen:

h1 span {
   display:block;
   font-style: italic;
   font-size: 0.9em;
}

damit die Überschriftenunterschrift etwas kleiner und kursiv wird.

Rolf

[Gunnar Bittersmann]

@@Rolf b

<header>? Das ist doch für den Seitenheader vorgesehen

Nein, nicht nur.

Ich hätt's ja so gemacht (ungefiddlet):

<h1>Das ist meine Überschrift
<span>Das ist die Unterschrift zur Überschrift</span></h1>
<p>Lorem ipsum</p>

Das ist auch möglich.

LLAP 🖖

[Rolf b]

Okay, ich hätte den selfhtml-Wiki-Artikel zu Ende lesen sollen :)

Aber da wird h2 als Subtitel vorgeschlagen - das kann es dann doch auch nicht sein.

Rolf

[Matthias Scharwies]

Servus!

Okay, ich hätte den selfhtml-Wiki-Artikel zu Ende lesen sollen :)

Aber da wird h2 als Subtitel vorgeschlagen - das kann es dann doch auch nicht sein.

Das könnt ihr alles selbst ändern / bzw. verbessern, wo immer ihr auch Lücken, Fehler und Verbesserungswürdiges findet!

Herzliche Grüße

Matthias Scharwies

[Rolf b]

Kann ich tun, aber sowas fasse ich nur nach Diskussion hier an - was best-practices für HTML sind, dazu maße ich mir kein abschließendes Urteil an. Wenn mir also bestätigt wird: stimmt, da ist <h2> Murx (oder Murchs?) und ein <p> ist besser, oder es gibt da semantisch noch was VIEL besseres, nämlich <xyz>, dann änder ich das gern.

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hätt's ja so gemacht

Da gehört noch ein Trennzeichen dazwischen, das visuell versteckt werden kann (d.h. nicht per display: none):

<h1>Lorem ipsum
  <span class=visually-hidden">–</span>
  <span>Warum Blindtexte doof sind</span>
</h1>
<p>Lorem ipsum dolor sit amet.</p>

Das ist auch möglich.

… ist aber etwas anderes. Hier gehört „Warum Blindtexte doof sind“ mit zur Überschrift.

Hier nicht:

<header>
  <h1>Lorem ipsum</h1>
  <p>Warum Blindtexte doof sind</p>
</header>
<p>Lorem ipsum dolor sit amet.</p>

Die zu verwendende Variante hängt also vom jeweiligen Anwendungsfall ab.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

<h1>Überschrift erster Ordnung</h1>
<p class="subheading">Ergänzung zur Überschrift</p>
<p>Text</p>

Das sollte dann so aussehen:

<header>
  <h1>Überschrift erster Ordnung</h1>
  <p>Ergänzung zur Überschrift</p>
</header>
<p>Text</p>

Was macht man, wenn es sich wirklich um eine Zwischenüberschrift mit Ergänzung handelt? Alles zu sectionieren muss auch nicht immer der richtige Weg sein.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Was macht man, wenn es sich wirklich um eine Zwischenüberschrift mit Ergänzung handelt?

Na dann ist es h2 – wie in deinem ersten Beispiel.

Oder hab ich dich falsch verstanden?

Alles zu sectionieren muss auch nicht immer der richtige Weg sein.

??

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Oder hab ich dich falsch verstanden?

Ja.

<h1>Hauptüberschrift</h1>

Text  

<h2>Überschrift</h2>  
<p>Ergänzung zur Überschrift</p>

Text

<h2>Überschrift</h2>   
<p>Ergänzung zur Überschrift</p>

Text

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

<h1>Hauptüberschrift</h1>
<p>Text</p>  

<section id="foo">
  <header>
    <h2>Überschrift</h2>  
    <p>Ergänzung zur Überschrift</p>
  </header>
  <p>Text</p>
<section>

<section id="bar">
  <header>
    <h2>Überschrift</h2>  
    <p>Ergänzung zur Überschrift</p>
  </header>
  <p>Text</p>
<section>

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Das ist das, was ich mit

Alles zu sectionieren muss auch nicht immer der richtige Weg sein.

meinte. Schließlich strukturieren auch Überschriften allein einen Text.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Das ist das, was ich mit

Alles zu sectionieren muss auch nicht immer der richtige Weg sein.

meinte. Schließlich strukturieren auch Überschriften allein einen Text.

Genauso könnte man argumentieren, dass dt allein auch eine dl strukturieren. (Und so ward es getan.)

Ich finde es sauberer, was zusammengehört auch in einem Element zusammenzufassen:

<dl>
  <div>
    <dt>Interrobang '‽'</dt>
    <dd>Satzzeichen, Kombination aus Fragezeichen und Ausrufezeichen</dd>
  </div>
  <div>
    <dt>Gnaborretni '⸘'</dt>
    <dd>Satzzeichen, umgedrehtes Interrobang für Spanisch u.a. Sprachen</dd>
  </div>
</dl>

(in die WHATWG-Spec aufgenommen)

Was eine Überschrift trägt ist prädestiniert dafür, durch ein section-Element geklammert zu werden.

LLAP 🖖