Hehe, her er du inne på en svært omdiskutert problemstilling blant webdesignere. Det hele koker ned til et definisjonsspørsmål:

Som du helt sikkert vet, så skal design defineres i CSS, mens innhold og struktur skal defineres i HTML. Dermed blir spørsmålet som følger: Er logoen et designelement eller er den innhold?

Selv mener jeg logoen er en del av innholdet, den forteller hva websiden eller foretaket heter. Man kan argumentere for at logoen er den grafiske representasjonen for websiden, men jeg heller til at den forteller noe, og derfor er endel av innholdet.

Siden jeg mener logoen er en del av innholdet, bruker jeg img-taggen i HTML for å definere den. Videre skriver jeg hva som står i logoen i alt-attributten og omfavner den gjerne med en link til forsiden av nettstedet. I title-attributten på denne linken, bruker jeg gjerne det samme som står i logoen.

Hvis man mener logoen er en del av designet, så er det mer riktig å skrive hva som står i logoen i et element, for så å bruke image replacement for å erstatte det med logoen.

Bruk av logo i overskrifttaggen h1

Dette er også en viktig problemstilling. Mange hevder at, i motsetning til h2, h3 osv, så skal h1 være unik for hver side. Dette er jeg enig i, men noen ganger divergerer jeg likevel fra denne «regelen».

h1 skal som kjent brukes på «den viktigste overskriften på enhver side», feks overskriften på en artikkel. Det man skal være oppmerksom på, er at h1-taggen er en faktor i søkemotoroptimalisering. Hvis man ønsker å ranke på noe i søkemotorer, kan det være veldig lurt å inkludere ordet eller frasen i h1-taggen.

På dette nettstedet vil jeg gjerne ranke på ordet Hjemmeside, derfor har jeg brukt h1-taggen to ganger – én gang rundt logoen og under hver hovedtittel på undersidene. På den måten signaliserer jeg at informasjonen på websiden er høyst relevant til h1.

Mange prøver seg på å spamme søkemotorene ved å bruke ekstremt mange h1-tagger, dette lønner seg ikke, da det kan resultere i en penalty/straff, og websiden vil dermed ranke mindre eller bli fjernet helt fra søkemotorenes indeks.

Hvorvidt man velger å bruke h1 rundt både logo og overskrift, eller kun hovedoverskrift, koker ned til hvor viktig det er for deg å ranke på ordet/navnet i logoen.

Hvis man ikke ønsker å bruke h1 rundt logo, kan man bruke en div. Videre kan man, avhengig av hvorvidt man mener logoen er design eller innhold bruke CSS og image replacement eller img-taggen.

Image replacement

Man bruker gjerne image replacement alle steder hvor bilder brukes, men er å anse som en del av designet. Ett eksempel er feks å bruke det på underoverskrifter. Det er selvsagt lite praktisk å gjøre dette, dersom man har mange overskrifter.

Igjen kan man selvsagt argumentere for at underoverskrifter er innhold, og at man derfor ikke bør bruke denne metoden på underoverskrifter, men heller nytte img. :) Grunnen til at det kan være ønskelig å bruke image replacement på underoverskrifter, er fordi man vil bruke en utradisjonell font (skrifttype).

Hvis man lager hjemmeside for en bedrift, og hjemmesiden kun skal informere om hva bedriften driver med og så videre, så kan det være nyttig å bruke image replacement på overskrifter. Da får man straks mer kontroll over hvordan overskriftene ser ut, og dermed kan kreativiteten få friere spillerom.

Hvor kan man bruke image replacement

Som du ser har jeg brukt image replacement på overskriften her for å illustrere. Koden jeg brukte i HTML for å få til denne effekten er som følger:

Her har jeg satt en id på h2-taggen. Videre definerer jeg egenskapene for h2 i CSS, slik:

Det som skjer her, er at man setter bakgrunnen på selve elementet. Videre bruker man text-indent: -9999px for å indentere teksten som egentlig befinner seg i taggen ut av skjermen. Dette grepet yter dobbel funksjon; hvis noen ikke har CSS aktivert, vil teksten likevel være tilgjengelig, fordi bildet ikke vil vises, samt. at indenteringen ikke skjer. Det kan sammenlignes med at man bruker alt-attributten i img for å skrive teksten i et bilde.