Ogni sito ha un logo, e se si tratta di una funzione di riempimento della pagina o di un piccolo elemento di design, spesso costituisce la funzione principale del titolo della pagina. Questo articolo ti mostrerà come implementare un logo usando il markup semantico corretto e il codice HTML semplice, con tutta la presentazione fatta tramite CSS.
Garantirà che coloro che navigano nel tuo sito senza immagini vedranno un'alternativa decente e forniranno ai motori di ricerca una rappresentazione corretta del titolo della tua pagina.
Iniziamo con il codice HTML. Deve essere il più semplice possibile, mostrando solo il nome del tuo sito / logo racchiuso tra tag di intestazione e un link:
Ora, una volta ottenuto il codice HTML, è semplicemente un caso di acconcialo con un semplice CSS.
Questo CSS fa due cose principali:
- Indica al browser di creare una determinata area per il tuo logo e di applicare uno sfondo
- Sposta il testo vero da visualizzare fuori dalla vista (9,999 pixel a sinistra)
Se qualcuno naviga nel tuo sito con CSS e immagini abilitate, vedrà il tuo bellissimo logo. In caso contrario, l'immagine di sfondo non verrà visualizzata, ma non verrà applicato nemmeno il rientro del testo, il che significa che vedranno il testo dell'intestazione come normale. Perfezionare!
È un modo semplice ma efficace per garantire che il tuo logo sia visualizzato correttamente, sia accessibile e raccolto correttamente dai motori di ricerca.