Varje webbplats har en logotyp, och om det är en sidfyllningsfunktion eller ett litet designelement, bildar det ofta den primära titelfunktionen på din sida. Den här artikeln visar hur du implementerar en logotyp med korrekt semantisk markering och enkel HTML-kod, med all presentation som görs via CSS.
Det kommer att se till att de som surfar på din webbplats utan bilder ser ett bra alternativ och ger sökmotorer en korrekt representation av din sidtitel.
Låt oss börja med HTML-kod. Det måste vara så enkelt som möjligt, vilket bara visar namnet på din webbplats / logotyp som bifogas topphuvudetiketter och en länk:
Nu när du har HTML-koden på plats, är det bara ett fall att stylera den med några rakt framåt CSS.
Denna CSS har två huvudsakliga saker:
- Det berättar att webbläsaren skapar ett visst område för din logotyp och tillämpar en bakgrund
- Den flyttar den faktiska texten för att visa sig ur visningen (9,999 pixlar till vänster)
Om någon bläddrar till din webbplats med CSS och bilder aktiverade ser de din vackra logotyp. Om inte, kommer bakgrundsbilden inte att visas - men texten indrycket kommer inte heller att användas - vilket betyder att de kommer att se din rubriktext som vanligt. Perfekt!
Det är ett enkelt men effektivt sätt att se till att din logotyp visas korrekt, fortfarande tillgänglig och hämtas korrekt av sökmotorer.