Mehrere h1-Überschriften?

[Mrs. Olivander]

Hi,

ich habe den Tipp bekommen, verschiedene Navigationsblöcke (z. B. Top-Navigation oder Linke-Navigation) mit h1-Überschriften zu versehen, damit sie z. B. bei Verwendung von Screenreadern schnell gefunden und angesprungen werden können.

Dies bedingt dann, dass jede Webseite mehrere h1-Überschriften hat.

Bisher bin ich immer davon ausgegangen, dass ein Dokument genau eine h1-Überschrift hat und dass diese die Zentrale Überschrift der gesamten Seite ist. Wie hebe ich sonst die "eigentliche" Überschrift mit dem zentralen Thema heraus?

Navigationsblöcke würde ich eher mit bestimmten ID's versehen. Liege ich da richtig?

Oder sind mehrere h1 auch ok?

Bin auf eure Meinungen gespannt.

Grüße
Mrs. Olivander

[Jonathan]

Bisher bin ich immer davon ausgegangen, dass ein Dokument genau eine h1-Überschrift hat und dass diese die Zentrale Überschrift der gesamten Seite ist.

Das mag so üblich sein, aber ich sehe da kein großes Problem, mehrere <h1> zu verwenden, wenn es von der Seitenstruktur Sinn macht. IMHO spricht z.B. nichts gegen

<h1>Navigation</h1>
<ul>
<li><a ...></li>
<li><a ...></li>
</ul>
<h1>Übersicht</h1>
<p>Herzlich willkommen auf blah blah blah</p>

Wie hebe ich sonst die "eigentliche" Überschrift mit dem zentralen Thema heraus?

<title>-Element?

Navigationsblöcke würde ich eher mit bestimmten ID's versehen. Liege ich da richtig?

Hmm? Die id der Elemente ist für den Browser/Screenreader alleine ziemlich unrelevant...

Oder sind mehrere h1 auch ok?

Meiner Ansicht nach, ja. Siehe oben. Man kann jedenfalls sehr viel schlimmere Sachen machen, als mehrere <h1> in den Quellcode zu Packen.

Jonathan

[Der Dicki]

Hallihallo!

Oder sind mehrere h1 auch ok?

Bin auf eure Meinungen gespannt.

Nimm doch einfach, wie es auch vorgesehen ist, eine h1- Überschrift für das Dokument und h2- Überschriften für die Absätze.
Ich denke, Screenreader sollten damit gut zurechtkommen.

Wenn man hingegen mehrere h1 pro Seite benutzt, läuft man evtl. Gefahr, von z.B. Google als Spammer missverstanden zu werden (unbegründete Vermutung).

Viele liebe Grüße,
Der Dicki

[Mrs. Olivander]

Hi,

Nimm doch einfach, wie es auch vorgesehen ist, eine h1- Überschrift für das Dokument und h2- Überschriften für die Absätze.
Ich denke, Screenreader sollten damit gut zurechtkommen.

genauso möchte ich es ja gerne machen. Aber die Frage ist, ob ich h1 auch noch für andere Elemente verwenden darf/sollte, z. B. Navigationselemente.

Grüße
Mrs. Olivander

[wahsaga]

hi,

Aber die Frage ist, ob ich h1 auch noch für andere Elemente verwenden darf/sollte, z. B. Navigationselemente.

Warum solltest du das wollen?

gruß,
wahsaga

[D.R.]

Hi,

[...] Aber die Frage ist, ob ich h1 auch noch für andere Elemente verwenden darf/sollte, z. B. Navigationselemente.

Ich wüde semantisches Markup vorziehen. Eine Navi ist nunmal eine Auflistung von Verweisen [ul]. Der Screenreader soll ja auch nicht die Seite mit den Verweisen zur richtigen Seite finden, sondern die, wo der Inhalt sich befindet. Erst dort sollte der Name des Links als Überschrift stehen.

Einen schönen Dienstag noch!

[Auge]

Hallo

Ich wüde semantisches Markup vorziehen. Eine Navi ist nunmal eine Auflistung von Verweisen [ul].

