hebedesign.com/blogg

Hva er "semantisk kode"?

Et av de store mantraene innen webstandard-argumentasjonen er at man skal skrive “semantisk riktig kode”. Men hva betyr nå det? Jeg skal prøve å gi et svar på dette, samt vise hvordan du skal gå frem for å kode i henhold til dette kravet.

Semantikk

De som husker godt fra norsktimene drar kanskje kjensel på ordet “semantikk”. I språklære er semantikk læren om ordenes betydning. Innenfor webutvikling er det også knyttet til betydning, og går ut på at vi skal markere elementene basert på deres funksjon eller betydning for innholdet.

Gammel praksis

I altfor mange år har trenden vært at man har bygget opp websider med tabeller, og plassert innholdet i tabellceller basert på hvor vi ville det skulle dukke opp i forhold til hverandre på skjermen. Overskrifter har blitt markert med <b>’er og <font>-tagger og mellomrom har vi laget med &nbsp; og <br>.

Men den gode, gamle <table>-taggen skal egentlig bare brukes for å sette opp såkalte tabulære data, altså innhold som bør presenteres i rader og kolonner. En tippekupong bør kodes som en tabell, en kalender likeså - men det er ingen grunn til å sette opp et komplett sideoppsett med tabeller.

<b> (eller aller helst <strong>) skal brukes for å angi trykk eller viktighet, ikke for å dekorere - og <font>-taggen er ikke engang gyldig html. Og ikke minst - bruker du riktig html og smart CSS er det ingen grunn til å dytte inn ekstra mellomrom ved hjelp av grisete kode som gjør html-dokumentene tunge og vanskelige å finne frem i.

Hvordan skrive semantisk kode?

I stedet bør vi altså ta en nærmere titt på selve innholdet, kartlegge hvilke funksjoner de ulike elementene har - og ta i bruk de html-taggene som finnes for å markere dem riktig. Har du skrevet en overskrift bør du markere at det er en overskrift. Har du en liste med lenker (for eksempel i en meny) bør du kode det som en liste.

Her får du en oversikt over hvordan du bør markere de viktigste elementene på en side:

Overskrifter: <h1> til <h6>

Overskrifter markeres med <h>-taggene:

1. <h1>Dette er en overskrift</h1>

Tallene etter h’en angir hierarkisk nivå, eller overskriftens viktighetsgrad om du vil - de viktigste overskriftene markeres som <h1>, deretter <h2> og videre nedover til <h6>. På denne siden er “hebedesign.com/blogg” øverst på siden markert som <h1>, overskriften på innlegget er markert som <h2> og avsnittene i innlegget har <h3>-overskrifter.

Uten bruk av CSS vil nettleseren automatisk presentere <h1> i kjempestor skrift, og fra <h2> og nedover i fallende størrelse. Men med CSS kan du selv bestemme utseendet på overskriftene. En soleklar fordel ved denne metoden er at du kan angi utseendet for alle forekomstene av overskriften kun én gang, noe som gjør bruken av <b>- og <font>-tagger komplett unødvendig. Det vil også være betraktelig mye lettere å endre utseendet på samtlige overskrifter når de er kodet riktig og pyntet med CSS.

1. /* Pyntet overskrift */
2.  
3. h1 {font-size: 130%; font-weight: bold; color: red;}
4. h2 {font-size: 150%; font-weight: normal; border-bottom: 2px solid black;}

I eksemplet over ville h2-ene ha større bokstaver enn h1-overskriftene, selv om de har lavere hierarkisk rang (og dermed ville hatt mindre bokstaver enn h1 uten CSS). Hovedpoenget er at vi forteller nettleseren hva som er overskrifter og hvilke overskrifter som er “viktigst”, og så kan vi selv bestemme hvordan vi vil formidle det til leserne via CSS.

