Jeena Paradies: Richtige Textauszeichnung in der Praxis

Beitrag lesen

Hallo,

Viele dieser Schemata machen sich in der Google-Suche bemerkbar.
Bspw. sieht man jetzt immer öfter Avatare der Autoren direkt in den Suchergebnissen von Google. Oder Kundenbewertungen in Form von kleinen Sternchen.

Wenn wir aber für Google eine Extra Wurst machen dann sollten wir auch fairerweise für Facebook eine Extra Wurst machen: The Open Graph protocol.

Guter Einwand. SCSS könnten wir in einem anderen Template demonstrieren, wo es rein um SCSS und dessen möglichkeiten geht.

+1

Hm meinst du du könntest einen Link zu dieser Diskussion posten? Mir scheint dass eben diese eigentlich Paradebeispiele für Überschriften sind.
4 Jahre ist es her (man, war ich ein DAU ;))

Ich habe es mir jetzt durchgelesen und stelle Fest dass du der einzige bist der zu dem Schluss gekommen ist, die Überschriften da als <p> (was ja Paragraph heißt) auszuzeichnen. Leider hat einfach nur keiner geantwortet und deshalb blieb es so im Archiv. Das ist aber dennoch falsch. Ich konnte den Aufbau da leider nicht sehen aber ich mache mal hier ein Beispiel rein das aus einem Gästebuch mit einem footer besteht und wie man da Überschriften sinnvoll einsetzt:

+------------------------------------+
|         (h1) Gästebuch             |
|                                    |
|  (h2) Peter                        |
|  (p) schöne Seite                  |
|                                    |
|  (h2) Klaus                        |
|  (p) gefällt mir auch              |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
| (footer)                           |
| (h2) Weitere Infos (hidden)        |
|                                    |
| (h3) Adresse  |  (h3) Telefon      |
| (p) Hauptstr. |  (p) 01234567      |
|                                    |
|                                    |
+------------------------------------+

Siehe dazu auch die dort im Archiv verlinkte Seite der Webkrauts dazu Struktur von Überschriften und dort Konkret den Absatz Navigationsbereiche:

--------
Die meisten Navigationsbereiche (z.B. die Hauptnavigation oder die Fußleiste) besitzen keine Überschrift. Für die Barrierefreiheit werden aber unsichtbare Überschriften eingesetzt, um die Tastaturnavigation zu optimieren. Diese Überschriften können direkt angesprungen werden und stellen eine Optimierung für die Navigation mit der Tastatur dar. Weil auch die Überschriftenebene bei dieser Art der Navigation eine Rolle für die Gebrauchstauglichkeit spielt, sollten sämtliche unsichtbaren und sichtbaren Überschriften im Navigationsbereich einheitlich sein.
--------

Die Überschriften werden sehr oft dazu verwendet do eine section (die gibt es auch ohne den <section> einfach implizit, siehe die Spec die ich verlinkt habe) mit der Tastatur direkt anzuspringen, macht man da einfach ein <p> geht das gar nicht mehr.

Ich habe die blöde angewohnheit, dass ich mir Seiten erstmal ohne CSS anschaue, und da sehen Überschriften nicht wirklich passend aus

Doch gerade da sieht es passend aus weil man schnell den Aufbau der Webseite sieht, wo der Content ist, wo der Footer ist, wohin man dann gehen soll wenn man die Adresse sucht, etc.

Jeena

2 72

Ich finde SELFHTML braucht neue fertige Designs

Jeena Paradies
  • selfhtml-wiki
  1. 0
    Malcolm Beck´s
    1. 0
      Jeena Paradies
      1. 0
        Felix Riesterer
        1. 3
          Jeena Paradies
          1. 6
            Schuer
            1. 0
              niklaskamenisch
          2. 0
            Felix Riesterer
            1. 0

              Oops, ein bisschen blind gewesen

              Felix Riesterer
            2. 3
              Jeena Paradies
      2. 0
        Malcolm Beck´s
        1. 0
          Jeena Paradies
          1. 0

            Diskussion Template-Vorlage für SELFHTML, Textauszeichnung

            Malcolm Beck´s
            • seitenbewertung
            1. 0
              Malcolm Beck´s
            2. 0
              Jeena Paradies
              1. 0
                Kai345
              2. 0

                Richtige Textauszeichnung in der Praxis

                Malcolm Beck´s
                • html
                1. 0
                  Jeena Paradies
                  1. 0
                    Malcolm Beck´s
                    1. 0
                      Jeena Paradies
                      1. 0
                        Malcolm Beck´s
                        1. 0
                          Jeena Paradies
                          1. 0
                            Malcolm Beck´s
                            1. 0
                              Matthias Apsel
                          2. 0
                            Malcolm Beck´s
                            1. 1
                              Kai345
                              1. 0
                                Malcolm Beck´s
                            2. 0
                              Malcolm Beck´s
                              1. 0
                                niklaskamenisch
                                1. 0
                                  Malcolm Beck´s
                                  1. 0
                                    niklaskamenisch
                                    1. 0
                                      Malcolm Beck´s
                              2. 0
                                Felix Riesterer
                                1. 0
                                  Malcolm Beck´s
                                  1. 0
                                    Felix Riesterer
                                    1. 1
                                      Malcolm Beck´s
                              3. 0
                                flowh
                        2. 0
                          Gunnar Bittersmann
                      2. 0
                        JürgenB
                        1. 0
                          Jeena Paradies
                          1. 0
                            JürgenB
                            1. 0
                              Jeena Paradies
                  2. 0
                    Felix Riesterer
                    1. 0
                      Jeena Paradies
                      1. 0
                        Felix Riesterer
                2. 0
                  O'Brien
                  • menschelei
                  1. 0
                    Malcolm Beck´s
                  2. 0
                    Jeena Paradies
                    1. 0
                      Malcolm Beck´s
                      1. 0
                        Malcolm Beck´s
                        1. 0
                          Felix Riesterer
                          1. 0
                            Malcolm Beck´s
                            1. 0
                              O'Brien
                              1. 0

                                RHTML5 Template (Finale Version)

                                Malcolm Beck´s
                                • seitenbewertung
                                1. 0

                                  RHTML5 Template on Github

                                  Malcolm Beck´s
                                  1. 0
                                    flowh
                                    1. 1
                                      Malcolm Beck´s
                                      1. 0
                                        flowh
                                        1. 0
                                          Malcolm Beck´s
                                  2. 0
                                    Jeena Paradies
                                    1. 0
                                      Malcolm Beck´s
                                      1. 0
                                        Jeena Paradies
                                        1. 0

                                          Template wählen

                                          Malcolm Beck´s
                            2. 0
                              Felix Riesterer
                              1. 1
                                Malcolm Beck´s
  2. 0
    dedlfix
  3. 0
    Performer
    1. 0

      Vorlage: Die SLFHTML-Wolke

      Performer
      1. 0
        Matti Mäkitalo
        1. 0
          Performer
  4. 0
    niklaskamenisch
  5. 3
    Auge