Wer hat dem widersprochen? Es ging darum, einer Navigation eine Überschrift voranzustellen.

Meiner Meinung nach sollte <h1> das Thema einer Seite wiederspiegeln. Wenn es denn sein soll, würde ich einer Navigation ein <h2> verpassen.

zum Beispiel so (inclusive divs zur Positionierung):

  
<div id="header">  
<h1>Seitenthema</h1>  
<!-- evtl. mit Bild? --><img src="..." alt="">  
</div>  
<div id="navi">  
<h2>Navigation</h2>  
<ul>  
 <li><a href="#">Menüpunkt 1</a></li>  
 <li><a href="#">Menüpunkt 2</a></li>  
 <li><a href="#">Menüpunkt 3</a></li>  
</ul>  
</div>  
<div id="content">  
<h2>Laber</h2>  
<p>....</p>  
</div>  

Für graphische Browser kann man diese Überschriften ausblenden (#navi h2 { display:none; }), bei der puren HTML-Anzeige erleichtern sie mMn die Orientierung.

Tschö, Auge

[D.R.]

Hi,

Meiner Meinung nach sollte <h1> das Thema einer Seite wiederspiegeln. Wenn es denn sein soll, würde ich einer Navigation ein <h2> verpassen.

Ach so sorry, ich dachte, es geht darum, die gesamte Navi mit h1 auszustatten, um vom einer Suchmashine besser gefunden zu werden. Das wär ja total sinnlos, da man ja eine best. Seite finden will, und nicht eine, die mit einem Link darauf verweist.

Wie sieht's eigentlich mit <caption> aus? oder geht das nur bei Tabellen?

Einen schönen Mittwoch noch!

[Ashura]

Hallo D.R..

Wie sieht's eigentlich mit <caption> aus? oder geht das nur bei Tabellen?

Momentan leider ja. Noch …

Einen schönen Mittwoch noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Momentan leider ja. Noch …

Wobei man label auch heute schon einsetzen könnte, nur halt nicht innerhalb der Liste. Aber außerhalb tut’s eine Überschrift auch.

label wäre auch das einzige, was mir einfällt, um Bildunterschriften auszuzeichenen.

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

label wäre auch das einzige, was mir einfällt, um Bildunterschriften auszuzeichenen.

Wobei mir folgendes besser gefiele:

<img src="foo.png" alt="Foo" title="Der Schriftzug „Foo“ eben" />

img::after {  
  content:attr(title);  
  display:block;  
}

Aber hier lässt sich abgesehen von der Unterstützung in einem bekannten und weit verbreiteten Browser streiten, ob die Bildunterschrift zum relevanten Inhalt und deshalb ins HTML gehört. Angenehm wäre diese Lösung aber allemal.

Einen schönen Sonntag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

img::after {

content:attr(title);
  display:block;
}

>   
> Aber hier lässt sich abgesehen von der Unterstützung in einem bekannten und weit verbreiteten Browser streiten,  
  
Sprichst du vom Firefox oder von Opera? Beiden ist kein Vorwurf zu machen, dass sie den Wert des title-Attributs nicht anzeigen. ::after fügt den Inhalt am Ende des Elements an, und zwar innerhalb dessen, nicht etwa nach dem Element außerhalb dessen. Und kein Browser stellt Textinhalt eines img-Elements dar; dieses hat ja per DTD leer zu sein.  
  
  

> ob die Bildunterschrift zum relevanten Inhalt und deshalb ins HTML gehört.  
  
Wüsste nicht, was es da zu streiten gäbe. Selbstverständlich ist der Bildtitel relavante Information. (Wie sollte man sich sonst im Text auf Bild 42 beziehen?)  
  
See ya up the road,  
Gunnar

-- 
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)

[Ashura]

Hallo Gunnar.

Aber hier lässt sich abgesehen von der Unterstützung in einem bekannten und weit verbreiteten Browser streiten,

Sprichst du vom Firefox oder von Opera?

Wenn ich von „*einem* bekannten und weitverbreiteten Browser“ rede, meine ich den IE.

Beiden ist kein Vorwurf zu machen, dass sie den Wert des title-Attributs nicht anzeigen.

