Ich habe mich gefragt, was ist die beste Praxis in Bezug auf Divs mit Hintergründen und Img-Tags. Ich verstehe, dass divs mit Hintergründen Sachen über ihnen haben können und was nicht, aber wenn es der Fall mit nur einem Bild ist, was ist die bevorzugte Methode? Vielleicht ist eine bessere Frage .. sind die Tags img veraltet? Wenn Sie ein Bild haben, das ein Link ist, sollten Sie ein IMG-Tag oder ein Div verwenden?
Danke! Matt Müller
Überlegen Sie es als semantisches Markup:
Wenn es sich um ein "Bild" auf der Seite handelt, verwenden Sie für die Bedeutung der Seite das img-Tag.
Wenn es etwas ist, das nicht so wichtig für die Bedeutung der Seite ist, dh. Hintergrundbild verwenden Sie ein Hintergrundbild für ein beliebiges Element (nicht nur ein Div).
Dieser Unterschied spielt in den meisten Browsern keine Rolle, wie die Seite angezeigt wird, hat aber eine andere Bedeutung als diejenigen, die die Bilder nicht visuell interpretieren.
Versuchen Sie sich vorzustellen, wie die Elemente von sehbehinderten Menschen interpretiert werden.
Es kann auch ein etwas anderes Verhalten bei Suchmaschinen geben - ich weiß nicht, ob Suchmaschinen Hintergrundbilder für ihre Bildsuche aufnehmen. Wenn Sie wirklich das Bild da draußen wollen, ist ein IMG-Tag sicherer.
ist das Bild für Layout oder Inhalt?
Wenn das Bild layoutbezogen ist, würde ich CSS verwenden und es in einem div ... haben, wenn es inhaltlich zusammenhängt, würde ich es in einem img haben ...
Hoffe das hilft!
Eine gute Möglichkeit, dies zu betrachten, besteht darin, Ihre Website mit deaktivierten Stylesheets anzuzeigen. Sie werden schnell feststellen, dass alle DIV-Tags mit Hintergrundbildern nicht angezeigt werden. Alle Ihre IMG-Tag-Bilder sind genau dort, wo sie sein sollten. Ich würde DIV-Tags mit Hintergrundbildern für alle Aspekte des Website-Designs und -Layouts verwenden und IMG-Tags für alles andere verwenden.
IMG-Tags haben alt-Eigenschaften und Titeleigenschaften. Diese werden anstelle des Bildes verwendet, wenn es nicht geladen wird, oder anstelle des Bildes in Browsern vom Typ Text oder Screenreader.
IMG-Tag ist nicht veraltet. Sie verwenden es mit dynamischen Bildern, die von Ihrem System kommen und gehen.
Hintergrundbilder auf divs sind nützlich, wenn Sie eine statische Gruppe von Bildern haben, die Teil Ihres Designs sind. Manchmal können Sie sie in ein großes Bild zusammenführen, um die Ladezeit und die Anzahl der HTTP-Anfragen pro Seite zu minimieren.