Førstehjælp til at rette fejl i din HTML-kode

Uanset om du er begynder eller hærdet programmør, så kan der let snige sig fejl ind i den kode, du skriver. Præcis som når du skriver alt muligt andet. Heldigvis er det let, hurtigt og gratis at få tjekket sin HTML-kode for fejl og mangler.

Det er irriterende at finde en trykfejl i avisen eller i en bog. Det ser sjusket ud. Men der sker ikke så meget ved det. For som regel kan vi stadig læse avisen eller bogen og forstå indholdet af det, der står skrevet. Fejl kan straks få alvorligere konsekvenser, når det gælder vores HTML-kode.

 

Browsere kan godt acceptere småfejl

HTML-koden bliver læst af browsere, for eksempel Internet Explorer, Firefox og Crome. Browserne ”oversætter” HTML-koden til pæne hjemmesider – altså de hjemmesider, som du ser, når du surfer rundt på internettet.

Når vi skriver vores HTML-kode er det næsten umuligt at undgå fejl. Vi kender det fra, når vi skriver mails, sms’er og alt muligt andet: Vi rammer det forkerte bogstav på tasterne eller glemmer et ord eller tegnsætning her og der.

Browserne er heldigvis så rutinerede i at oversætte HTML-kode, at de ikke lader sig forstyrre af småfejl. Hvis man for eksempel har glemt at sætte et end-tag (</h1) på en overskrift, vil browserne altså som regel læse koden som en h1-overskrift.

… Men ikke altid!

Men der er ikke 100 % sikkerhed for, at alle browsere kan læse din kode ordentligt, hvis der er fejl i den. Og jo større fejl, der er, desto større er risikoen for, at browserne oversætter din kode forkert eller simpelthen kommer med en fejlmeddelelse om, at siden ikke kan læses.

Det vil vi gerne undgå. Og det er heldigvis både meget let og helt gratis at få tjekket sin HTML-kode for fejl og mangler:

Validator-service

W3C (Det er dem, der står for at sætte standarderne for HTML) har lavet en service, der hedder ”The Markup Validation Service”.

Det er en hjemmeside, hvor du kan sætte din kode ind i et tekstfelt og få den tjekket for, om den overholder standarderne for HTML (og om den indeholder fejl i forhold til de standarder).

At validere betyder på dansk at kontrollere, om noget overholder nogle givne regler. Og det er altså dét, som W3C’s validator-service kan.

Sådan virker validatoren

Gå ind på W3C’s The Markup Validation Service her.

Her er der mulighed for at få tjekket sin kode på tre forskellige måder:

1) Du kan sætte adressen på din hjemmeside ind (URL’en), hvis du har sådan én. Det kan for eksempel være http://kodekuren.dk/.

2) Du kan også vælge at udloade en fil med din HTML-kode. Den HTML-fil har du sandsynligvis skrevet i din notesblok/notepad. (Jeg plejer selv at bruge Notepad++)

3) Og du kan også sætte din kode direkte ind i et tekstfelt og få den tjekket. Det er især en god idé, hvis det bare er et lille stykke kode.

Lad os prøve det!

Jeg har det her lille kodestykke i min notepad.

Det sætter jeg direkte ind i validatoren, og så trykker jeg på ”Check”:

Så kommer der en besked frem om, at der ikke er fundet fejl i min HTML-kode.

Fejlmelding

Lad os lige prøve igen. Denne gang retter jeg lidt i HTML-koden, så jeg er sikker på, at der kommer nogle fejlmeldinger:

Ja, her kommer der så to fejlmeldinger. Blandt andet fortæller den mig, at der er en fejl i linje 5, fordi jeg har fjernet mit end-tag på titlen: </title>.

Her kan du se en beskrivelse af fejlmeddelelser i validatoren, så du hurtigt kan få dine fejl rettet.

Så let er det altså at få hjælp til at rette fejl i sin HTML-kode, så man kan være sikker på at have en stabil og funktionel hjemmeside.

Du kan også tjekke din CSS-kode, så  du  er sikker  på, at  hele hjemmesiden spiller. Det kan du gøre her.

Hvordan kan W3C validere din HTML-kode?

Som jeg tidligere har skrevet om her på bloggen, så blev W3C dannet tilbage i 1994 for at sikre den tekniske kvalitet af hjemmesider, og at udviklingen af kode-sprogene ikke løb løbsk i alle mulige forskellige retninger. Med andre ord blev W3C dannet for at sætte standarder.

De standarder skal selvfølgelig følge med tiden – med udviklingen af browsere, programmørernes og internetbrugernes krav og forventninger og så videre. Derfor lancerer W3C løbende nye standarder. For eksempel har der igennem tiden været flere forskellige standarder for HTML, og den nuværende hedder HTML 5.2.

Når du sætter din HTML-kode ind i W3C’s validator, så tjekker den, om din HTML-kode lever op til kravene for den standard, som den er programmeret efter. Hvis den er programmeret i HTML4, så skal den altså leve op til nogle andre krav, end hvis den var programmeret i HTML5.

Ikon, der viser at din hjemmeside er valideret

Hvis der ikke er nogen fejlmeldinger på din hjemmeside, så giver W3C dig mulighed for at sætte et ikon på din hjemmeside, der viser, at den er ”W3C valid”. Det vil sige, at den teknisk lever op til W3C’s standardkrav, og det er helt bestemt et kvalitetsmærke. Du kan finde koden til ikonet på W3C’s hjemmeside, og det vil vise tilbage til validatoren, så besøgende på din hjemmeside  altid kan tjekke op på, om den fortsat opfylder standardkravene.

Kort historisk tilbageblik: Fra første validator til nu

Den første version af W3C’s validator hed ”The Kinder, Gentler HTML Validator” og blev udviklet af programmøren Gerald Oskoboiny i 1997. Hans første version var inspireret af verdens første HTML-validator, der blev lanceret helt tilbage i 1994.

Der har altså næsten fra world wide webs begyndelse i 1991 været opmærksomhed på at sikre den tekniske kvalitet af hjemmesider ved at give programmører mulighed for at få tjekket deres HTML-kode.

W3C’s validator er blevet udviklet igennem tiden, og nu kan man ikke bare få tjekket sin HTML-kode på siden men også CSS, XML og MathML.

 

INSPIRATION
Programmet HTML Tidy kan automatisk rette alle dine småfejl i din HTML-kode, uden at du behøver at gøre noget selv. HTML Tidy er opdateret frem til HTML 5. Find HTML Tidy her

Hvis du vil prøve en anden validator end den, som W3C har lavet, så kan du for eksempel kigge på WDG HTML validator eller CSE HTML Validator. Det er en offline validator, der også kan hjælpe med SEO.

Andre fine værktøjer til at validere koden på dit website kan du finde her

 

Photo by bruce mars from Pexels