Qual è il modo corretto di visualizzare un logo con i CSS?

Question

Recentemente ho imparato CSS e la serie di tutorial che sto guardando dice che il modo migliore per visualizzare un'immagine del logo è di avvolgere il testo in un tag H1, quindi impostare lo stile CSS per quel tag sull'immagine di sfondo, con un rientro del testo di -99999 o un numero simile.

Questo sembra incredibilmente hackish e inelegante. Sembra anche che usare i CSS per nascondere il testo sarebbe un grande no-no ai fini SEO (poiché nascondere il testo tramite CSS è disapprovato).

Ho anche letto che l'uso di img dovrebbe essere evitato, in quanto il logo stesso non è realmente contenuto, quindi dovrebbe essere relegato sul lato design della codifica (cioè CSS).

Qual è l'attuale consenso su questo?

Answer 1

Il modo corretto di visualizzare un logo è con un elemento <img>. Se non hai studiato logos and logotype, potresti non rendersi conto che un logo ha la sua semantica e deve essere presentato in modo molto specifico. Può anche avere un'interpretazione richiesta, che è ciò che dovrebbe essere usato nell'attributo [alt].

Se questa interpretazione richiesta è legittimamente un titolo nella pagina, sarebbe semanticamente corretto per aggiungerlo ad un elemento <h#>:

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

Tipicamente il logo viene utilizzato come collegamento, quindi è comune vedere :

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

Inoltre il logo può essere sottolineato (potrebbe essere uno o in base al grado):

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

---

Per comprendere la semantica di un logo. Se si fa riferimento alla società Coca-cola, il logo per il marchio non dovrebbe, e non dovrebbe cambiare se si scambia o rimosso un foglio di stile.La maggior parte delle persone a capire che semanticamente,

è diverso da

Answer 2

ho sempre Basta avvolgere un tag di ancoraggio intorno a un'immagine:

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

o creare il tag di ancoraggio come un blocco e impostare un'immagine di sfondo

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

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

Answer 3

penso in realtà non importa. Ci sono molti modi diversi per farlo e sono tutti supportati. Funzionano tutti. La maggior parte di essi sono adatti ai motori di ricerca e perfettamente accessibili.

vorrei fare qualcosa di simile: motori

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

ricerca, browser in modalità testo e lettori di schermo vedere il testo alt, tutti gli altri vede l'immagine del logo.

Answer 4

È consigliabile utilizzare sempre img per visualizzare il logo. Usare h1 e usare il logo come sfondo è una pratica veramente brutta e dovrebbe essere evitato. Il tuo logo è il contenuto e non uno h1.

Harry Roberts ha spiegato chiaramente nel suo post - Your logo is an image, not a <h1>