Ikke helt overbevist? Da skal jeg gi deg kronargumentet for å markere overskrifter med <h>-tagger. Nei, jeg skal ikke overtale deg ved å si at de gjør det lettere for blinde å navigere på sidene dine (selv om det er sant). Men du vil vel at siden din skal være synlig for søkemotorene? Når søkesidenes roboter snuser rundt på nettet bruker de <h>-taggene for å kartlegge hva sidene handler om. De driter i hva du har uthevet med <b>-tagger og <font>-forstørret skrift. Men gå for all del ikke igang med å markere alt innholdet med <h>-tagger i håp om å havne høyt oppe på Google, for da blir du raskt avfeid (og oversett) som en PR-kåt tosk. Bruk <h> fornuftig og skriv meningsbærende titler, så når du raskt toppen på Google-søkene.

Avsnitt: <p>-taggen

Hvordan lager du avsnitt i teksten? Med en rekke <br>’er? Også putter du inn en enkelt <p> der du vil ha et mellomrom som er litt høyere enn en vanlig <br>? Sorry - da bruker du ikke riktig kode. Plassér teksten i hvert avsnitt mellom <p> og </p>, så vil det automatisk komme avstand mellom paragrafene. Hvor stor denne avstanden skal være, kan du styre med CSS. La oss ta et eksempel:

1. <p>Dette er en paragraf. Her skriver jeg litt tekst, trallalaaa, og så vil jeg ha en ny paragraf: </p>
2. <p>Dette er neste paragraf. Merk forresten at du må avslutte paragrafen også </p>

Dette vil bli skrevet ut slik:

I eksemplet har jeg angitt (i CSS-filen) at paragrafene skal ha et mellomrom på ti piksler. Dette kan gjøres slik:

1. p {margin-bottom: 10px;}

Her setter jeg bare marg på bunnen, fordi jeg vil at den første paragrafen skal starte uten ekstra luft i toppen. Du kan selvfølgelig lage mellomrommet så stort eller så lite du vil, og det er betraktelig mye enklere å endre mellomrommet i etterkant enn det ville være å gå gjennom koden og fjerne eller legge til <br>’er!

Lister: <ol> eller <ul> og <li>

Lister er ikke bare handlelister, huskelister og Nick Hornby-type lister over de ti beste låtene å feire fotballseire med. En navigasjonsmeny er en liste med lenker. En oppskrift inneholder gjerne en liste med ingredienser - og en liste over trinnene i arbeidsprosessen. For å kode menyer, oppskrifter, huskelister eller lister over gode sanger for fotballgale bør du også markere dem som lister.

Vi har to alternative listetyper: Nummererte lister (<ol>) og unummererte lister (<ul>). <ol> / <ul> markerer starten på en liste, </ol> / </ul> markerer slutten på den - og hvert punkt på listen markeres med <li> og </li>. Merk deg at du må avslutte hvert listepunkt - det holder altså ikke med en <li> i starten.

La oss ta et eksempel:

1. <ol>
2. <li>Dette er første listepunkt</li>
3. <li>Dette er andre listepunkt</li>
4. <li>Dette er tredje listepunkt</li>
5. </ol>

Resultatet blir slik:

1. Dette er første listepunkt
2. Dette er andre listepunkt
3. Dette er tredje listepunkt

Altså fikk vi en liste der nummerne dukket opp automagisk foran hvert punkt. Hadde vi nummerert punktene manuelt ville vi fått en riktig morsom oppgave dersom vi ved sluttførelsen av en 75-punkts liste innså at vi hadde glemt punkt syv. I et slikt tilfelle hadde vi vært nødt til å nummerere 68 punkter på nytt. Med en <ol>-liste trenger vi bare å dytte inn nye punkter på rett sted, og vips er listen oppdatert.

Ved hjelp av CSS kan vi forresten bestemme hva slags nummerering vi vil bruke på listen. Små eller store romertall, alfabetisk eller vanlig nummerering - mulighetene er mange.

Slik blir den samme listen ved bruk av en unummerert liste:

1. <ul>
2. <li>Dette er første listepunkt</li>
3. <li>Dette er andre listepunkt</li>
4. <li>Dette er tredje listepunkt</li>
5. </ul>

