herlig.net

Generell semantikk

I tidlige versjonar av HTML – tilbake til då CSS endå ikkje var tatt i bruk – fantest det ein god del element som var der kun for å formatere presentasjonen til HTML-dokumentet. Eksempel på slike er for eksempel font, som bestemte korleis teksten skal sjå ut – slikt ein skal gjere med CSS per i dag. Ellers så var det vanleg å fylle opp body-elementet med forskjellige eigenskapar for korleis linkar skal sjå ut, bakgrunnsbilde for dokumentet o.l. Dette var ikkje noko gale i det – før. Då var det berre ved hjelp av datamaskiner ein kunne surfe på internett, og korleis det såg ut hadde igrunn ikkje særlig mykje å bety; «webdesign» var ikkje eit særlig stort tema. Etter kvart kom tabellane inn på bana, og det vart mogleg å lage ein layout slik ein tenker på ein layout i dag. Veldig mange såkalla WYSIWYG-editorar gjorde det enkelt for «mannen i gata» å lage websider. Mange av desse programma brukte nettopp desse elementa for presentasjon til å skape layouten på sida, og nokre av dei gjer det desverre endå.

Kva er semantikk?

Semantikk er enkelt og greit at ein bruker dei elementa i (X)HTML til akkurat det dei er meint å brukast til. p-elemtentet til avsnitt (paragraph, frå engelsk), ul-elementet til ei urodna liste (unordered list, frå engelsk) osv.

semantikk ~tik´k -en (fra gr’betydningsvitenskap’, av sema ‘tegn’) vitenskapen om ordenes betydning.

Kvifor semantikk?

I dag har semantikk på websider blitt veldig viktig, fordi det er så mange forskjellige medium å sjå Internet i/frå. Ein har alt frå vanlege datamaskiner med høgoppløselige nettlesarar og grafiske grensesnitt, til mobiltelefonar og datamaskiner med spesialnettlesarar til for eksempel svaksynte. Derfor er det viktig at ting blir standardisert, slik at alle kan få innholdet levert i perfekt stand uansett kva slags medium dei bruker for å sjå på sida. For å vise til eit eksempel:

Du skal bruke strong-elementet til å utheve/legge vekt på tekst – ikkje b. Kvifor? Jo, fordi det einaste b-elementet fortel nettlesaren er at teksten skal vere feit (bold). Den seier ingenting om kvifor, så kanskje ein talenettlesar for
blinde ikkje gjer noko stor sak ut av det. Derimot, hadde du brukt strong-elementet, så fortel det nettlesaren at «her skal du legge vekt på dette ordet» – og nettopp dette blir gjort, uansett medium – på den måten dei forskjellige nettlesarane gjer dette. Enten ved å la skrifta vere feit, la den få ein annan farge e.l.

Her kjem fordelane med CSS inn. Når du skriv semantisk HTML-kode, så vil innholdet komme perfekt fram uansett medium brukt for å sjå sida. Design/Layout vil sansynligvis kun fungere i grafiske, høgoppløselige grensesnitt, men innholdet vil komme fram uansett. I nettlesarar som ikkje støtter CSS vil CSS bli deaktivert, og innholdet kjem fram i den rekkefølgen du har satt det opp.

Unngå spesielt desse

Under har eg laga ei lita liste over eit par element du bør unngå. Denne lista er ikkje komplett.

• font-elementet bør du unngå, effekten du vil ha skal du bruke CSS til å oppnå.
• i-elementet (italics – kursiv) skal du unngå. Blir det samme som med eksempelet om b-elementet over. Bruk em (frå engelsk «emphasis» – vektlegging) i staden.
• Tabellar til layout skal du unngå, forklart her.
• img-elementet skal ikkje brukast til å vise grafikk som har med layout/grafisk utforming å gjøre. Dette elementet skal kun brukast i forbindelse med illustrasjonar/bilder som faktisk er innhold på sida.

Om du er fersk i HTML så anbefalar eg å ta ein titt på nybegynnarguidane til HTMLDog sidan desse forklarar HTML og CSS grundig frå bunnen av med semantisk oppbygging.

Denne artikkelen skreiv eg i hovudsak for unrealized.org – men den skapar jo innhald, så kvifor ikkje ha den med her også?