10 Tips til at forbedre din HTML mark-up

10 Tips til at forbedre din HTML mark-up

Godt formateret HTML er formodentlig et af de bedst understøttede digitale media i verden og den bedste måde at gøre indhold tilgængeligt for afvikling på så mange forskellige enheder som muligt. Men at formatere HTML med den rette mark-up er lidt af en kunst. Her er 10 tips til at forbedre tilgængelighed, SEO og præsentation af dit HTML-indhold.

1. Hierakisk struktur og rytme

   Skab din struktur udfra hvordan dit indhold er relateret. Når du laver en side bør indholdet gruperes efter et logisk mønster. Du må beslutte hvor meget "vægt" hvert enkelt element skal have. Hvis du f.eks har to eller flere seperate artikler som du vil vise på en side bør de gruperes under en fælles side-overskrift (typisk et h1 element). Spørg dig selv hvordan artiklerne er relateret. Svaret vil højest sansynligt udgøre en god overskrift. Måske har du valgt at grupere artiklerne fordi de er skrevet af samme forfatter. I så fald kunne en god overskrift være:

   <h1>Artikler af John Doe</h1>

   Du har nu skabt en logisk relation mellem indholdet men samtidig har du også skabt nogle restriktioner for din mark-up. Alle overskrifter i John Does artikler bør nu kun formateres i elementer med mindre vægt end <h1>. Dog kan du godt bruge h1 tags hvis de er indkapslet i et underordnet <section> element da et sådant element vil få samme semantiske vægt som et h2 tag (kun i HTML5).

2. Brug det oversete <main> element

   Main elementet er et blok element, ligesom divs og sections, men elementet er meget mere beskrivende. Typisk vil du have en header, en footer, en sidebar og måske et par reklamer på en side. Du ønsker naturligvis ikke at søgemaskiner skal tillægge alle disse elementer samme vægt som dit egentlige indhold. I eksemplet overfor ville det være en god ide at indlejre overskfiten og alle artiklerne i et main tag. På den måde har du markeret dette indhold som "main content area". Du skal dog være opmærksom på at main elementet ikke genkendes af Internet Explorer så vi må sikre os at elementet bliver vist som et blok element:

   /*CSS*/ main { display:block; }

3. Adskil UI elementer fra indholdet

   Du kan øge brugeroplevelsen af en side ved at tilføje ikoner til elementerne men disse bør ikke blandes sammen med indholdet. Måske vil du have en lille pil foran alle <h2> elementer. Følgende mark up vil hverken være semantisk eller effektiv:

   <h2><img src="arrow.png" alt="arrow" />Min overskrift</h2>

   For det første vil skærmlæsere og søgemaskiner behandle billedet som indhold og for det andet må du manuelt indsætte billedet i alle dine <h2> elementer. I stedet kan du lave en CSS regel for <h2> elementer hvor du flytter teksten lidt og bruger en background-image property til billedet:

   /*CSS*/ h2{ text-indent: 20px; background-image: url(arrow.png); background-repeat: no-repeat; background-position:left; }

   Alternativt kan du bruge :before og/eller :after CSS pseudo elementer.

   /*CSS*/ h2:before{ content:url(arrow.png); }

   Pseudo elementer tillader også at du kan bruge tekst eller tekst-symboler, adskildt fra HTML indholdet

   /*CSS*/ h2:before{ content=" → "; }

4. Forstå elementernes semantiske forskelle

   Inline elementer som <em> og <i> ser ens ud (de visses begge i kursiv) men elementerne har forskellig semantik. Indholdet i et <em> tag vil blive fortolket som fremhævet af browsere hvorimod indhold i et <i> tag kun vil vises som fremhævet. Det samme gælder <strong> og <b> elementerne: Indholdet i <strong> tags will tillægges mere vægt end resten af teksten men <b> tags vises bare med fed skrift. Generelt bør du aldrig bruge tags til design. hvis du vil have dine <h1> elementer mindre skal du endelig ikke udskifte dem med <h2> elementer. Lav i stedet font-størrelsen og linjehøjden midre med CSS.