Og resultatet blir slik:

• Dette er første listepunkt
• Dette er andre listepunkt
• Dette er tredje listepunkt

Også her kan vi påvirke merket foran hvert punkt med CSS. Vi kan bruke standard-definerte prikker (som over), firkanter eller sirkler, vi kan kutte dem ut eller vi kan erstatte dem med med vår egen grafikk.

Listene trenger ikke presenteres nedover heller - det går finfint å lage horisontale, grafisk lekre menyer ved hjelp av lister og CSS. Jeg satser på å komme tilbake med en artikkel om hvordan vi kan pynte opp lister senere.

Flere lister: Definisjonslister - <dl>

Vi har enda en type lister, nemlig definisjonslister. Dette er en praktisk metode for å lage en liste med underpunkter. Opprinnelig er de tiltenkt en bruk som dette:

Bil

Et motorisert fremkomstmiddel på fire hjul

Sykkel

Fremkomstmiddel på to hjul med pedaler

Apostlenes hester

Føttene

Refererer til apostlene som vandret rundt for å spre det glade budskap

Altså, som navnet forteller, en liste over definisjoner. Først angis ordet som skal defineres, og under kommer selve definisjonen.

En definisjonsliste startes med <dl> og avsluttes med </dl>. Hvert hovedpunkt (eller definisjonsord) skrives mellom <dt> og </dt> (for “definition term”). Deretter følger underpunktene (eller selve definisjonene) mellom <dd> og </dd> (for “definition description”). Man kan ha flere <dd>-er under hver <dt>, og man kan også ha en <dt> uten <dd>-er under (men har du bare slike, er det like greit å bruke en nummerert eller unummerert liste).

Listen ovenfor er kodet slik:

1. <dl>
2. <dt>Bil</dt>
3. <dd>Et motorisert fremkomstmiddel på fire hjul</dd>
4. <dt>Sykkel</dt>
5. <dd>Fremkomstmiddel på to hjul med pedaler</dd>
6. <dt>Apostlenes hester</dt>
7. <dd>Føttene</dd>
8. <dd>Refererer til apostlene som vandret rundt for å spre det glade budskap</dd>
9. </dl>

En definisjonsliste kan selvfølgelig brukes til mye annet enn å liste opp definisjoner. La oss si du skal legge ut en CV på nettet. Du skal liste opp skoler du har gått på eller jobber du har hatt, men du vil gjerne skrive en setning eller to om hvert punkt. Da er en definisjonsliste midt i blinken - du skriver navnet på skolen eller arbeidsplassen i en <dt>, og deretter utdypelsene i <dd>-er. Enten med en ny <dd> for hvert punkt under en <dt>, eller med paragrafer (<p>) inne i én <dd>.

Definisjonslister er en liten perle som har et langt større potensiale enn mange innser, spesielt ettersom man kan trylle frem lekre og praktiske presentasjoner ved hjelp av CSS.

Sitater:<blockquote> og <q>, cite og lang

Dette med sitater er ikke kjempeviktig. Med mindre du siterer mye, da. Jeg tar det med her fordi enkelte fortsatt misbruker <blockquote>-taggen for å lage innrykk i teksten. Men nå som du vet at du skal plassere tekstblokkene i paragrafer (<p>) - og at du kan style disse som du vil med CSS, skal det jo ikke lenger være nødvendig å bruke en sitatblokk for å oppnå ønsket presentasjonsform.

Så la meg derfor heller forklare hva <blockquote> er til for, nemlig å gjengi sitater som er lange, eller som av annen grunn bør skilles ut fra teksten. La oss ta et eksempel:

I’ll bet you’re the kind of guy that would fuck a person in the ass and not even have the goddam common courtesy to give him a reach-around!

Ah, endelig fikk jeg gjengitt et svært morsomt sitat fra en fantastisk film! Noen som vet hvilken? Uansett - her er koden jeg skrev for å presentere sitatet:

