HTML5 -Fremtidens kode i dag?

Mindre kode = raskere nettside = fornøyd brukeropplevelse

Mange nettsider bruker fremdeles tabell-oppsett av sidene. Er dette god kode å bruke i år 2011?

Man kan hevde at litt mer kode ikke har noe å si i disse tider når fleste parten av brukerne har bredbåndstilgang, men saken er den at jo mindre kode man klarer seg med på en nettside, dess friskere vil brukeren oppleve siden – alt går jo fortere. Man belaster også ”internett” mindre og man er derfor miljøvennlige, hvis man vil strekke det litt langt.

Tabell oppsett av sider hørte hjemme på gamle HTML4.01 kodede sider, før nettleserne fikk skikkelig støtte for CSS. I år 2011 er det under 5% som bruker web-utviklernes hatede Internet Explorer 6, dette vil si at CSS har bred støtte og man bør absolutt ikke bruke tabell-oppsett av nettsider.

HTML5 er nyeste gren på treet av kodespråk brukt på nettsider, det er enda ikke vedtatt endelige retningslinjer for hvordan det skal være, men det er enighet om sentrale ting. De største nettlesere (Opera, Firefox, Internet Explorer 9, Chrome) har alle begynt implementeringen av HTML5 støtte og de vanligste kodene man ser vil komme i HTML5 er allerede støttet hos disse.

Ikke vedtatt? Bør vi bruke HTML5 da?

Så klart man kan begynne å bruke det i dag. HTML5 er ”bakoverkompatibelt”, det vil si det har en doctype som alle nettlesere godkjenner.

Søkemotoroptimalisering

”HTML5 er en mer semantisk korrekt måte å kode nettsider på.”

Jeg drister meg til å komme med ovenstående påstand. Det finnes uttalige innganger til å oppnå god optimalisering på søkemotorer, en av de viktigste er at nettstedet er kodet med korrekt nesting av overskrifter og paragrafer.

Før HTML5 kodet man sider med korrekt nesting av overskrifter – frem til kundene legger inn artikler og nyheter. De fleste CMS systemer har en ”word”-editor hvor brukere legger inn artikler og nyheter osv. En vanlig bruker vil som oftest ikke tenke over at når man setter inn en ”Overskrift 1” på denne er det allerede en overskrift 2 som er ”far” til denne. Dette blir feil semantikk, da man ikke skal ha overskrift 1 etter en overskrift 2.

En artikkel begynner med en hovedoverskrift la oss kalle den h1. Under overskrifter blir h2 og h3 osv. Disse bør nestes korrekt for at opplevelsen skal bli fullkommen. La meg demonstrere dette i en liste:

• h1
  paragraf
  • h2
    paragraf
    • h3
      paragraf
      paragraf
  • h2
    • h3
      • h4
      • h4
  • h2

Man begynner altså med en hovedoverskrift og de neste overskriftene er underoverskrifter til denne igjen og slik fortsetter det.

På en nettside er kanskje firmanavnet første overskrift på nettstedet. Og neste overskrift er kanskje Nyheter og der igjen kommer man inn på artikkelen som ble skrevet av brukeren i CMS systemet. Brukes det Overskrift 1 her vil det altså bli sidestilt med firmanavnet og man har feilet på semantikken.

HTML5 og semantikk

Med HTML5 løser dette seg ganske så fint. I HTML5 deler man hele nettstedet opp i sections og articles. Det vil si at man trenger ikke tenke på denne ”nestingen” av overskrifter, HTML5 gjør det for deg.

Begynner man nettstedet med en overskrift1 og følger opp med en ”section” for nyheter og tittelerer denne med en overskrift 1 vil den for HTML5 være en overskrift2 av overskrift1. Videre deler man kanskje inn nyhets delen med flere ”articles” og hver av disse vil være innhold fra brukerens ”word”-editor. Hver av disse kan nå begynne med overskrift 1 som gjør det lettere å forstå når man skriver artikkelen/nyheten, første h1 i selve nyheten vil altså bli en overskrift 3 for nettstedet.

Søkemotorer vil oppfange dette og vil bedre forstå nettstedet og innholdet – dette vil igjen gi deg en bedre rangering på søkeresultater.

Vi hos InBusiness strever etter å lage de beste optimaliserte sidene for deg og brukerne av ditt nettsted, hos oss får du ”Fremtidens kode i dag”.