Was ist der richtige Weg, um ein Logo mit CSS anzuzeigen?

Question

Ich habe kürzlich CSS gelernt, und die Tutorial-Serie, die ich gerade sehe, sagt, dass die beste Möglichkeit zum Anzeigen eines Logos darin besteht, den Text in ein H1-Tag einzufügen und dann den CSS-Stil für dieses Tag auf Hintergrundbild einzustellen ein Texteinzug von -99999 oder ähnlich große Zahl.

Dies scheint unglaublich hackish 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 mit einem img sollte vermieden werden, da das Logo selbst nicht wirklich zufrieden ist, so sollte auf die Design-Seite der Codierung (d. H. CSS) verwiesen werden.

Was ist der aktuelle Konsens darüber?

Answer 1

Der korrekte Weg, um ein Logo anzuzeigen, ist mit einem Element. Wenn Sie logos and logotype nicht studiert haben, werden Sie vielleicht nicht erkennen, dass ein Logo eine eigene Semantik hat und auf sehr spezifische Weise präsentiert werden muss. Es kann auch eine erforderliche Interpretation aufweisen, die im Attribut [alt] verwendet werden sollte.

Wenn die erforderliche Auslegung rechtmäßig eine Überschrift auf der Seite ist, wäre es semantisch korrekt sein, es zu einem <h#> Elemente hinzuzufügen:

<h1> 
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" /> 
</h1> 

Typischerweise ist das Logo als Link verwendet wird, so ist es üblich, um zu sehen, :

<a href="/"> 
    <img src="logo.png"... /> 
</a> 

Zusätzlich das logo hervorgehoben werden kann (könnte entweder oder, je nach Grad sein):

<strong> 
    <a href="/"> 
     <img src="logo.png" ... /> 
    </a> 
</strong> 

---

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 Menschen verstehen, dass semantisch

unterscheidet sich von

Answer 2

ich immer nur einen Anker-Tag um ein Bild herum:

<a href=""><img src=""></a> 

oder den Anker-Tag als Block erstellen und ein Hintergrundbild

<a class="logo" href="">Logo</a> 

.logo { background: url("/path") no-repeat; width: 100px; height: 100px; display: block; text-indent: -9999px;} 

Answer 3

ich denke gesetzt ist es nicht wirklich Angelegenheit. 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.

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1> 

Suchmaschinen, Textmodus-Browser und Bildschirmlesegeräte finden Sie im Alt-Text, alle anderen sehen das Logo Bild:

Ich würde so etwas tun.

Answer 4

sollten Sie immer img das Logo angezeigt werden soll. Die Verwendung von h1 und die Verwendung des Logos als Hintergrund ist eine sehr schlechte Übung und sollte vermieden werden. Ihr Logo ist der Inhalt und kein h1.

Harry Roberts hat es sich deutlich in seinem Amt erklärt - Your logo is an image, not a <h1>