h1-Element mit img oder mit CSS ansprechen?

[francesco]

Es geht um ein h1-Element, dass als Logo auf jeder Seite der Website oben sichtbar ist. Egal ob man das direkt im HTML

<h1><img src="logo.jpg" alt="Logo-Text"></h1>

oder mit CSS

h1 { background: url(logo.jpg); }

löst, das Ergebnis ist dasselbe.

Ich habe mich nun gefragt, welche der beiden Varianten die "korrektere" ist und zwar im Sinne der W3C-Spezifikation. Bis jetzt habe ich immer die zweite Variante mit CSS bevorzugt, da Sie mir irgendwie logischer vorkam und den HTML-Code auch ein bisschen sauberer erscheinen lässt. Allerdings steht in der Spezifikation, dass man dies nur tun sollte, falls es sich um reine Dekoration handelt:

In general, if an image is decorative but isn't especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site's CSS, not in the markup of the document.

Das Logo trägt auch zu einem gewissen Teil zum Design der Seite bei, es besteht aber nur aus Text.

Mit der ersten Variante würde man sich teils komplizierte Image Replacement-Techniken, die zudem noch barrierefrei sein sollen, sparen.

Würde mich über Anregungen freuen!

 

[Bernhard]

Es geht um ein h1-Element, dass als Logo auf jeder Seite der Website oben sichtbar ist. Egal ob man das direkt im HTML

<h1><img src="logo.jpg" alt="Logo-Text"></h1>

oder mit CSS

h1 { background: url(logo.jpg); }

löst, das Ergebnis ist dasselbe.

Ich habe mich nun gefragt, welche der beiden Varianten die "korrektere" ist und zwar im Sinne der W3C-Spezifikation. Bis jetzt habe ich immer die zweite Variante mit CSS bevorzugt, da Sie mir irgendwie logischer vorkam und den HTML-Code auch ein bisschen sauberer erscheinen lässt. Allerdings steht in der Spezifikation, dass man dies nur tun sollte, falls es sich um reine Dekoration handeltas Logo trägt auch zu einem gewissen Teil zum Design der Seite bei, es besteht aber nur aus Text.

Mit der ersten Variante würde man sich teils komplizierte Image Replacement-Techniken, die zudem noch barrierefrei sein sollen, sparen.

Würde mich über Anregungen freuen!

Hallo ccisco,

ganz wesentlich ist der Unterschied, wenn du Deine Seiten mit den Standart-Einstellungen
der allermeisten Browser druckst: da werden Hintergrundbilder meist nicht mitgedruckt.

Würdest Du das Logo auch auf einem Briefpapier einsetzen, dann solltest Du es als
Vordergrundbild in Deine Seiten einsetzen.

Grüße
Bernhard

 

[neuroleptika]

Und wenn nicht, den h1-Text unter das background-image schieben.
Oder besser gesagt das background-image über den h1-Text schieben.
Übersicht: Image-Replacement-Techniken – Artikel von Jens Meiert

 

[threadi]

Die erste Variante ist aus semantischer Sicht nicht korrekt. In eine Überschrift gehört auch Text, nicht nur ein Bild. Wenn Du es so machst kannst du auch die Überschrift weglassen und nur das Bild reinsetzen.

Die zweite Variante ist die schickere, erfordert aber dennoch innerhalb der Überschrift auch lesbaren Text. Wenn es dein Design in dieser Form nicht erfordert dann nimm lieber nur ein Bild ohne jegliche Überschrift.

 

[prm]

Es gibt immer mehrere Wege, um ans Ziel zu kommen.
Wenn es sich nur um eine Grafik handelt, halte ich das Element h1 für fehl am Platz, denn "Überschrift" drückt ja schon aus, dass da auch Text reingehört.

Somit könntest du das Bild also direkt einfügen.
Eine weitere Variante wäre, einen Header-Div mit dieser Hintergrundgrafik zu definieren. Das hätte den Vorteil, dass du bei Änderung der Grafik lediglich die CSS-Datei ansprechen musst und nicht jede einzelne Seite.

Oder - wenn sonst keine Hintergrundgrafiken erforderlich wären - könntest du die Grafik ebenso dem body oder content als Hintergrundgrafik zuweisen und positionieren und hättest dir den zusätzlichen Header-Div gespart.

 

[Efchen]

Die erste Variante ist aus semantischer Sicht nicht korrekt. In eine Überschrift gehört auch Text, nicht nur ein Bild.

Noch eine Variante: :-)

Es kommt drauf an, wie das Bild aussieht.

