Was ist der richtige Weg, um ein Logo mit CSS anzuzeigen?
Ich habe kürzlich CSS gelernt, und die Tutorial-Serie, die ich mir gerade anschaue, sagt, der beste Weg, ein Logo-Bild anzuzeigen, besteht darin, den Text in ein H1-Tag einzufügen und den CSS-Stil für dieses Tag auf ein Hintergrundbild zu setzen. mit einem Texteinzug von -99999 oder ähnlich großer Zahl.
Das scheint unglaublich hackisch und unelegant. Es scheint auch so, als würde die Verwendung von CSS, um Text zu verstecken, ein großes No-No für SEO-Zwecke sein (da das Verstecken von Text über CSS verpönt ist).
Ich habe auch gelesen, dass die Verwendung eines IMG vermieden werden sollte, da das Logo selbst nicht wirklich zufrieden ist, weshalb es auf die Entwurfsseite der Codierung (d.h. CSS) verwiesen werden sollte.
Was ist der aktuelle Konsens darüber?
4 Antworten
Die korrekte Darstellung eines Logos erfolgt mit einem <img> -Element. Wenn Sie Logos und Logos nicht studiert haben, werden Sie vielleicht nicht erkennen, dass ein Logo eine eigene Semantik hat und es sein muss präsentiert auf eine sehr spezifische Art und Weise. Es kann auch eine erforderliche Interpretation enthalten, die im Attribut [alt] verwendet werden sollte.
Wenn diese erforderliche Interpretation legitim eine Überschrift auf der Seite ist, wäre es semantisch korrekt, sie einem <h#> -Element hinzuzufügen:
In der Regel wird das Logo als Link verwendet. Daher ist es üblich, Folgendes zu sehen:
%Vor%Zusätzlich kann das Logo hervorgehoben werden (entweder oder je nach Grad):
%Vor%Um die Semantik eines Logos zu verstehen. Wenn Sie sich auf das Coca-Cola-Unternehmen beziehen, würde und sollte sich das Logo für die Marke nicht ändern, wenn Sie ein Stylesheet austauschen oder entfernen. Die meisten Leute verstehen das semantisch,
unterscheidet sich von
Ich wickle immer nur ein Anker-Tag um ein Bild:
%Vor%oder erstellen Sie das Anker-Tag als Block und setzen Sie ein Hintergrundbild
%Vor% Sie sollten immer img verwenden, um das Logo anzuzeigen. Die Verwendung von h1 und die Verwendung des Logos als Hintergrund ist eine sehr schlechte Übung und sollte vermieden werden. Dein Logo ist der Inhalt und kein h1 .
Harry Roberts hat es in seinem Beitrag - Ihr Logo klar erklärt ist ein Bild, kein <h1>
Ich denke es ist nicht wirklich wichtig . Es gibt viele verschiedene Möglichkeiten, dies zu tun, und sie werden alle unterstützt. Sie alle arbeiten. Die meisten von ihnen sind suchmaschinenfreundlich und perfekt zugänglich.
Ich würde so etwas tun:
%Vor%Suchmaschinen, Textmodus-Browser und Screenreader sehen den Alt-Text, alle anderen sehen das Logobild.
Tags und Links css graphical-logo