1. <blockquote cite=”http://imdb.com/title/tt0093058/quotes” lang=”en”><p>I’ll bet you’re the kind of guy that would fuck a person in the ass and not even have the goddam common courtesy to give him a reach-around!</p></blockquote>

I tillegg til <blockquote>-taggen som omslutter sitatet, bruker jeg også en <p>. Vi gjengir jo en paragraf, og blockquote forteller bare at det som kommer er et sitat. Dersom sitatet består av flere paragrafer, deler du det selvfølgelig opp med flere <p>-er.

Jeg har også angitt “cite” og “lang” for å vise hvor jeg har hentet sitatet fra (og dermed kan du raskt finne svaret på hvilken film jeg siterer) og hvilket språk det er gjengitt på (i dette tilfellet: engelsk). Det siste er blant annet for at opplesningsverktøy skal si det riktig - tenk deg Voulez vous coucher avec moi opplest på norsk..

Sitatblokkene kan selvfølgelig pyntes med CSS. Her har jeg bare angitt at sitatblokker skal skrives i kursiv, men du kan også styre innrykk, skrifttype og -størrelse, bakgrunnsfarger og -bilder osv.

Dersom du skal gjengi et kortere sitat som ikke trenger å skilles ut fra teksten rundt (altså et såkalt inline-element), kan du markere det ved å bruke <q>:

1. <p>Jeg ler så jeg griner når Hartman sier <q cite=”http://imdb.com/title/tt0093058/quotes” lang=”en”>You’re so ugly you could be a modern art masterpiece</q>!</p>

Også for disse sitatene angir jeg kilde (cite) og språk (lang). Jeg har satt opp i CSS-en at også q-sitater skal skrives i kursiv. Dersom du bruker Internet Explorer er dette det eneste som viser at det er et sitat. Er du derimot vettug nok til å bruke en annen nettleser, vil du se anførselstegn før og etter sitatet, da dette ligger innebygget i moderne nettlesere.

Men.. Det er et “men” her. <q> fungerer dessverre ikke optimalt i alle nettlesere og opplesningsverktøy. Derfor kan du trygt og med god samvittighet slå deg til ro med å sette egne anførselstegn rundt disse sitatene. Enn så lenge.

<strong> vs. <b> og <em> vs. <i>

Det er stor sannsynlighet for at du bruker <b>-taggen for å lage fet tekst og <i>-taggen for å skrive i kursiv. Og det er forsåvidt ingen stor krise. Men i de fleste tilfeller vil det være semantisk riktig å bruke <strong> og <em> - eller CSS. <b> og <i> forteller nemlig bare nettleseren hvordan den skal presentere teksten rent dekorativt, mens <strong> og <em> forteller at det skal legges trykk på ordet. Og dersom du slett ikke er ute etter å angi noe trykk, men bare vil pynte opp teksten med fet eller kursiv skrift, bør du gjøre dette med CSS.

Noen vil sikkert være uenige med meg her, men jeg syns ikke det er noen dødssynd å bruke <b> og <i>. Nå vet du i hvert fall at det finnes semantisk korrekte alternativer!

Semantikk, takk!

Det virker kanskje tullete å skulle fokusere på hva som er riktig måte å kode en side på, så lenge resultatet blir som man ønsker på skjermen. Jeg tenkte lenge slik selv, og syntes lenge det var vanskelig å huske hvilke tagger jeg skulle bruke til hva. Men jeg lover deg at dersom du begynner å skrive semantisk korrekt kode, sammen med kreativ CSS, så vil du snart merke at det er mye mer praktisk, ryddig og effektivt. Og i tillegg får du bonusen ved at innholdet ditt vil bli langt mer korrekt presentert på andre platformer (ikke bare nettlesere for blinde, men også på mobil, PSP og ikke minst: på duppeditter som måtte komme i fremtiden!). Så hva venter du på?

Publisert tirsdag 25. juli, 2006 kl. 1:37 i kategorien Lærerikt.