Matthias Scharwies: Wiki: h1-h6

Servus!

Gunnar hat für die Hierarchie der Überschriften ein neues Beispiel vorgeschlagen.

  1. Sollte man diese (vorhandene) Gliederung nehmen oder habt ihr einen anderen Vorschlag?
 Grafikdesign Farbpinsel → h1
    Leistungen → h2
        Print → h3
        Web → h3
    Kontakt → h2
        E-Mail → h3
        Anschrift → h3

2. Mit Inhalt füllen oder ohne (ich wär für ohne)

3. schon einen header einbauen (ich würd's eher weglassen)

  • Wenn ja, was soll in den header rein? (Ich würd' da nämlich auch ne h1 nehmen.)

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
  1. @@Matthias Scharwies

    Gunnar hat für die Hierarchie der Überschriften ein neues Beispiel vorgeschlagen.

    1. Sollte man diese (vorhandene) Gliederung nehmen oder habt ihr einen anderen Vorschlag?

    Ein anderes Beispiel, welches nicht den Spezialfall One-Pager abbildet, bei dem die Site-Kennung gleich der Seitenüberschrift ist.

    • Wenn ja, was soll in den header rein? (Ich würd' da nämlich auch ne h1 nehmen.)
    <header>
    	<a href="#main">Navigation überspringen</a>
    	<img id="site-logo" src="logo.svg" alt="example dot com"/>
    	<p id="claim">Wir stecken den Claim ab.</p>
    	<nav></nav>
    </header>
    

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Servus!

      @@Matthias Scharwies

      Gunnar hat für die Hierarchie der Überschriften ein neues Beispiel vorgeschlagen.

      1. Sollte man diese (vorhandene) Gliederung nehmen oder habt ihr einen anderen Vorschlag?

      Ein anderes Beispiel, welches nicht den Spezialfall One-Pager abbildet, bei dem die Site-Kennung gleich der Seitenüberschrift ist.

      Evtl. die Hierarchie einer Wikiseite?

      h1 Überschriften 
        h2 Aufgaben
      
        h2 Überschriften richtig einsetzen
           h3 Hierarchien
           h3 subheadings und titles (wie heißt das auf Deutsch/ in der Mediensprache?)
               <heading>
                  <h1> bla</h1>
                  <p>beste Seite wo gibt!</p>
               </heading>
        h2 Überschriften mit CSS formatieren
      
        h2 Quellen
          h3 siehe auch
          h3 Weblinks
      

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Hallo Matthias Scharwies,

        h1 Überschriften 
          …
                 <heading>
                    <h1> bla</h1>
        

        Da war doch mal was mit einem kaputten outline-Algorithmus?

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
      2. Servus!

        h3 subheadings und titles (wie heißt das auf Deutsch/ in der Mediensprache?)

        Unterüberschrift (subline) oder Spitzmarke

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
  2. Servus!

    Die Seite sieht jetzt auf jeden Fall schon mal besser als vorher aus.

    Eine Sache stört mich jetzt aber immer mehr:

    Wie eine Überschrift vom Browser genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Überschriften darzustellen. Mit Stylesheets (CSS) können Sie Überschriften jedoch nach Wunsch formatieren.

    (Hervorhebung von mir) Das ist doch wohl mittlerweile (2017) jedem klar, dass man ein HTML-Element (nur) mit CSS gestalten kann und dann doch Einfluss nimmt.

    Dieser Text findet sich bei vielen HTML-Elementen wieder und sollte imho auch geändert werden.

    Textvorschlag

    Mit CSS (Stylesheets) können Sie Überschriften nach Wunsch formatieren.
    

    Was haltet ihr davon?

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. Hallo Matthias Scharwies,

      Eine Sache stört mich jetzt aber immer mehr:

      Wie eine Überschrift vom Browser genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Überschriften darzustellen. Mit Stylesheets (CSS) können Sie Überschriften jedoch nach Wunsch formatieren.

      Ja, die Formulierung ist nicht mehr zeitgemäß.

      Das ist doch wohl mittlerweile (2017) jedem klar, dass man ein HTML-Element (nur) mit CSS gestalten kann und dann doch Einfluss nimmt.

      Darauf würde ich nicht wetten.

      Dieser Text findet sich bei vielen HTML-Elementen wieder und sollte imho auch geändert werden.

      Textvorschlag

      Mit CSS (Stylesheets) können Sie Überschriften nach Wunsch formatieren.
      

      Was haltet ihr davon?

      Sie benötigen CSS, um die Überschriften nach Ihren Vorstellungen zu formatieren.
      

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
      1. Hallo,

        Textvorschlag

        Sie benötigen CSS, um die Überschriften nach Ihren Vorstellungen zu formatieren.
        

        Das klingt, als ob man sich CSS erst noch irgendwo besorgen muss. IMHO besser: „Verwenden Sie CSS,…“

        Gruß
        Kalk

    2. Hallo Matthias,

      der Kern der Aussage ist ist doch, dass man sich nicht nur deshalb für beispielsweise <h2> statt <h4> entscheiden soll, weil <h2> für den konkreten Anwendungsfall standardmäßig gefälliger formatiert wird. Stattdessen sollte man die Darstellung von <h4> anpassen. Die alte Formulierung deutet das zumindest an, die neue nicht.

      Daher mein Gegenvorschlag:

      Verwenden Sie die unterschiedlichen Stufen für die Überschriften Ihres Dokumentes ausschließlich gemäß der gewünschten Hierarchie der Abschnitte. Die gewünschte Darstellung erreichen Sie dann nicht durch die Auswahl einer semantisch falschen Hierarchie Ihrer Überschriften, sondern durch Anpassung des CSS.

      Tipp: Wenn Ihre Dokumentstruktur eine Überschrift vom Typ <h4> aufweist, aber keine vom Typ <h3>, ist Ihr Dokument sehr wahrscheinlich falsch strukturiert. Dasselbe gilt selbstverständlich für andere Lücken in der Hierarchie der Überschriften.

      Ich mach den Sinn der Hierarchie der Überschriften übrigens meist anhand einer virtuellen Nummerierung deutlich:

      1 Überschrift vom Typ <h1>

      1.1 Überschrift vom Typ <h2>

      1.1.1 Überschrift vom Typ <h3>

      1.1.1.1

      Damit wird dann auch deutlich, weshalb sechs Ebenen ausreichen sollten.

      MfG, at

      1. Servus!

        Hallo Matthias,

        der Kern der Aussage ist ist doch, dass man sich nicht nur deshalb für beispielsweise <h2> statt <h4> entscheiden soll, weil <h2> für den konkreten Anwendungsfall standardmäßig gefälliger formatiert wird. Stattdessen sollte man die Darstellung von <h4> anpassen. Die alte Formulierung deutet das zumindest an, die neue nicht.

        Daher mein Gegenvorschlag:

        Verwenden Sie die unterschiedlichen Stufen für die Überschriften Ihres Dokumentes ausschließlich gemäß der gewünschten Hierarchie der Abschnitte. Die gewünschte Darstellung erreichen Sie dann nicht durch die Auswahl einer semantisch falschen Hierarchie Ihrer Überschriften, sondern durch Anpassung des CSS.

        Tipp: Wenn Ihre Dokumentstruktur eine Überschrift vom Typ <h4> aufweist, aber keine vom Typ <h3>, ist Ihr Dokument sehr wahrscheinlich falsch strukturiert. Dasselbe gilt selbstverständlich für andere Lücken in der Hierarchie der Überschriften.

        Ja. Wo würdest du den einfügen, bzw. was ersetzen? Mach einfach!

        Ich mach den Sinn der Hierarchie der Überschriften übrigens meist anhand einer virtuellen Nummerierung deutlich:

        1 Überschrift vom Typ <h1>

        1.1 Überschrift vom Typ <h2>

        1.1.1 Überschrift vom Typ <h3>

        1.1.1.1

        Damit wird dann auch deutlich, weshalb sechs Ebenen ausreichen sollten.

        Das Beispiel ist sehr gut, das habe ich im Beispiel 1 mit aufgenommen. (Eigentlich hatte ich kurz überlegt, dass mit counters() zu realisieren, war mir dann für ein HTML-Beispiel doch zu komplex.)

        Ich hatte gestern noch die Seite zu header überarbeitet. Unser 2. Beispiel hatte einen header mit nur einem Kindelement - ist jetzt auch verbessert.

        Weiteren Optimierungsbedarf gibt es für alle anderen Seiten zu den Textstrukturierungselementen und bei den Textauszeichnungselementen.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. Hallo Matthias.

          Ja. Wo würdest du den einfügen, bzw. was ersetzen? Mach einfach!

          Okay, ich mach mal.

          Das Beispiel ist sehr gut, das habe ich im Beispiel 1 mit aufgenommen. (Eigentlich hatte ich kurz überlegt, dass mit counters() zu realisieren, war mir dann für ein HTML-Beispiel doch zu komplex.)

          Yep! Ich habe so etwas mit counters() realisiert und es ist deutlich zu komplex für ein HTML-Beispiel auf dem Level von einfachen Überschriften. Damit würde man auch die Aussage, man könne alles weitere ja mittels CSS justieren, gleich wieder in ein ganz anderes Licht stellen.

          Ich hatte gestern noch die Seite zu header überarbeitet. Unser 2. Beispiel hatte einen header mit nur einem Kindelement - ist jetzt auch verbessert.

          Sehr gut!

          Weiteren Optimierungsbedarf gibt es für alle anderen Seiten zu den Textstrukturierungselementen und bei den Textauszeichnungselementen.

          Ich sehe mich mal um …

          MfG, at

          1. Servus!

            Ja. Wo würdest du den einfügen, bzw. was ersetzen? Mach einfach!

            Okay, ich mach mal.

            Vielen Dank!

            Weiteren Optimierungsbedarf gibt es für alle anderen Seiten zu den Textstrukturierungselementen und bei den Textauszeichnungselementen.

            Ich sehe mich mal um …

            Was wir vor allem brauchen, sind gute, anschauliche Beispiele (wie das mit 1.1.1 Überschrift vom Typ <h3>)!

            Bei den Textauszeichnungslementen ist HTML/Textauszeichnung/mit_CSS_formatieren eingebunden.

            Diese Einbindung

            {{:HTML/Textauszeichnung/mit CSS formatieren}}
            

            kann man durch "Verwenden Sie …, um Text und Absätze nach Ihren Vorstellungen zu formatieren." ersetzen oder ersatzlos streichen.

            MfG, at

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste
            1. Hallo Matthias,

              Was wir vor allem brauchen, sind gute, anschauliche Beispiele (wie das mit 1.1.1 Überschrift vom Typ <h3>)!

              Ich kann euch nichts versprechen, aber dann weiß ich zumindest, wo ich meinen Schwerpunkt setzen werde.

              Bei den Textauszeichnungslementen ist HTML/Textauszeichnung/mit_CSS_formatieren eingebunden.

              Diese Einbindung

              {{:HTML/Textauszeichnung/mit CSS formatieren}}
              

              kann man durch "Verwenden Sie …, um Text und Absätze nach Ihren Vorstellungen zu formatieren." ersetzen oder ersatzlos streichen.

              Ernstgemeinte Frage: Ist es sinnvoll, sich solche Konventionen auf unterschiedlichen Seiten zusammenzusammeln oder gibt es vielleicht so etwas wie ein Cheatsheet? Oder vielleicht auch Seiten, die ihr für so gelungen haltet, dass sie als Musterseite taugen?

              MfG, at

              1. Hallo at!

                Ernstgemeinte Frage: Ist es sinnvoll, sich solche Konventionen auf unterschiedlichen Seiten zusammenzusammeln?

                Ich glaube, eher nein. Bei diesen HTML-Elementen wollte man ursprünglich einfach zeigen, dass präsentationsbezogene Elemente wie big, font, center etc out sind und man das damals neue CSS verwenden sollte. Jetzt müsste man einen kürzeren Ersatz finden, oder es ganz weglassen

                Fazit: Es gibt nur wenig Regeln, die immer für alle Elemente gelten.

                … oder gibt es vielleicht so etwas wie ein Cheatsheet?

                Anfänglich gab es eine Beispielseite, die das Übertragen von Inhalten aus der Doku 8.1.2 in das damals neue Wiki erleichtern sollte:

                Oder vielleicht auch Seiten, die ihr für so gelungen haltet, dass sie als Musterseite taugen?

                Da wäre jetzt die Überschriftseite zu nennen:

                MfG, at

                Herzliche Grüße

                Matthias Scharwies

                --
                Es gibt viel zu tun: ToDo-Liste
                1. Hallo Matthias,

                  besten Dank!

                  MfG, at