Semantik

Ord som dyker upp rätt ofta i webbutvecklingssammanhang är Semantik och Struktur. Innan så predikade folk om att man skulle validera sina sidor i W3C’s valideringsverktyg, men nu måste man även göra allt ”semantiskt korrekt”.

”Så vad menas med Semantisk HTML?”, undrar då många. Jag hade tänkt gå igenom detta så snabbt och smidigt som möjligt, se det som en summering istället för en fullständig genomgång.

semantisk [sem'an:tisk] semantiskt semantiska adj.
som har att göra med språklig betydelse.

Semantik betyder

När det gäller semantik inom HTML så handlar det om att man ska använda rätt element för rätt innehåll. Dvs för en lista ska man använda sig av <ul>, <ol>, <li>, för löpande text ska <p> användas, för rubriker så ska <h[1-6]> användas.

Att göra en sida semantiskt korrekt kan ibland vara lite krångligt, men det är helt klart värt det i längden. En semantiskt korrekt hemsida ökar tillgängligheten och gör sidan mer sökmotorvänlig. Just inom SEO (sv. sökmotoroptimering/sökmotorpositionering) talas det mycket om semantik, detta pga att sökmotorerna enklare kan indexera semantiskt korrekta sidor. En semantiskt korrekt och välstrukturerad sida medför då även större chans till högre placering i sökmotorer.

Men varför bry sig om semantik?

En semantiskt korrekt hemsida kan vara ett steg mot bättre sökmotoroptimering. Genom att strukturera all data på ett korrekt sätt blir det enklare för sökmotorer att indexera, förstå och tolka din sida på rätt sätt. Semantiken kan även leda till stora fördelar ur en tillgänglighetssynpunkt. En skärmläsare kan därigenom presentera din sida på ett mer korrekt sätt för t.ex en synskadad.

När det gäller tillgängligheten för användare så förbättrar semantiskt korrekta hemsidor chanserna att allt visas korrekt på t.ex en mobil eller pda. Det gör det även enklare för skärmläsare (för t.ex synskadade) att läsa upp innehållet för användaren.

Några snabba tips

  • <h1>-<h6> för rubriker.
  • <p> för löpande text.
  • <div> och <span> istället för <table> för design.
  • <table> för tabulär data.
  • <b>, <i>, <strong> osv istället för att style’a detta genom CSS med t.ex font-weight eller font-style.
  • <ul>, <ol>, <dl>, <li> för listor.
  • Stäng av CSS och ev. bildvisning i webbläsaren då och då för att se ifall sidan genereras på ett sätt som fortfarande gör det möjligt att navigera och förstå sig på innehållets struktur.

Semantik, HTML4 och HTML5

Den kommande webbstandarden HTML5 har tagit ett stort kliv framåt för semantiken på webben. Tidigare var det tabeller eller div-element som gällde för design av hemsidor, men HTML5 introducerar ett gäng nya element  så som:

  • <section>
    Ett exempel på en sektion kan vara kapitel. En hemsida kan struktureras upp i olika sektioner så som nyheter, introduktion och kontaktinformation.
  • <nav>
    Nav är till för navigationen på en sida, till exempel en meny.
  • <article>
    Article är till för till exempel kommentarer, bloggpost, forumpost och annan text och data som på något annat sätt kan användas utanför sidan, i till exempel en RSS-feed.
  • <aside>
    Används för att skilja delar av innehållet från det som är det viktiga. Till exempel kan <aside> användas för citatblock, reklam, navigation el dyl i en <article>.
  • <hgroup>
    Hgroup representerar en heading av en sektion. Elementet är till för att gruppera ett flertal <h1>-<h6> i en section. Användbart när det kan finnas flera nivåer av headings.
  • <header>
    Oftast den översta delen av hemsidan. Kan till exempel innehålla <h1>-<h6>, logotyp, sökfält med mera.
  • <footer>
    Footern är nedersta delen på en hemsida och kan till exempel presentera vem som skrev innehållet, eventuell copyright, relaterade länkar osv.
  • <time>
    Till för att presentera ett datum eller en tid.
  • <mark>
    Till för att markera text för till exempel referenser.

Läs mer

Sidor som ofta behandlar ämnet semantik är:

stabilt webbhotell