Gode grensesnitt: (X)HTML
Del 1 i mitt forsøk på å samle sammen en liste over suksessfaktorer for gode grensesnitt/nettsteder tar for seg (X)HML. Hva er de viktigste aspektene ved (X)HTML, og hvordan bør denne implementeres?
Hva er dette?
Jeg skribler for tiden på det som skal bli en sjekkliste å kontrollere gode grensesnitt mot. For en grundigere introduksjon, samt flere innlegg og oppsummering, se sjekkliste for grensesnittsutvikling.
Webstandarder
Webstandarder er det viktigste verktøyet vi har for å sikre interoptibilitet på nettet. W3C er den internasjonale organisasjonen som nedsetter mange av standardene vi forholder oss til. I dagens innlegg ser jeg på hvilke retningslinjer vi bør ha for (X)HTML.
(X)HTML
Validering
All (X)HTML skal validere mot W3C's standarder for disse. Hvorvidt det benyttes HTML eller XHTML er langt mindre viktig enn at det brukes en strict DOCTYPE fremfor en transitional en. Enda viktigere er det derimot å benytte en DOCTYPE som passer innholdet. Dersom det benyttes en publiseringsløsning eller lignende der det ikke er mulig å tilfredsstille kravene i en strict DOCTYPE eller ikke mulig å generere XHTML er det bedre å benytte transitional DOCTYPE og HTML respektivt.
For å si det igjen, litt kortere: fremfor å bruke den "fineste" DOCTYPEn "bare for å gjøre det", bruk den som passer best, og strev etter å produsere (X)HTML som kan pryde seg med en strict DOCTYPE.
Hvorfor?
- HTML som validerer er det beste utgangspunktet for å støtte så mange nettlesere som mulig
- HTML som validerer er lettere å debugge enn "tagsoup" - dette gjelder feil i både HTML, CSS og JavaScript
- HTML som validerer er potensielt lettere for maskiner å forstå
- Strict doctype inneholder ingen elementer hvis funksjon kun er formattering
- En artikkel om verdien av validering
Hvordan?
- W3Cs online validator
- Web developer for Firefox - med tastatursnarveier for å validere mm
- Firebug - verktøy for blant annet å undersøke HTML-en
- HTML Validator - enda et tillegg til Firefox som viser hvorvidt HTML-en validerer
Semantisk HTML
Viktigere enn validering er bruken av semantisk HTML . Semantisk HTML handler om å bruke HTML-taggene for den meningen, eller den semantikken, de gir innholdet, ikke for den standardvisningen nettelserene har av dem.
Hvorfor?
- TIlgjengelighet - rik struktur gir mulighet til å formidle samme vekting mellom elementer som man lager visuellt
- Digital synlighet - semantisk korrekt HTML har større sjans for å score godt i søkemotorene
- Enklere JavaScript og CSS - med rik struktur trenger du færre klasser og ID-er for å lage god CSS og JavaScript. Dette trimmer også av en byte eller to på HTML-en.
- Fordi semantisk HTML som nevnt er "å bruke HTML slik HTML er ment å brukes" - jobb med teknologien, ikke mot den
Hvordan?
Å bruke HTML på semantisk korrekt måte er intet lite tema, og selvom en introduksjon gis i det nevnte innlegget er den beste informasjonen tilgjengelig i form av W3Cs HTML 4.01-spesifikasjon (som innholdsmessig er lik for XHTML 1.0).
Noen viktige punktene å merke seg er:
- La headinger være headinger: bruk <h1>-<h6> på riktig måte
- Bruk alt- og title-attributter til å gi tilleggsinformasjon til bilder og andre objekter
- Bruk
for-attributtet pålabel-elementer - Ikke bruk tabeller til layout
- La lister være lister, bruk <ul>, <ol>, <li>, <dl>, <dt> og <dd>
- Ikke bruk elementer som kun er til for formattering; eksempler er <font>, <center>, <b>
- Semantic extractor kan benyttes til å trekke ut et sammendrag av siden din. Basert på god semantisk HTML bør denne gi en god oversikt over siden den tolker
Kommentarer
Marius Vikene
29. mai, 10:16
Jeg er ikke helt sikker på om det hører til under del-temaet (x)html, men en klassisk forglemmelse er å ikke ha noe bevisst forholdt til tegnsett. Få ting trekker mer ned enn masse spørsmålstegn eller merkelige tegn som erstatning for spesialtegn.
Både for nye nettsteder, og særlig for nettsteder som skal migreres så må man ha en klar tanke rundt tegnsett.
Christian
29. mai, 12:45