Strukturbasert XHTML

27. januar 2007

Ein av fordelane med XHTML, er at det er eit strukturbasert språk. Dette muliggjer presentasjon av innhaldet på fleire måtar, på vanlige nettlesarar, men òg på avanserte mobiltelefonar og programvare basert på talesyntese. Denne artikkelen gjev ei kort innføring i skiljet mellom struktur/semantikk og presentasjon i denne samanhegen, og avsluttar med eit detaljert eksempel.

Artikkelen baserar seg på XHTML 1.0, som er HTML 4.01 reformulert som XML. Du treng ikkje forstå dette, men enkelt sagt er XHTML det same som HTML, berre «strengare», og vil derfor (blant anna) fungera betre i ulike nettlesarar. Men prinsippa nemnt her vil òg gjelda for vanlig HTML og for andre merkespråk.

Eit strukturbasert språk

XHTML er eit språk me brukar til å beskriva strukturen til eit dokument. Me kan so eventuelt bruka stilsett til å formatera dokumentet. Dette skiljet mellom innhald/struktur og presentasjon er – etter mi meining – noko som gjer XHTML til eit ganske fantastisk språk. Eg vil her prøva å forklare nokre av fordelane.

Eit skilje mellom innhald og presentasjon fører til at informasjonen kan bli gjenbrukt. Teksten kan bli presentert på ulike måtar, alt etter kva medium han er i. Eit lite eksempel er klargjerande:

Ein sers viktig setning …

Me har følgjande setning i eit dokument: «Dette er ein viktig setning.» Me vil so legga vekt på at det er ein spesielt viktig setning. I tradisjonelle tekstbehandlingsprogram vil me gjerne bruka kursivering til dette. Slik er det ikkje med XHTML; XHTML brukar me til å beskriva kva noko er (semantikk) og kva plass det har i dokumentet (struktur), ikkje korleis det ser ut (presentasjon).

Eksemplet over vert slik:

<p>Dette er ein <em>viktig</em> setning.</p>


Me brukar em-elementet (av engelsk «emphasis») for å forsterka eller legga trykk på noko.

Om me berre hadde brukt eit presentasjonselement her, for eksempel for kursivering, hadde me ikkje sagt noko om korfor teksten var i kursiv. Grunnen til kursiveringa kunne vera at me ville legga ekstra vekt på det ordet, men kunne òg vera at ordet var tittelen på ei bok, eller at me berre ville bruka kursiv til pynt. Meininga må ein gjetta seg til. Med elementet em seier me derimot kva elementet er direkte (nemlig utheva eller forsterka).

Nytteverdi

Greit nok, men kva nytteverdi har dette? Kort sagt, gjenbruk. Strukturmarkert informasjon kan bli gjenbrukt på mange måtar. I ein talenettlesar vert ordet «viktig» lagt ekstra trykk på, slik som i vanlig tale. På ein grafisk nettlesar vil ordet oftast (men merk: ikkje alltid) bli vist i kursiv. På ein nettlesar som ikkje støttar kursiv, vil det kanskje bli vist som *viktig*, eller med raud tekstfarge. Alt dette er ulike måtar å presentera same ting.

La oss ta eit meir detaljert eksempel. XHTML inneheld mange element for å markera struktur. Nokon av dei me brukar oftast er dei seks overskriftselementa h1 til  h6.

Overskriftselement

For å visa at noko er ei overskrift, er det vanlig å bruka større, eventuelt halvfeit, skrift. I XHTML kan me bruka <font size="+1"> for å få større skrift, men kva seier dette? Ingenting! Menneske kan nok tolka større skrift som ei overskrift, men maskiner er ikkje like smarte (stor skrift kan vera uttrykk for andre ting enn overskrifter), og i XHTML definerar me strukturen eksplisitt.

Det finst som sagt seks forskjellige overskriftselement i XHTML, h1 til h6. Ei fagbok kan for eksempel vera delt inn kapittel, underkapittel og so vidare. Me brukar h1 til tittelen. So kjem h2 for kapitteloverskrifter og h3 for underkapittel (eventuelt h4 og oppover for avsnittsoverskrifter og liknande). Sidan me definerer tydinga, kva noko er, kan dette nyttiggjerast og presenterast på fleire måtar:

Talenettlesar

Ein talenettlesar har mange ulike måtar å ta i bruk informasjonen på. Ein kan for eksempel raskt bla gjennom kapittela (eller delar av ei nettside). Sjølve overskriftene kan lesast med ein annan stemme, med ein liten pause før eller etter, med ordet «overskrift» før, med ein lyd før eller kanskje med ein spesiell bakgrunnsmusikk. Muligheitane er mange. Det viktigaste er at informasjon om kva teksten er (ei overskrift) blir overført.

Grafiske nettlesarar

Dette er «vanlige» nettlesarar, som for eksempel Firefox. Her vert overskriftene vist med større skrift (der h1 er størst, h2 er mindre, og so vidare). I tillegg kan me gjennom stilsett få andre, avanserte effektar, som for eksempel skyggelegging.

Nettlesarar med avgrensa skjermplass

Dette er nettlesarar, for eksempel mobiltelefonar, som ofte brukar ei skrift i éin spesiell storleik (som i eit terminalvindauge). Her kan overskriftene visast i ein annan farge, eller med innrykk.

Dokumentkart

Nokre nettlesarar, for eksempel Amaya, kan automatisk laga eit dokumenkart (ei innhaldsliste) over innhaldet på ei nettside, basert på overskriftselement. Slik kan ein enkelt navigera i dokumentet.

Skriptbaserte innhaldslister

Ved hjelp av eit skriptspråk, som ECMAScript, og DOM kan ein automatisk laga ei innhaldsliste i eit dokument, igjen basert på overskriftselementa.

Navigering

I nettlesaren Opera kan ein hoppa mellom overskrifter ved å trykka på w- og s-tastane. Dette muliggjer enkel og rask navigering på nettsider som har brukt ekte overskrifter (altså hx- og ikkje font-element).

Forfattarstilsett

Ved hjelp av stilsett kan me bestemma at alle h2-overskrifter skal ha ein spesiell farge, skriftstorleik, plassering, bakgrunn, ramme eller til og med stemme (i talenettlesarar). Fleire dokument kan dela eit stilsett, og ved å forandra eitt ord i éi fil, kan plutselig alle overskriftene i alle (kanskje hundrevis) nettsidene forandra farge (eller skrift, eller noko heilt anna).

Brukarstilsett

Ved å definera eit brukarstilsett kan me for eksempel seia at alle hovudoverskrifter på alle nettsider me besøker skal vera i dobbel skriftstorleik (i forhold til brødteksten), med blå skrift på kvit bakgrunn. Me kan enten berre ha dette om forfattaren ikkje har definert nokon presentasjon for overskrifter, eller overstyra sideforfattarens ønskje. Om me har dårlig syn, vil me for eksempel kanskje ha ekstra store overskrifter (og større vanlig tekst òg, for den saks skyld).

Søkemotorar

Nokre søkemotorar legg meir vekt på nøkkelord som er i overskriftselement. Riktig bruk av overskriftselement kan då faktisk vera med på å få fleire folk til sidene dine!

Her ser du alle dei fordelane du vil få ved noko so enkelt som eksplisitt definerte overskrifter. Det er enkelt å skriva (<h2>Overskrift</h2> – lettare enn å bruka font-elementet), og det har kjempemange fordelar. Dette gjeld sjølvsagt ikkje berre overskrifter, men all struktur- og semantikkinformasjon. Det er nettopp derfor XHTML er so fantastisk. XHTML muliggjer allsidig bruk og presentasjon av informasjon.