IMHO gilt grundsätzlich: Wenn ein Bild Content enthält, muss es wie normaler Content in HTML eingebunden werden. Der Content wird dann im alt-Attribut angegeben. So würde die erste Variante in diesem Fall die richtige sein, weil ccisco sagt, das Image enthält Text.

Denn nur so wird das Bild auch zu Content:
- Browser drucken es aus.
- Durch den ALTernativtext wird auch in Browsern ohne Grafiken die richtige Überschrift ausgegeben.
- barrierefrei

Bilder, die reine Zierde sind, werden als background-image eingebunden, weil sie keinen Content darstellen. Ein Banner, das in keiner Weise Content beinhaltet, würde ich auch nicht als <h1> einbinden. Ein Banner, das das Logo einer Firma enthält, könnte ich mir als <h1><img> vorstellen, im alt steht dann der Name der Firma. Ist ja durchaus auch eine Überschrift.

 

[francesco]

Bernhard, das habe ich gar nicht gewusst, danke für den Tipp!

neuroleptika, es geht nicht um die Technik, sondern darum, welches die "richtigere" Variante im Sinne der W3C-Spezifikation ist. Trotzdem Danke für den nützlichen Link!

threadi, das stimmt nicht. Das Logo besteht ja nur aus Text, d. h. es enthält nur Inhalt und Inhalt kommt in HTML rein.

prm, Bilder als h1 zu deklarieren ist ja nicht falsch. Den Text liefert ja das alt-Attribut. Ansonsten, danke für die Tipps, aber wie gesagt mir geht es nicht um die Technik.

Efchen, so habe ich mir das eigentlich auch gedacht. Ich werde jetzt mal die erste Variante hernehmen und schauen, wie ich in Zukunft damit zurecht komme.

Weitere Kommentare erwünscht. Bin sehr wissbegierig, was das Thema angeht!

 

[threadi]

threadi, das stimmt nicht. Das Logo besteht ja nur aus Text, d. h. es enthält nur Inhalt und Inhalt kommt in HTML rein.

Ich definiere (wie auch viele andere) als Inhalt die Texte die von Suchmaschinen gelesen werden können. Also reine Texte. Bilder gehören nicht dazu.

 

[neuroleptika]

Mann kann auch beides kombinieren:

<h1><img src="logo.jpg" alt="Logo-Text"><span></span></h1>

Das background-image könnte nur für das screen-Design mit dem span über das img geschoben werden.

Für das print-Design könnte mann nur das img anzeigen lassen.
Zusätzlich zum img könnte auch noch weiterer Text in h1 stehen.

Background-images sind sind für flexieble screen-Layouts geeigneter.
Der Text im alt-Attribut wird von Suchmachinen erfasst.

 

[Efchen]

Ich definiere (wie auch viele andere) als Inhalt die Texte die von Suchmaschinen gelesen werden können. Also reine Texte. Bilder gehören nicht dazu.

Ich gehe doch ganz stark davon aus, dass Suchmaschinen sich bei Images den Wert des alt-Attributes auslesen, denn dazu ist es ja da! Somit können Suchmaschinen sehr wohl Inhalte von Images auslesen - wenn der Webmaster sie anständig angibt!

Nachtrag: neuroleptika schreibt es ja: "Der Text im alt-Attribut wird von Suchmachinen erfasst."

 

[threadi]

Der Alternativtext des Bildes hat jedoch nur in Bezug auf das Bild eine Bedeutung. Es hat keine Bedeutung in Bezug auf eine umliegende Überschrift und ist somit weniger Wert aus Sicht der Suchmaschinen in Relation zum Text der Seite.

 

[neuroleptika]

Ich will nicht ausschließen, daß du damit recht hast.
Ich hoffe aber, daß dem nicht so ist.
Wo hast du das denn her?

 

[threadi]

Sind teils eigene Erfahrungen, teils viele Artikel zum Thema SEO. Z.B.:

Um den Inhalt klar zu strukturieren muss auf die HTML-Elemente H1-H6 zurückgegriffen werden. je höherwertig eine Headline ist, desto relevanter wird der enthaltene Text eingestuft.

.. von Bildalternativtexten ist keine Rede. Dafür gibt es viele Seiten zum Thema Bildoptimierung die jedoch höchstens aussagen, dass die im Alternativtext enthaltenen Keywords von Suchmaschinen als Anhaltspunkt für den Inhalt der Seite genutzt werden, nicht um diesen zu Bewerten. Bewertet wird höchstens der Alternativtext in Bezug auf das Bild (für die Bildersuchen der Suchmaschinen). Da spielt übrigens auch die webhosting24 - Login eine Rolle.

Basics: Suchmaschinenoptimierung (SEO) auf Kulturbanause
Webdesign - Wie Suchmaschinen wie Google Inhalte und Relevanz von Internetseiten bewertet
Bilder optimieren für google Bildersuche | tagSeoBlog
BITV-Bedingung 1.1 - Alternativtexte : Einfach für Alle

 

[Efchen]

von Bildalternativtexten ist keine Rede.

Was ja nicht heißt, dass sie nicht beachtet werden.
Es wäre schlimm, wenn es so wäre und würde die Wichtigkeit des alt-Attributs enorm abschwächen!

In meinem Verständnis arbeiten Suchmaschinen genauso wie ein Browser ohne Grafiken. Und da wäre die Überschrift bei einem img im h1 das, was im alt-Attribut steht.

Nur so macht es IMHO Sinn. Praktisch jede Website hat (zumindest sinngemäß) ein <h1> in Form eines Banners als Site-Titel. Es wäre schlimm, wenn das nicht beachtet werden würde.
Und es kann doch nicht sein, dass man mit CSS rumtricksen muss, um Text von Bildern überlappen zu lassen, damit das klappt. Semantik mit CSS? Hä?

dass die im Alternativtext enthaltenen Keywords

Wer sagt dass das Keywords sind? Das sind doch keine Keywords, das ist Content.

Auch ich kann nicht sagen, dass Du Unrecht hast, weil ich es selber nicht belegen kann, aber ich fände schlimm, wenn es so wäre! Das würde für mich keinen Sinn ergeben.

 

[neuroleptika]

Google will gute Suchergebnisse.
Wenn viele Seiten keinen relevanten Inhalt in <h1> <img alt> enthalten, reagiert Google da natürlich drauf.
Meißtens wird der Seitentitel in <h1> wiederholt. In alt-Texten steht oft auch "banner" oder "logo". Sowas interessiert keinen Suchenden.

Von daher kann ich mir vorstellen, daß Google <h1> <img alt> tatsächlich nicht sehr hoch gewichtet.

Umgekehrt kann es auch Elemente geben deren Inhalt Google höher gewichtet obwohl das Element eigentlich keine semantische Hervorhebung meint.
Z.b <b> oder <i> könnten höher gewichtet werden weil viele Webautoren damit wichtige Inhalte auszeichnen.

Diesen Unsinn haben die Webmaster also selbst verursacht.

 

[Efchen]

Das hieße, Google setzt sich über Spezifikationen hinweg, nur weil viele sie nicht richtig anwenden?

Das wäre ja das selbe, wie wenn der IE die Standards in Sachen HTML und CSS setzen würde, nur weil er der meistbenutze Browser ist.

Das ist krank.

 

[neuroleptika]

Das ist krank.

Vielleicht.
Aber was sollen sie denn machen wenn die Inhalte nun mal falsch ausgezeichnet sind?

 

[Efchen]

Na, falsche Suchergebnisse anzeigen und den schwarzen Peter den Webmastern in die Schuhe schieben, die haben doch den Mist verbockt.

Wenn das der aktuelle Zustand wäre, würde das nur dazu führen, dass die Webmaster noch mehr dazu gezwungen werden, schlechten Code zu schreiben! Das kanns doch nicht sein!

 

[francesco]

Freut mich, dass so eine interessante Diskussion drauß geworden ist! :-)

threadi, in der W3C-Spezifikation steht, dass das alt-Attribut der fallback content des img-Elements ist.

The image given by the src attribute is the embedded content, and the value of the alt attribute is the img element's fallback content.

D. h. doch, dass Suchmaschinen, die ja nur nach Text suchen, dieses alt-Attribut als das h1-Element identifizieren.

(...)the alt attribute gives a textual equivalent or replacement for the image.

Wieso sollten Suchmaschinen den fallback-Text weniger werten als normalen?

 

[Bernhard]

D. h. doch, dass Suchmaschinen, die ja nur nach Text suchen, dieses alt-Attribut als das h1-Element identifizieren.
Wieso sollten Suchmaschinen den fallback-Text weniger werten als normalen?

Hallo Cisco,

ganz einfach, weil Suchmaschinen sehr vorsichtig mit allen Inhalten sind, die der
normale Besucher der Website nicht zu sehen bekommt.
Da ist die Gefahr doch sehr groß, dass "Suchmaschinenoptimierer" in den alt-Text
etwas hineinschreiben, womit sie gefunden werden wollen, ohne, dass es auf der
Seite lesbar ist...

Grüße
Bernhard