Robert ohne: Sub-Überschriften und CSS dafür

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

  1. 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

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. @@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 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      1. <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

        1. @@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 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          1. 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

            1. 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

              --
              Es gibt viel zu tun: ToDo-Liste
              1. 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

          2. @@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 🖖

            --
            „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      2. 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

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. @@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 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          1. 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

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. @@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 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
              1. 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

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. @@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 🖖

                  --
                  „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe