IMG mit background-image

[Jan-Frederik Stieler]

Hallo,
wie seht Ihr dass das img-Element mit einem background-image zu versehen anstatt mit src?
Grund dafür ist halt das man das Bild besser beeinflussen kann z.B. mittels background-size.
Von der Semantik her würde ich dies sogar eher bevorzugen als ein DIV.
Und was würdet ihr in dem Fall mit dem src machen? Einfach ein transparentes gif referenzieren oder einfach leer lassen?

Grüße

 

[SpiceLab]

Naja...

Grund dafür ist halt das man das Bild besser beeinflussen kann z.B. mittels background-size.

Wenn's darum geht, background-size lässt sich auf so ziemlich jedes HTML-Element (mit Hintergrundbild) anwenden.

Von der Semantik her würde ich dies sogar eher bevorzugen als ein DIV.

Ob dieses Vorgehen der Semantik dienlich(er) ist...?!

Und was würdet ihr in dem Fall mit dem src machen? Einfach ein transparentes gif referenzieren oder einfach leer lassen?

Einfach leer lassen wäre ganz schlecht, weil der eine oder andere Browser dann sein typisches Symbol für die nicht existente Bilddatei ausgibt.

Und das alt-Attribut dürfte in diesem Fall nicht angegeben werden - ansonsten erscheint mangels Bildquelle der alternative Text!

Also wäre hier zusätzlich eine transparente Bilddatei vom Server zu laden. In meinen Augen reine Ressourcen-Verschwendung. Insbesondere, wenn eine Vielzahl im Code existiert und/oder auf vielen Seiten enthalten ist.

Mein Fazit: Da hier offensichtlich kein allgemeines Block-Element <div> zum Einsatz kommen soll, nach einem aussagekräftigeren Element Ausschau halten, das zum Kontext passt. Aber bitte nicht dieses verquere Konstrukt!

[edit]Tipp-Ex[/edit]​

 

[Jan-Frederik Stieler]

Moin,
also es handelt sich um einen Slider. Momentan verwende ich auch ein Div dafür aber das hat halt überhaupt keine semantische Aussagekraft.
Und auf der Seite selbst befindet sich auch sonst nichts was sehr aussagekräftig wäre, außer einer Überschrift.

Einfach leer lassen wäre ganz schlecht, weil der eine oder andere Browser dann sein typisches Symbol für die nicht existente Bilddatei ausgibt.

Stimmt daran hatte ich jetzt gar nicht gedacht.
Aber was für ein anderes Element sollte den bei einem Slider/Bild passen?

Grüße

 

[SpiceLab]

also es handelt sich um einen Slider. Momentan verwende ich auch ein Div dafür aber das hat halt überhaupt keine semantische Aussagekraft.
Und auf der Seite selbst befindet sich auch sonst nichts was sehr aussagekräftig wäre, außer einer Überschrift.

[...]
Aber was für ein anderes Element sollte den bei einem Slider/Bild passen?

Hier würde ich bedenkenlos zu einem Listenelement (<ul>, <ol> oder <dl>) greifen

Ein Slider enthält semantisch betrachtet nichts anderes als eine Liste von (animierten) Elementen

Siehe z.B. http://sorgalla.com/jcarousel/examples/transitions/ => <li> + background(-image)

In den übrigen Beispielen sind klassisch die <img>-Elemente in einzelnen <li></li> verpackt.

PS: Ein allgemeines <div> erhält (noch immer) im Markup mit einem eindeutig bezeichnenden id-/class-Attribut eine gewisse Aussagekraft, in welchem Kontext es an dieser Stelle des Quellcodes steht, wofür keines der speziellen HTML5-Elemente (<header>, <nav>, usw.) zur Seitenstrukturierung exisiert.

Aber das nur am Rande bemerkt

[edit]Tipp-Ex[/edit]​

 

[Jan-Frederik Stieler]

Hi,
wenn ich eine Liste einsetze habe ich ja leere Listenelemente.
Eine leere Liste setzt an diese Stelle zwar die Bedeutung Liste hin aber gleichzeitig auch eigentlich nichts den es ist ja eine Leere Liste.
Und Listen strukturieren ja auch und wenn sie leer sind dann strukturieren sie nichts.
Die Element sind dann ja nur visuell, durch die Hintergrundbilder, für uns Menschen vorhanden.
Ich könnte die Liste aber mit einem Platzhaltertext füllen. z.B. dem Bildtitel und das dann per CSS auf display: none stellen.

PS: Ich war noch nie ein Fan davon Elemente über IDs/Klassen semantisch auszuzeichnen. Das funktioniert nämlich eigentlich nicht.
Es wäre wenn überhaupt pseudosemantisches Markup. Eine funktionierende Lösung für das grundlegende Problem eine erweiterte Semantik ins HTML einzuführen ist z.B. das role-Attribut.
Aber ich will hier keine Abhandlung über die Aufgabe von Semantik anstossen .

 

[SpiceLab]

wenn ich eine Liste einsetze habe ich ja leere Listenelemente.
Eine leere Liste setzt an diese Stelle zwar die Bedeutung Liste hin aber gleichzeitig auch eigentlich nichts den es ist ja eine Leere Liste.
Und Listen strukturieren ja auch und wenn sie leer sind dann strukturieren sie nichts.
Die Element sind dann ja nur visuell, durch die Hintergrundbilder, für uns Menschen vorhanden.

Aber nur, wenn du den Code dieses spezifischen Beispiels 1:1 übernimmst, und die Elemente nicht mit sinnvollem Inhalt befüllst, den die Bots dann crawlen können

In den übrigen Beispielen sind klassisch die <img>-Elemente in einzelnen <li></li> verpackt.

Ich könnte die Liste aber mit einem Platzhaltertext füllen. z.B. dem Bildtitel

Als "caption" bekannt - ...geht doch

PS: Deine berechtigten Kritikpunkte Richtung leerer Liste treffen im übrigen auch auf das bislang genutzte <div> zu

[edit]Tipp-Ex[/edit]​

 

[Jan-Frederik Stieler]

PS: Deine berechtigten Kritikpunkte Richtung leerer Liste treffen im übrigen auch auf das bislang genutzte <div> zu

Ja und deshalb hab ich da ja auch ein Problem mit diesen DIVs und habe diesen Post hier eröffnet um das zu diskutieren .

 

[SpiceLab]

Ja und deshalb hab ich da ja auch ein Problem mit diesen DIVs und habe diesen Post hier eröffnet um das zu diskutieren .

Dass du ihnen mittlerweile nichts mehr abgewinnen kannst, ist zwischenzeitlich bis zu mir durchgedrungen