5. Indtast ikke ord med store bogstaver

   Hvis du har HTML indhold som er indtastet med store bogstaver (upper-case) så vil skærmlæsere fortolke disse som forkortelser og udtale hvert enkelkt bogstav. "SVG" eller "HTML" bør derfor være med stort men almindelige ord som "rose" vil blive oplæst som "R.O.S.E." hvis de er indtastet med upper-case. Hvis du vil have ord vist med store bogstaver kan du bruge CSS.

   <!--HTML--> <span class="upper">Min tekst med stort</span> /*CSS*/ .upper{ text-transform: uppercase; }

6. Strukturer indholdet med microdata

   Du kan hjælpe søgemaskiner med at forstå hvilken type indhold du publicerer. Microdata er beskrivende inline meta data der kan indsættes som attributer i dine HTML tags. På http://schema.org/ kan du finde almindelige element-beskrivelser for produkter, publikationer, events, kontakt info og meget mere. Samme sted finder du også eksempler på hvordan du indsætter microdata attributerne i din mark-up.

7. Brug W3Cs validation service

   Det burde sige sig selv at du bør validere din mark-up, men overraskende mange internetsider er fulde af fejl. Nogle errors kan roligt ignoreres men andre kan have alvorlige konsekvenser for SEO eller layout og producere JavaScript fejl. Her er en række fejl som du aldrig bør ignorere:

   • Ingen doctype declaration:
     Du bør altid fortælle browsere hvordan dit indhold er encoded. Nogle browsere kan finde på at vise din side i quirks mode hvis en doctype ikke kan fastslås.
   • Uens doctype og mark-up:
     Hvis du har deklareret HTML5 som doctype bør du kun bruge HTML5 mark-up. Bland ikke HTML standarder.
   • Løse og ikke-lukkede tags:
     Dette er en af de hyppigste errors. Hvis du har løse eller ikke-lukkede tags tvinger du browseren til at gætte hvordan indholdet hænger sammen.
   • Blok-elementer indlejret i inline-elementer:
     Anbring ikke en <div> i et <b> element. Hvis du absolut skal have en blok i et inline-element så brug et <span> tag og sæt dets display property til "block" med CSS. I HTML5 er det som undtagelse dog tilladt at have blok-elementer i <a> tags
   • Duplicate IDs:
     Elementer med samme ID er ikke tilladt og kan skabe store problemer.

8. Brug ikke JavaScript til at generere vigtigt indhold

   Du kan ikke forvente at søgemaskiner vil eksekvere JavaScript på dine sider og selv hvis de gør vil de ofte have svært ved at indexere det. Hvis du bruger AJAX til at loade indhold bør du altid sikre at der er et fall-back link med en almindelig http anmodning for søgemaskiner og brugere med JavaScript slået fra.

9. Brug meta tags, men med omtanke

   Meta tags i dine dockumenters head section kan hjælpe søgemaskiner, browsere og skærmlæsere. Du bør altid angive et meta tag for character encoding og som regel er et description tag også en god ide.

   <head> <meta charset="UTF-8"> <meta name="description" content="En samling artikler, om husdyr, skrevet af John Doe"> <title>Mine Artikler</title> </head>

   Du kan desuden tilføje meta tags for f.eks. author og angive en liste beskrivende ord i et keywords meta tag men vær forsigtig med at angive for mange keywords og sørg for at alle keywords er dækket i selve sidens indhold. Søgemaskiner vil betragte for mange keywords som spamdexing. Og mange søgemaskiner ignorerer keywords helt.

10. Gør din formatering konsekvent

    Internet-brugere er utålmodige. Når de lander på en af dine sider er de nødt til at bruge tid på at forstå din formatering. Ubevidst vil de lede efter design-mønstre for at skelne UI-elementer fra indhold og for at forstå hvilke "design konventioner" du har implementeret for links, drop-down elementer, forms osv. Når først brugerne er fortrolige med design-mønsteret på én side vil de forvente at dine andre sider fungerer, og er formateret, på samme måde.