Jochen: Markup Validation Service - Meldung unklar

Hallo,
kann mir jemand erklären, was die Warnung (an der Zeile <h3> bedeutet:

" Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools)."

<h1 class="....">Überschrift</h1>
<h3>
Wir begrüßen Sie herzlich auf unserer Homepage.<br>
........
</h3>
Schönen Gruß
Jochen

  1. Hi,

    kann mir jemand erklären, was die Warnung (an der Zeile <h3> bedeutet:

    Die mag zwar die Zeile mit der h3 benennen, bezieht sich aber offensichtlich auf die h1 darüber.

    " Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools)."

    <h1 class="....">Überschrift</h1>
    <h3>
    Wir begrüßen Sie herzlich auf unserer Homepage.<br>
    ........
    </h3>

    Ist das die einzige h1 auf der Seite, oder sind da mehrere? Und wenn letzteres, in welcher Struktur sind sie untergebracht, sind sie auf verschiedenen „Ebenen“?
    Die Warnung/der Hinweis ist wohl vorrangig in diesem Fall relevant.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Hi,

      Ist das die einzige h1 auf der Seite, oder sind da mehrere? Und wenn letzteres, in welcher Struktur sind sie untergebracht, sind sie auf verschiedenen „Ebenen“?

      Es sieht so aus:

        
      <h1>Überschrift in Deutsch</h1>  
      <p>.....</p>  
      <p>.....</p>  
      <h1>Überschrift in Englisch</h1>  
      <p>.....</p>  
      <p>.....</p>  
      
      

      Ich möchte natürlich die deutsche und die englische Überschrift gleichrangig.
      Was soll ich machen?
      Gruß
      Jochen

      1. Om nah hoo pez nyeetz, Jochen!

        Es sieht so aus:

        <h1>Überschrift in Deutsch</h1>
        <p>.....</p>
        <p>.....</p>
        <h1>Überschrift in Englisch</h1>
        <p>.....</p>
        <p>.....</p>

        
        > Ich möchte natürlich die deutsche und die englische Überschrift gleichrangig.  
          
        Verwende [section-Elemente](http://blog.selfhtml.org/2013/04/29/html5-serie-inhalte-strukturieren/).  
          
        Matthias
        
        -- 
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Kalif und Kalifornien](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=K#kalif).  
        ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
        
        
        1. Om nah hoo pez nyeetz, Matthias und Jochen!

          Es sieht so aus:

          <h1>Überschrift in Deutsch</h1>
          <p>.....</p>
          <p>.....</p>
          <h1>Überschrift in Englisch</h1>
          <p>.....</p>
          <p>.....</p>

          
          > > Ich möchte natürlich die deutsche und die englische Überschrift gleichrangig.  
          >   
          > Verwende [section-Elemente](http://blog.selfhtml.org/2013/04/29/html5-serie-inhalte-strukturieren/).  
            
          @Matthias:  
          Das "löst" sein "Problem" mit der Warnung bezüglich mehrerer H1 Elemente aber auch nicht ...! :-P  
            
          @Jochen:  
          Die "Warnung", die der Validator seit einiger Zeit (früher nicht) ausspuckt, sobald auf einer Seite mehr als ein H1 Element vorkommt, zeigt wieder mal wie "inkonsequent" neue Standards umgesetzt, bzw. in der Praxis gehandhabt werden.  
            
          Wir hatten hier schon einige ausgiebige Diskussionen zum Thema (vlt. findest du die Beiträge über die Suche?). Meine Meinung ist, dass es eigentlich am besten gewesen wäre, die H1 - H6 Elemente zu Gunsten eines "generischen" H Elements abzuschaffen. Das war aber aus Gründen der Abwärtskompatibilität nicht möglich.  
            
          Nun sollte es in der Praxis aber eigentlich so sein, dass der Browser "automatisch" die jeweilige Hierarchie-Ebene bestimmt, wenn man durchgängig nur H1 Elemente verwendet (Stichwort: HTML5 Outline).  
            
          Jetzt scheint es aber so, dass vorrangig Screenreader bei der Umsetzung hinterherhinken, und "Probleme" damit haben, weil sie jede H1 Überschrift als Seitentitel interpretieren!  
            
          Um diese Problematik zu vermeiden, spuckt der Validator diese Warnung(en) aus!  
          Das wiederum konterkariert imho die eigentliche neue Verwendung von Überschriften (Hx Elemente) in HTML5.  
            
          Du kannst die Warnung entweder ignorieren (und damit leben, dass Benutzer, die einen Screenreader verwenden dadurch zumindest "irritiert" werden), oder du verwendest pro Seite nur ein H1 Element (für den Seitentitel, ggf. in Deutsch + Englisch) und für alle anderen Überschriften durchgängig H2 Elemente.  
            
            
          Gruß Gunther
          
          1. Om nah hoo pez nyeetz, Gunther!

            @Matthias:
            Das "löst" sein "Problem" mit der Warnung bezüglich mehrerer H1 Elemente aber auch nicht ...! :-P

            Wie Jochens Antwort zeigt, offenbar doch.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dump und Dumper.

            1. Om nah hoo pez nyeetz, Matthias!

              @Matthias:
              Das "löst" sein "Problem" mit der Warnung bezüglich mehrerer H1 Elemente aber auch nicht ...! :-P

              Wie Jochens Antwort zeigt, offenbar doch.

              Nö, das schafft nur neue/ zusätzliche Probleme und ändert rein gar nichts an der Screenreader H1 Problematik ...! :-P

              Den Grund dafür hatte ich bereits in meinem vorhergehenden Posting geschrieben (Screenreader => H1 Element = Seitentitel).

              Gruß Gunther

              1. Hi Gunther,

                Nö, das schafft nur neue/ zusätzliche Probleme .....

                Richtig

                Den Grund dafür hatte ich bereits in meinem vorhergehenden Posting geschrieben (Screenreader => H1 Element = Seitentitel).

                Habe jetzt Deinen Rat befolgt (h1 => h2), und der Fehler ist weg.
                Für mich unerklärlich, dass da h1 und h2 so unterschiedlich behandelt werden. Aber es wird wohl seinen Grund haben oder die Entwickler haben ab und zu auch einen Blackout.
                Ich danke Euch beiden für die Unterstützung!
                Gruß
                Jochen

                1. Hallo,

                  Habe jetzt Deinen Rat befolgt (h1 => h2), und der Fehler ist weg.
                  Für mich unerklärlich, dass da h1 und h2 so unterschiedlich behandelt werden.

                  für mich nicht. Der Gedanke dahinter ist: Ein Dokument sollte nur *eine* top-level-Überschrift haben, die z.B. dem Titel eines Buches entsprechen kann (ja, ich weiß, dass es auch noch das title-Element gibt).

                  Dein Beispiel ist insofern ein Sonderfall, als du quasi zwei Versionen desselben Dokuments (zwei Sprachen) zu einem kombinieren willst. Würde ich nicht tun wollen, aber es ist ja nicht meine Seite.

                  Deshalb ist die Meldung vom Validator ja auch nur eine Warnung, kein Fehler. Soll heißen: Autor, guck's dir nochmal an, eventuell ist da was falsch. Wenn du nach einer Warnung zu dem Ergebnis kommst, dass sie unbegründet ist, auch gut.

                  <sozpäd>Hauptsache, wir haben darüber gesprochen.</sozpäd>

                  Ciao,
                   Martin

                  --
                  Wer im Glashaus sitzt, sollte Spaß am Fensterputzen haben.
                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              2. Hallo,

                Nö, das schafft nur neue/ zusätzliche Probleme und ändert rein gar nichts an der Screenreader H1 Problematik ...! :-P

                Diese Problematik existiert in Jochens Beispiel nicht. Er wollte gar nicht überall h1 zu verwenden, nur zwei auf oberster Ebene, soweit ich das verstanden haben. Deine Ausführungen zum Hintergrund dieser Warnung sind natürlich korrekt.

                Grüße
                Mathias

        2. Hallo Matthias,
          da ich bereits sections verwende, habe ich jetzt ein weiteres Problem:

          Es sieht jetzt so aus:
           ~~~html

          <section>                      bisher
          ......
          </section>                     bisher
          <section id="Inhalt">          bisher
            <section>                            neu  (Unterkapitel)
              <h1>Überschrift in Deutsch</h1>
              <p>.....</p>
              <p>.....</p>
            </section>                           neu
            <section>                            neu  (Unterkapitel)
              <h1>Überschrift in Englisch</h1>
              <p>.....</p>
              <p>.....</p>
            </section>                           neu
          </section>

            
          Jetzt kommt in der Zeile  (id="Inhalt") die Meldung:  
          Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections  
            
          Ich möchte aber doch nicht eine weitere Überschrift!  
          Gruß  
          Jochen
          
          1. Om nah hoo pez nyeetz, Jochen!

            da ich bereits sections verwende, habe ich jetzt ein weiteres Problem:

            Es sieht jetzt so aus:

            <section>                      bisher
            ......
            </section>                     bisher
            <section id="Inhalt">          bisher
              <section>                            neu  (Unterkapitel)
                <h1>Überschrift in Deutsch</h1>
                <p>.....</p>
                <p>.....</p>
              </section>                           neu
              <section>                            neu  (Unterkapitel)
                <h1>Überschrift in Englisch</h1>
                <p>.....</p>
                <p>.....</p>
              </section>                           neu
            </section>

            
            >   
            > Jetzt kommt in der Zeile  (id="Inhalt") die Meldung:  
            > Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections  
            >   
            > Ich möchte aber doch nicht eine weitere Überschrift!  
              
            Welche semantische Bedeutung hat das umgebende section-Element? Hast du den verlinkten Blogartikel gelesen? Article oder div wäre passender. Da du die Seite jedoch nicht zeigst, können wir nur raten.  
              
              
            Matthias
            
            -- 
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Kart und Kartoffelsalat](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=K#kart).  
            ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
            
            
        3. Hallo,

          Verwende section-Elemente.

          Halte ich für keine gute Idee.

          <section>  
            <h1>h1.1</h1>  
            <p>p1</p>  
          </section>  
          <section>  
            <h1>h1.2</h1>  
            <p>p2</p>  
          </section>
          

          erzeugt den Outline

          1. Untitled Section
            1. h1.1
            2. h1.2

          Hier existiert keine Überschrift auf oberster Ebene, sondern eben zwei gleichrangige Sections. Gut, jetzt kann man argumentieren, dass genau das gewünscht ist, wenn man zweisprachige Inhalte bietet. Negative Auswirkungen hat das nicht, soweit ich weiß. Kein Browser setzt diese »Untitled Section« wirklich um bzw. kommuniziert sie gar an den User.

          Mit der Validator-Warnung würde ich leben. Eine Warnung bedeutet nur, dass der Mensch etwas prüfen muss, weil im Validator eine Heuristik anschlägt. Die Warnung bezieht sich auf ein anderes Problem, das hier nicht vorliegt: Man sollte nicht NUR h1 verwenden, auch wenn es HTML5 zulässt, weil kein Browser das unterstützt (siehe Gunthers Posting). Dieser Hinweis wurde inhaltlich beachtet, es ist also m.E. keine Änderung des Codes ist nötig.

          Mathias