Semantikk og XHTML

Som nevnt i vår artikkel om stilark er overgangen fra HTML-presentasjon til CSS-presenasjon på mange måter et paradigmeskifte innen webutvikling. Dette innebærer at om man vil inn i den "nye skolen" er det en del ting som må avlæres. Avlæring er vanskeligere enn vanlig læring fordi man først må bli kvitt den tilegnede kunnskapen (som ikke lenger er valid), og så lære den nye måten å gjøre tingene på.

Vi har allerede gitt gode argumenter for hvorfor man bør lage CSS-baserte nettsteder. I denne artikkelen vi vi si litt om hvordan, både på det tekniske og det kognitive planet.

Først innhold, deretter presentasjon

Du skal ikke tenke presentasjon før du er ferdig med å produsere innholdet, og når innholdet er ferdig produsert og når du jobber med presentasjonen skal du ikke røre innholdet.

Unntak: Du kan legge til class- og id-attributter til HTML-elementene der det er nødvendig.

HTML er struktur

Tenk deg at du skriver en artikkel og skal legge inn overskrifter. I den nye skolen skal du ikke tenke på hvordan dette skal se ut før artikkelen er ferdig. Du skal tenke på at artikkelen skal ha semantisk korrekt HTML-kode. Dette betyr at hovedoverskriften skal ha en H1-tagg, underoverskrifter skal ha en H2-tagg, og avsnitt skal ha en P-tagg. BR-tagger skal i utgangspunktet aldri brukes. Uthevede elementer skal ha en EM-tagg, og sterkt uthevede elementer skal ha en STRONG-tagg. Større sitater skal ha en BLOCKQUOTE-tagg. Og så videre (Forkortelser skal ha en ABBR-tagg, akronymer skal ha en ACRONYM-tagg, definisjoner skal ha en DFN-tagg, programkode skal ha en CODE-tagg, CENTER, BOLD, ITALICS og UNDERLINE skal ikke brukes.)

XHTML er enkelt

Mange webutviklere som kommer fra den gamle skolen er vant med å bruke editorer som FrontPage for å lage websider. Hvis de vil begynne i den nye skolen bør de slutte med dèt, og sette seg inn i det svært enkle språket XHTML. Å lære tilstrekkelig antall elementer til å kunne lage en hvilken som helst XHTML-webside kan gjøres på noen få dager, og mange vil kjenne til elementene fra før.

De som ikke kjenner til XHTML tror gjerne at dette er et vanskelig språk å lære. Dette er altså ikke riktig.

XHTML har veldig få grammatiske regler. Hovedreglene er som følger:

• Alle elementer skal ha små bokstaver (<p>Et avsnitt</p>)
• Alle attributter skal ha gåseøyne (<p class="ingress">Et avsnitt</p>)
• Alle elementer skal avsluttes (<li>Et listepunkt er ugyldig)

Litt forenklet kan man si at dersom man følger disse reglene er HTML-koden blitt XHTML. XHTML er altså en form for HTML der man følger disse enkle reglene. En webside skal være semantisk korrekt, dette betyr at den bruker de rette HTML-elementene i rett sammenheng.

Unngå presentasjonselementer i HTML-attributter

I følgende id-attributt er det lagt inn informasjon om presentasjon i HTML-attributtet:

Her har man tenkt presentasjon i HTML-koden, og det skal man ikke gjøre. Hva om man bestemmer seg for at menyen skal ligge til høyre og ikke til venstre? Da skal man ikke være nødt til å gjøre enringer i HTML-koden. Korrekt bruk av en attributtveri her vil være for eksempel: