variabler Abstand
0 
suit
0 
Beat
0 0 0 Mehr als eine H1 im Dokument?
Gernot Back
0
variabler Abstand
Hallo,
ich hätte gerne, dass <h1>-Überschriften einen bestimmten Abstand zum Inhalt davor haben. Aber mit der Ausnahme: Ist eine <h1>-Überschrift das 1.Element auf einer Seite bzw. in einem DIV, dann soll die Überschrift ganz oben stehen und nicht erst nach dem vorher definierten Abstand zum Seitenrand.
Ist dieses Verhalten automatisch mit CSS erreichbar, oder muss ich hier mit z.B. 2 Klassen arbeiten (<h1 class="oben"> und <h1 class="innen">)?
-
Ist dieses Verhalten automatisch mit CSS erreichbar, oder muss ich hier mit z.B. 2 Klassen arbeiten (<h1 class="oben"> und <h1 class="innen">)?
h1 als ersters element auf einer seite ist schlecht möglich - das erste element im body-element oder im element mit inhalt usw könntest du per css ansprechen - allerdings sind damit nicht alle browser glücklich
h1-elemente in einem div sind problemlos mit dem nachfahren-selektor ansprechbar
alles in allem denke ich aber nicht, dass du überhaupt einen eigenen stil brauchen wirst, wenn man das ganze vernünftig durchdenkt, sollte es auch ohne gehen - besonders, weil auf einer seite ohnehin nur 1 h1-element vorkommen sollte - mehrere sind in sehr seltenen fällen sinnvoll, und wenn sind sie gleichrangig
-
Ist dieses Verhalten automatisch mit CSS erreichbar, oder muss ich hier mit z.B. 2 Klassen arbeiten (<h1 class="oben"> und <h1 class="innen">)?
Du könntest auch ohne zusätzliche Klasse arbeiten.
div h1:first-child{ margin-top:0px; }
Jedoch unterstützen dies ältere Browser nicht, was wiederum relativ scheissegal sein kann.
mfg Beat
-
Hallo!
Ist dieses Verhalten automatisch mit CSS erreichbar, oder muss ich hier mit z.B. 2 Klassen arbeiten (<h1 class="oben"> und <h1 class="innen">)?
Zu first-child haben die anderen beiden schon etwas geschrieben.
Ohne Quellcode ist das zwar reine Raterei, aber evtl. kannst du durch den Nachfahren-Selektor unterschiedliche Fälle abfangen, ohne hierfür Klassen einzuführen.Viele Grüße
Thorsten--
ie:( fl:( br:< va:) ls:& fo:) rl:° n4:° ss:) de:> js:| ch:? sh:( mo:| zu:) -
danke für Eure Tips. Es geht konkret um einen DIV-Container, der Überschriften, Text, Bilder enthält. Nur für den Fall, dass das erste Element in diesem DIV eine <h1> ist, soll deren Top-Abstand 0 sein. Falls vor der <h1> auch nur 1 Wort, 1 Absatz, 1 Bild steht, soll der normale top-Abstand gelten. Und warum sollten nicht mehrere <h1>-Elemente vorkommen, wenn sie gleichrangige Bedeutung innerhalb des DIV haben?
first-child wäre vom Ansatz her ideal, das Problem dabei ist, dass immer das 1.Vorkommen der <h1> im DIV formatiert wird, auch wenn davor bereits Text oder Bilder sind.
auch mit den Nachfahren-selektoren kann ich das auch nicht erreichen, weil
a) nicht feststellbar ist, ob noch Text etc. vor der 1. <h1> ist
b) zwischen der 1. <h1> und weiteren nicht unterscheidbar ist, da sie auf gleicher Ebene stehen, also direkt innerhalb des DIV-Container.Werde dann wohl doch die manuelle 2 Klassengesellschaft anwenden müssen ;-)
-
Und warum sollten nicht mehrere <h1>-Elemente vorkommen, wenn sie gleichrangige Bedeutung innerhalb des DIV haben?
Hm. Ich vertrete auch die Ansicht, dass es manchmal Situationen geben kann, wo mehr als 1 <h1> Element im Dokument gerechtfertigt ist. Aber diese Situationen sind doch eher selten.
Die Bedingung, ob mehr als ein <hx> Elemente vorkommen dürfen, hat nichts mit der anderen Verschachtelung zu tun. <hx> Elemente bieten für Screenreader eine navigierbare Hierarchie (was ich mir in normalen Browsern eigentlich auch wünschen würde). Diese Eigenschaft kann/darf/soll man berücksichtigen.
mfg Beat
-
Hallo Beat,
Und warum sollten nicht mehrere <h1>-Elemente vorkommen, wenn sie gleichrangige Bedeutung innerhalb des DIV haben?
Hm. Ich vertrete auch die Ansicht, dass es manchmal Situationen geben kann, wo mehr als 1 <h1> Element im Dokument gerechtfertigt ist. Aber diese Situationen sind doch eher selten.
Diese unsinnige Ansicht vertritt ja leider auch das BIK, indem es jedem Hauptbereich, also dem Kopfbereich, der Navigation, dem Contentbereich und der Sidebar (Servicebereich) auf einer Seite je eine eigene H1-Überschrift geben will, gerade so, als ob diese Bereiche jeweils gleichrangig wären und nichts miteinander zu tun hätten:
<zitat>
h1: 1. Das Webangebot der Süddeutschen Zeitung (Kopfbereich)
h1: 2. Navigation (linke Spalte)
h1: 3. Aktuelle Artikel (mittlere Spalte)
h1: 4. Service (rechte Spalte)
</zitat>
http://www.bik-online.info/info/entwicklung/struktur/beispiel.php#hauptbereicheAnders als barrierefreies-webdesign.de meine ich auch nicht unbedingt, dass
<zitat>
man es vermeiden [sollte], eine Überschriftenebene zu überspringen, also z.B. direkt von der zweiten auf die vierte Ordnung überzugehen.
</zitat>Das kann bei Dokumenten, die aufeinander fortfolgende Seiten eines längeren durch Überschriften gegliederten Textes darstellen, durchaus sinnvoll sein.
So liest man ja im Printbereich, insbesondere in der englischsprachigen Sachliteratur auch immer wieder Bücher, die auf jeder Seite oben ganz klein den Buchtitel nennen oder abwechselnd Kapitel- und Buchtitel auf ein über der anderen Seite, sodass man Buch- (Überschrift erster Ordnung) und Kapiteltitel (Überschrift zweiter Ordnung) bei einem aufgeschlagenen Buch immer gleichermaßen im Blickfeld hat, auch wenn auf der eigentlichen Seite dann nur Überschriften vierter und/oder fünfter Ordnung folgen.
Das kann man sehr schön an diesem Beispiel sehen, das ich als Auszug auf Google-Books gefunden habe.
Dass diese Methode selbst im Bereich der englischsprachigen Printliteratur nicht unumstritten ist, kann man in diesem lustigen Google-Group-Thread nachlesen.
Eigentlich haben wir auf Webseiten, wo es üblich ist, das ganze Inhaltsverzeichnis als Navigationsbereich neben dem eigentlichen Inhaltsbereich abzubilden aber doch anders als im Printbereich meist gar kein Problem, da wir ja zusätzlich zur Verschachtelung in geordneten (OL) oder ungeordneten Listen (UL) auch noch -je nach Verschachtelungstiefe- jeden Navigationspunkt in eine Überschrift entsprechender Ordnung kleiden können:
* Der Titel des gesamten Webauftritts (der Site) steht dabei als Überschrift erster Ordnung (H1) immer wieder, auf feder Einzelseite über allem und kann auch ein auf die Startseite zurückverlinkendes Firmenlogo enthalten.
* Die Hauptnavigationspunkte erhalten H2-Auszeichnung.
* Aktuelle Haupt- und Unternavigationspunkte werden in entsprechend tieferer Hierarchie ausgeklappt dargestellt.
Wenn es sich um einen stark untergliederten, detaillierten Gesamtauftritt handelt, dann steht als oberste Überschrift im eigentlichen Contentbereich halt auch einmal ein H4-, H5- oder sogar auch nur ein H6-Element als oberste Überschrift, ohne dass die Überschriften höherer Ordnung fehlen, denn die werden ja in der Navigation dargestellt.
Gruß Gernot
--
super me-
Das kann man sehr schön an diesem Beispiel sehen, das ich als Auszug auf Google-Books gefunden habe.
Hi Gernot
Ich bin durchaus der Meinung, dass auf einer Seite wie Google Books zwei Überschriften gerechtfertigt sind. Und ich bin auch die Meinung, dass Teile der zwei Überschrifteninhalte im <title> Element reflektiert werden dürfen.
<title>Doe, John: "What the Fuck has <hx> with navigation to do" (2004, reprint Google Books 2008)</title>
<hx> sind navigierbar für Hilfsinstrumente wie Sceenreader. Wehe aber, wenn wir aus deren Empfehlungen die zukünftigen Webstandards uns vorschreiben und einfrieren lassen.
Und ja: <ul> / <ol> bieten da einen Umweg.
mfg Beat
-
Hallo,
Diese unsinnige Ansicht vertritt ja leider auch das BIK, indem es jedem Hauptbereich, also dem Kopfbereich, der Navigation, dem Contentbereich und der Sidebar (Servicebereich) auf einer Seite je eine eigene H1-Überschrift geben will, gerade so, als ob diese Bereiche jeweils gleichrangig wären und nichts miteinander zu tun hätten
nur zur Klarstellung: wir fordern keineswegs eine Auszeichnung mit H1-Elementen. Es darf auch eine H2 oder H3 sein. Der Hintergrund unserer Empfehlung hat weniger mit Semantik zu tun. Uns geht es bei diesem Punkt in erster Linie um die Nutzbarkeit bzw. Orientierung für Screenreader Nutzer.
Praktisches Beispiel: Ein Screenreader-Nutzer orientiert sich auf einer Webseite indem er sich die Überschriftenstruktur ausgeben lässt. Ein weiterer Nutzen der Überschriften ist, dass diese sich über Tastaturbefehle bequem überspringen lassen bzw. die Möglichkeit direkt zu bestimmten Überschriften zu springen (z.B. direkt zum Inhalt).
Um was für Überschriftenebenen es sich dabei handelt ist relativ egal. Es sollte nur logisch und für den Benutzer nachvollziehbar sein. Daher bietet sich die Verwendung von H1 an.
Die Überschriften sind eher eine Notlösung weil es bislang noch keine HTML Elemente gibt, mit denen sich die verschiedenen Inhaltsbereiche einer Webseite logisch festlegen lassen. Wenn sich die document landmark roles (siehe: http://dev.opera.com/articles/view/introduction-to-wai-aria/) etabliert haben und von den Hilfsmitteln unterstützt werden sieht die Sache anders aus.
Viele Grüße
Thomas-
Hallo Thomas,
vielen Dank für die Antwort.
nur zur Klarstellung: wir fordern keineswegs eine Auszeichnung mit H1-Elementen. Es darf auch eine H2 oder H3 sein. Der Hintergrund unserer Empfehlung hat weniger mit Semantik zu tun. Uns geht es bei diesem Punkt in erster Linie um die Nutzbarkeit bzw. Orientierung für Screenreader Nutzer.
Bei Google geht dieser Schuss aber wohl eher nach hinten los. So werden ja z.B. auch auf den Seiten des BIK, konsequenterweise so, wie dieses es auch anderen Webseitenbetreibern empfiehlt, die verschiedenen Bereiche für Navigation und Inhalt jeweils mit einer eigenen Hn-Überschrift der dort vorkommenden Überschrift oberster Ordnung (im Falle des BIK tatsächlich jeweils ein H1-Element) gekennzeichnet. Im Falle der Navigation wird die Überschrift "Navigation" dann aber unter Verwendung der Klasse "unsichtbar" über absolute Positionierung im negativen Off von Top- und Left-Eigenschaften positioniert, um sie in optischen Ausgabemedien zu verstecken.
Das kommt bei Google gar nicht gut an, denn Google schreibt zu einem solchen Vorgehen in seinen Richtlinien klipp und klar:
<blockquote>
"Was Sie vermeiden sollten(...) Wenn Ihre Website Seiten, Text oder Links enthält, von denen Sie nicht möchten, dass die Nutzer sie sehen, betrachtet Google diese als irreführend und ignoriert möglicherweise Ihre Website."</blockquote>
Ich bin jetzt allerdings auch unsicher, ob mein Ansatz, der immmerhin das Überspringen von Überschriftenhierarchiene vermeidet, die Navigation mit Screenreadern nicht sogar erschwert, weil man ja dann erst einmal auf die Stufe des aktuell angezeigten Unhalts runternavigieren muss und dies möglicherweise von Screenreader-Nutzern als lästig empfunden wird, da es ja einige Klicks mehr bedeutet.
Irgendwie kommt einem ja die Auszeichnung über die Verschachtelungstiefe von Listenelementen _und_ Überschrift entsprechender Ordnung auch doppelt gemoppelt vor.
Wie man's macht, macht man es also wohl verkehrt:
Entweder optimiert man auf eine sinnvolle Struktur einer Webseite oder man optimiert auf die Usability mit Screenreadern hin. Beides zusammen scheint nicht möglich zu sein.
;-)Gruß Gernot
--
super me-
Das kommt bei Google gar nicht gut an, denn Google schreibt zu einem solchen Vorgehen in seinen Richtlinien klipp und klar:
<blockquote>
"Was Sie vermeiden sollten(...) Wenn Ihre Website Seiten, Text oder Links enthält, von denen Sie nicht möchten, dass die Nutzer sie sehen, betrachtet Google diese als irreführend und ignoriert möglicherweise Ihre Website."</blockquote>
Ich denke nicht dass die Google Formulierung in irgend einer Art und Weise relevant ist.
Es geht primär darum, dass Google nicht einen anderen Quelltext als normale User erhalten. "sehen" heisst hier "sehen können". Ansonsten müsste Google ja jeden Gebrauch von display:none ahnden.mfg Beat
-
-
-
-
-
-
Hallo serfi,
ich hätte gerne, dass <h1>-Überschriften einen bestimmten Abstand zum Inhalt davor haben. Aber mit der Ausnahme: Ist eine <h1>-Überschrift das 1.Element auf einer Seite bzw. in einem DIV, dann soll die Überschrift ganz oben stehen und nicht erst nach dem vorher definierten Abstand zum Seitenrand.
Wie viele H1-Überschriften hast du denn gleichzeitig auf einer Seite?
Ich hoffe doch schwer, dass es sowieso immer nur höchstens _eine_ ist und dass die auch über allem steht und sich als oberste Überschrift auf das ganze Dokument bezieht, so wie das TITLE-Element!
Auch wenn Validatoren da nicht meckern:
Alles andere ergäbe strukturell keinen Sinn!Gruß Gernot
--
super me-
Tachchen!
Ich hoffe doch schwer, dass es sowieso immer nur höchstens _eine_ ist und dass die auch über allem steht und sich als oberste Überschrift auf das ganze Dokument bezieht, so wie das TITLE-Element!
Auch wenn Validatoren da nicht meckern:
Alles andere ergäbe strukturell keinen Sinn!Och ... du gibst doch selbst schon gute Hinweise, dass es sinnvoll sein kann
und ggfs. auch angezeigt, mehrere H1 auf einer Seite zu haben.So hat normalerweise jede Seite einen Seitenkopf zur Gestaltung einer
"corporate identity", also regelmäßig ein Logo und/oder Websitenamen.
Hinzu kommt aber das Identifizierungsmerkmal für die spezielle Seite.
Das kommt sicherlich ins Title-Element, aber du schlägst ja schon selbst
richtigerweise vor, dass das irgendwie auch in die eigentliche Seite
gehört ... und aus meiner Sicht eher mit einer Überschrift erster Ordnung;
was sich ja mit deiner Ansicht zu decken scheint.Und schon müsste ich mich aber entscheiden, welche der beiden (oder gar 3)
H1-Überschriften ich zur H2 degradiere ... in meinem Beispiel selbst
strukturell und semantisch eine unschöne Entscheidung; mal ganz abgesehen
von der Bedeutung, die H1 für Google & Co hat.Gruß
Die schwarze Piste
-
Hallo schwarze Piste,
Och ... du gibst doch selbst schon gute Hinweise, dass es sinnvoll sein kann
und ggfs. auch angezeigt, mehrere H1 auf einer Seite zu haben.Nein, daran kann ich mich nicht erinnern.
Ich wäre auch keinesfalls dieser Meinung!So hat normalerweise jede Seite einen Seitenkopf zur Gestaltung einer
"corporate identity", also regelmäßig ein Logo und/oder Websitenamen.
Hinzu kommt aber das Identifizierungsmerkmal für die spezielle Seite.
Das kommt sicherlich ins Title-Element, aber du schlägst ja schon selbst
richtigerweise vor, dass das irgendwie auch in die eigentliche Seite
gehört ... und aus meiner Sicht eher mit einer Überschrift erster Ordnung;
was sich ja mit deiner Ansicht zu decken scheint.Da hast du mich vollkommen falsch verstanden:
Das TITLE- Element muss zwar sogar nach Web-Standard einzigartig, aber es muss keinesfalls deckungsgleich mit dem H1-Element sein!Und schon müsste ich mich aber entscheiden, welche der beiden (oder gar 3)
H1-Überschriften ich zur H2 degradiere ... in meinem Beispiel selbst
strukturell und semantisch eine unschöne Entscheidung; mal ganz abgesehen
von der Bedeutung, die H1 für Google & Co hat.Das TITLE-Element spiegelt anders als die H1-Überschrift den jeweilgen Inhalt der gerade angezeigten Seite wider und entspricht daher der obersten Hn-Überschrift des Content-Bereichs um den es jeweils primär geht!
Die H1 Überschrift dient im Gegensatz dazu der Auszeichnung des allerobersten Titels, also der Identifikation des gesamten Webauftritts!
Das findet dann auch Google gut!
Gruß Gernot
--
super me-
Tachchen!
Da hast du mich vollkommen falsch verstanden:
Das TITLE- Element muss zwar sogar nach Web-Standard einzigartig, aber es muss keinesfalls deckungsgleich mit dem H1-Element sein!Und das habe ich wiederum mit keinem Wort geschrieben. ;-)
Das TITLE-Element spiegelt anders als die H1-Überschrift den jeweilgen Inhalt der gerade angezeigten Seite wider und entspricht daher der obersten Hn-Überschrift des Content-Bereichs um den es jeweils primär geht!
Die H1 Überschrift dient im Gegensatz dazu der Auszeichnung des allerobersten Titels, also der Identifikation des gesamten Webauftritts!
Mal unanhängig davon, was ich von "allerobersten" denke:
Deine Lösung degradiert H1 zur Überschrift ohne Unterscheidungskraft.
Als Nebeneffekt davon geht quasi jeder Nutzen bei den Suchmaschinen den
Bach hinunter. Die hohe Relevanz von H1 kann bestenfalls noch zur
Abgrenzung von anderen Websites dienen, bringt innerhalb deiner Website
aber gar nichts mehr.Da aber das Hauptargument die Semantik bleiben soll:
Aus meiner Sicht sollen die unterschiedlichen Hn eine Wertigkeit für die
aktuelle Seite untereinander andeuten. Gleiche Werte für n sollten also
dort genutzt werden, wo sich eine identische Wertigkeit gut begründen lässt.Damit geben H1 und Title - mit identischem Wortlaut oder nicht - der Seite
eine Inhaltsüberschrift. Hat das für die konkrete Seite eine geringere
Bedeutung als die "Überschrift" für die gesamte Seite? Aus meiner Sicht nicht.
Hier ist es also sehr gut zu rechtfertigen beiden H1 zuzuordnen ... IMHO
sogar höchst angezeigt.Das findet dann auch Google gut!
Gruß
Die schwarze Piste
-
Hi,
Deine Lösung degradiert H1 zur Überschrift ohne Unterscheidungskraft.
Als Nebeneffekt davon geht quasi jeder Nutzen bei den Suchmaschinen den
Bach hinunter. Die hohe Relevanz von H1 kann bestenfalls noch zur
Abgrenzung von anderen Websites dienen, bringt innerhalb deiner Website
aber gar nichts mehr.Du solltest bedenken, dass Google - eben weil h1 typischer Weise als Seitenüberschrift genutzt wird (und mehrfache Nutzung eher ein Indiz für Spam ist) - die h2 als typische Zwischenüberschrift wesentlich höher gewichtet.
freundliche Grüße
Ingo
-
-
-
-