Validera enligt HTML

För att kontrollera att det verkligen är korrekt HTML-kod som webbläsaren får så kör vi koden genom verktyget W3C’s Markup Validation Service.

Välj fliken “Validate by direct input” och kopiera in koden för din webbsida.

Du kan kopiera din kod från din texteditor eller från webbläsaren via högerklicka och “View Page Source”.

Image description — Bild: Kopiera in källkoden för webbsidan för att validera den.

Klicka på knappen för att validera webbsidan.

Aj då, i mitt fall fick jag ett felmeddelande i valideringen och det vill jag inte ha.

Error: The element header must not appear as a descendant of the header element.

Då får vi anta att standarden säger att man inte skall ha en header innanför en header. Då väljer jag att byta den till en div istället. Att använda div blir mer neutralt och gör ingen större skillnad i detta fallet.

Min uppdaterade kod ser nu ut så här.

<header class="siteheader">
    <div>
        <a href="me.html">
        <img src="img/leaf.png" alt="Logotyp">
        <span>Kursen webtec</span>
        </a>
    </div>

    <!-- HTML code for the navbar -->

</header>

Ibland kan en sådan här ändring även innebära att man behöver justera stylesheeten. I mitt fall behövde jag dock inte ändra något.

När jag nu gör om valideringen genom att ladda om sidan och kopiera källkoden så passerar den och visar grönt och berättar att inga fel finns.

Så här ska det se ut när du validerar, grönt är bra och säger att webbsidan klarar valideringen och därmed uppfyller kraven på strukturen för HTML elementen.

Valideringsverktyg är viktiga för den som utvecklar webbplatser. Din webbsida behöver följa de standarder som finns, annars kan webbsidan visas upp på ett felaktigt sätt i webbläsaren.

Lägg till en länk till validatorn i din footer så att du har den lätt tillgänglig när du vill validera.