Hm? Wie kommst du nun darauf? Erstens habe ich nichts hierzu im Sinn gehabt und zweitens zeigen sie den Wert des title-Attributes doch an, wenn man das jeweilige Element mit der Maus überfährt?

::after fügt den Inhalt am Ende des Elements an, und zwar innerhalb dessen, nicht etwa nach dem Element außerhalb dessen.

Öhm, ja. Und?

Und kein Browser stellt Textinhalt eines img-Elements dar; dieses hat ja per DTD leer zu sein.

Ich verstehe wirklich nicht, worauf du hinaus willst. Ich wollte lediglich eine angenehme Möglichkeit aufzeigen, Bilder automatisiert mit Bildunterschriften zu versehen.

Wüsste nicht, was es da zu streiten gäbe. Selbstverständlich ist der Bildtitel relavante Information. (Wie sollte man sich sonst im Text auf Bild 42 beziehen?)

Mach man das?
Die Nummerierung von Bildern hat doch nichts mit ihren Bildunterschriften zu tun.

Einen schönen Sonntag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Wenn ich von „*einem* bekannten und weitverbreiteten Browser“ rede, meine ich den IE.

Du erkennst aber unsichtbare Smileys?

Beiden ist kein Vorwurf zu machen, dass sie den Wert des title-Attributs nicht anzeigen.

Hm? Wie kommst du nun darauf? Erstens habe ich nichts hierzu im Sinn gehabt

Ich darf dich erinnern an

img::after {  
  content:attr(title);  
  display:block;  
}

Du wolltest den Wert des title-Attributs als Bildunterschrift anzeigen lassen; und eben das geht so nicht.

und zweitens zeigen sie den Wert des title-Attributes doch an, wenn man das jeweilige Element mit der Maus überfährt?

Klar, aber darum ging’s ja nicht.

Öhm, ja. Und?

Dein CSS fügt den Wert des title-Attributs IN das img-Element ein, macht also aus
  <img src="foo" alt="bar" title="baz"/>
gewissenmaßen sowas wie
  <img src="foo" alt="bar" title="baz">baz</img>
                                                       ^^^

Und kein Browser stellt Textinhalt eines img-Elements dar; dieses hat ja per DTD leer zu sein.
Ich verstehe wirklich nicht, worauf du hinaus willst.

Dass eben dieses 'baz' nicht angezeigt wird.

Ich wollte lediglich eine angenehme Möglichkeit aufzeigen, Bilder automatisiert mit Bildunterschriften zu versehen.

Funzt aber eben so nicht. Nicht im Firefox. Stellt Opera das 'baz' etwa als Bildunterschrift dar?

Die Nummerierung von Bildern hat doch nichts mit ihren Bildunterschriften zu tun.

Die Numerierung ist Teil der Bildunterschrift:

Bild 42. Antwort auf die Frage nach dem Leben, dem Universum und dem ganzen Rest

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Wenn ich von „*einem* bekannten und weitverbreiteten Browser“ rede, meine ich den IE.

Du erkennst aber unsichtbare Smileys?

Normalerweise schon, ich setze schließlich selbst reichlich davon.

Du wolltest den Wert des title-Attributs als Bildunterschrift anzeigen lassen; und eben das geht so nicht.

Aha, im Firefox nicht. Warum auch immer.

Dein CSS fügt den Wert des title-Attributs IN das img-Element ein,

Warum heißt das Pseudoelement dann ::after und nicht ::between oder ::inner?
Die Spezifikation sagt eigentlich auch das, was ich darunter verstehe:

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

Aber im Folgenden wird schon wieder das Gegenteil behauptet:

The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element.

Und schließlich zieht man sich gleich ganz aus der Affäre:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Es ist also den Browserherstellern überlassen, wie sie die Pseudoklassen bei replaced-inline-Elementen umsetzen. Weder Firefox noch Opera machen hier also etwas falsch.

macht also aus
  <img src="foo" alt="bar" title="baz"/>
gewissenmaßen sowas wie
  <img src="foo" alt="bar" title="baz">baz</img>

Nein eigentlich dies hier:

<img src="foo" alt="bar" title="baz"/><::after>baz</::after>

(Nur zur Veranschaulichung.)

Funzt aber eben so nicht. Nicht im Firefox. Stellt Opera das 'baz' etwa als Bildunterschrift dar?

Ja, genau so, wie ich es von der Kombination des Pseudoelementes und display:block erwarten würde.

Einen schönen Sonntag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Aha, im Firefox nicht. Warum auch immer.

Wegen der Spec? ;-)

Die Spezifikation sagt eigentlich auch das, was ich darunter verstehe:
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

“before and after an element's document tree _content_”; nicht “before and after an element in the document tree”.

Also, wie ich das verstehe, nicht

<img src="foo" alt="bar" title="baz"/><::after>baz</::after>

sondern
   <img src="foo" alt="bar" title="baz"><::after>baz</::after></img>

Aber besonders glücklich ist die Formulierung in der Spec wohl nicht gewählt.

Wo der generierte Inhalt eingefügt werden sollte (zumindest wie Firefox solchen einfügt), war doch auch die Auflösung von MudGuards Problem „Firefox only: :last-child::after { clear:left; } geht nicht?“, besonders durch dieses Posting von Axel Richter, „da [fiel] es [MudGuard] wie Schuppen aus den Haaren ...“ Du erinnerst dich? Warst doch am Thread beteiligt.

Und schließlich zieht man sich gleich ganz aus der Affäre:
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Hm, diese Passage gibt’s nicht in CSS 2.0; dafür aber:
„Die nächste Regel fügt den Text des HTML-Attributs „alt“ vor dem Bild ein. Wenn das Bild nicht angezeigt wird, sieht der Leser statt dessen den „alt“-Text.
IMG:before { content: attr(alt) }“ [CSS2 §12.2]

Die Regel beschreibt also das übliche Verhalten der Browser. Der Inhalt des Pseudoelements wird nur angezeigt, wenn das Bild nicht angezeigt wird.

Gleiches sollte dann aber natürlich auch bei img:after {content: attr(title)} gelten.

Es ist also den Browserherstellern überlassen, wie sie die Pseudoklassen bei replaced-inline-Elementen umsetzen. Weder Firefox noch Opera machen hier also etwas falsch.

Nach CSS 2.0 irrt Opera IMHO, Firefox macht’s richtig. Und CSS 2.1 ist ja eine Anpassung der Spec an die Realität. Ob das so klug ist?

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Und CSS 2.1 ist ja eine Anpassung der Spec an die Realität. Ob das so klug ist?

Ich finde schon. Schließlich wird dem W3C ständig Mangel an Realitätssinn vorgeworfen. Da ist es meiner Meinung nach in Ordnung, wenn sie ihre Spezifikationen den alltäglichen Anforderungen anpassen.

Einen schönen Montag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Und CSS 2.1 ist ja eine Anpassung der Spec an die Realität. Ob das so klug ist?

Ich finde schon. Schließlich wird dem W3C ständig Mangel an Realitätssinn vorgeworfen. Da ist es meiner Meinung nach in Ordnung, wenn sie ihre Spezifikationen den alltäglichen Anforderungen anpassen.

Ich meinte auch nicht so das Ob, sondern das Wie: eine Sache, die in CSS 2.0 spezifiziert war, in CSS 2.1 wieder offenzulassen und zu sagen „das spezifizieren wir später“ ...

Mittlerweile kocht wieder jeder Browserhersteller sein eigenes Süppchen, und wenn’s dann später auf die eine oder andere Art spezifiziert wird, muss der eine oder andere die Suppe auslöffeln ...

See ya up the road,
Gunnar

[Auge]

Hallo

Ach so sorry, ich dachte, es geht darum, die gesamte Navi mit h1 auszustatten...

Na das wäre aber oberkeck! ;-)

Wie sieht's eigentlich mit <caption> aus? oder geht das nur bei Tabellen?

Wie von Ashura schon bemerkt, nur für Tabellen, nicht für Listen (da scheint ja, für die fernere Zukunft, was in der Mache zu sein).

Tschö, Auge