¿Cuál es la forma correcta de mostrar un logotipo con CSS?

Question

He estado aprendiendo CSS recientemente, y la serie de tutoriales que estoy viendo dice que la mejor manera de mostrar una imagen de logotipo es envolver el texto en una etiqueta H1, luego establecer el estilo CSS para esa etiqueta en la imagen de fondo, con una sangría de texto de -99999 o un número similarmente grande.

Esto parece increíblemente hackish y poco elegante. También parece que el uso de CSS para ocultar el texto sería un gran no-no para los propósitos de SEO (ya que esconder el texto a través de CSS está mal visto).

También he leído que se debe evitar el uso de una img, ya que el logotipo en sí no está realmente contenido, por lo que debe ser relegado al lado del diseño de la codificación (es decir, CSS).

¿Cuál es el consenso actual sobre esto?

Answer 1

La forma correcta de mostrar un logotipo es con un elemento <img>. Si no ha estudiado logos and logotype, es posible que no se dé cuenta de que un logotipo tiene su propia semántica y debe presentarse de una manera muy específica. También puede tener una interpretación requerida, que es lo que se debe usar en el atributo [alt].

Si esta interpretación requerida es legítimamente un titular de la página, sería semánticamente correcta para añadirlo a un elemento <h#>:

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

Normalmente, el logotipo se utiliza como un enlace, por lo que es común ver :

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

Además el logotipo se pueden destacar (podría ser cualquiera o dependiendo del grado):

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

---

Para comprender la semántica de un logotipo. Si está haciendo referencia a la empresa Coca-Cola, el logotipo de la marca no cambiaría, y no debería cambiar si lo cambió, o eliminó una hoja de estilo.La mayoría de la gente entiende que semánticamente,

es diferente de

Answer 2

Siempre acaba de envolver una etiqueta de ancla alrededor de una imagen:

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

o crear la etiqueta de anclaje como un bloque y establecer una imagen de fondo

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

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

Answer 3

Creo que en realidad no asunto. Hay muchas maneras diferentes de hacerlo, y todas son compatibles. Todos ellos trabajan. La mayoría de ellos son amigables para los motores de búsqueda y perfectamente accesibles.

me gustaría hacer algo como esto: motores

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

de búsqueda, navegadores en modo texto y lectores de pantalla ver el texto alternativo, todo el mundo ve la imagen del logotipo.

Answer 4

Siempre debe utilizar img para mostrar el logotipo. Usar h1 y usar el logotipo como fondo es una práctica realmente mala y debe evitarse. Su logotipo es el contenido y no un h1.

Harry Roberts ha explicado claramente en su puesto - Your logo is an image, not a <h1>