Som webbutvecklare vill du se till att din kod är ren, giltig och tillgänglig. Detta kan också hjälpa dig att öka din Sökmotoroptimering (SEO). Lyckligtvis kan du använda W3C validator för att se till att ditt arbete håller standarden.
I det här inlägget ska vi titta närmare på W3C och dess olika validatorer. Vi visar dig sedan hur du validerar kod med dessa verktyg och tolkar resultaten. Slutligen ska vi titta på några vanliga W3C-valideringsfel och hur man åtgärdar dem. Låt oss börja!
Vad är W3C-validering?
W3C står för World Wide Web Consortium, och det är en internationell organisation som övervakar kodningsstandarder på webben. Den erbjuder valideringstjänster som hjälper dig att verifiera att din HTML- och CSS-kod är giltig och felfri.
CSS-valideraren anropas Kontur såg och det kontrollerar ditt innehåll mot W3C webbstandarder.
HTML-validatorn fungerar på ett väldigt liknande sätt. Det verifierar uppmärkningens giltighet för webbdokument i HTML, XHTML, SMIL, MathML, etc.
Genom att följa dessa webbstandarder kan du säkerställa att ditt innehåll är användarvänligt och tillgängligt. Dessa verktyg hjälper dig också att verifiera plattformsoberoende kompatibilitet för ditt arbete, vilket skapar en bättre Användarupplevelse (UX). Detta kan i sin tur förbättra din Grundläggande webbviktigheter poäng och öka din SEO.
Hur man validerar kod med W3C
Som nämnts tidigare skannar W3C-validerarna din HTML- och CSS-kod för att säkerställa att de uppfyller de webbstandarder som organisationen ställer upp. Denna handledning visar dig hur du använder dessa verktyg för att kontrollera ditt arbete.
Validera HTML-kod
Låt oss börja med HTML-valideraren. Du kan ange URI av dokumentet du vill kontrollera, ladda upp filen som innehåller din kod, eller skriv in markeringen du vill validera i det angivna fältet:
När du har skickat in din sida eller ditt dokument för kontroll genererar valideraren en lista över alla fel och varningar som är kopplade till HTML-koden:
Helst vill du ha noll fel och varningar. Detta är dock inte alltid möjligt eftersom valideraren inte tar hänsyn till allt som användaren kan se.
Om du till exempel har en bild med en gradient kommer valideringsverktyget att visa ett felmeddelande som säger att kontrasten mellan bild och bakgrund är otydlig. Du kan dock tydligt urskilja det med en mänsklig kontroll.
Observera att om din sida innehåller JavaScript eller CSS kommer HTML-valideraren inte att kontrollera det. För detta skulle du behöva använda W3C Jigsaw-verktyget för CSS (som vi kommer att täcka om ett ögonblick) eller JSHINT för Javascript.
Validera CSS
CSS-valideraren fungerar på samma sätt. När du har skickat in din URI, ditt dokument eller din markering för validering får du en sida med fel och varningar:
Som du kan se är resultaten för både CSS och HTML ganska detaljerade. Låt oss undersöka hur man tolkar dem.
Hur man tolkar valideringsresultaten
Som vi har sett genererar validatorerna två olika utdata: fel och varningar. Du kan ofta ignorera varningar eftersom de inte lyfter fram några allvarliga problem. Det är dock god praxis att publicera felfritt innehåll.
Både fel och varningar visar radnumret med ditt problem. De ger också förslag på hur du kan lösa problemet:
Om du klickar på länken som tillhandahålls med felet eller varningen (t.ex. Från rad 1, kolumn 16; till rad 2, kolumn 16), kommer valideraren att markera motsvarande rad i koden:
Observera att fel som upptäcks av HTML-valideraren kommer att påverka användare som förlitar sig på handikapphjälpmedel (som skärmläsare) för att komma åt onlineinnehåll. Det kan vara lätt att förbise dessa tillgänglighetsproblem som kodare. Ändå kan de ha negativa effekter på din publik. Vi kommer att titta närmare på dessa vanliga fel i nästa avsnitt.
Vanliga W3C-valideringsfel
Både CSS- och HTML-validerarna kommer att markera eventuella fel i din kod. Några av de vanligaste problemen inkluderar:
- Ostängt element. Att lägga till ett nytt element på en sida kräver en öppen och en stäng-tagg. När du får det här felet har du inte inkluderat stängningstaggen. Detta är ett ganska vanligt problem när man arbetar med rutnät.
- Saknas alt tag. Varje bild kräver en alt-tagg som visas om grafiken inte kan laddas. Den beskriver bilden och en skärmläsare läser upp den. Att lägga till alt-taggar är ett viktigt tillgänglighetskrav.
- Felaktig användning av rubriktaggar. Detta CSS-problem uppstår när en utvecklare använder taggar som teckensnittsstil för specifika underrubriker. Taggarna är designade för navigering snarare än stilistiska syften, så underrubriker som inte är navigerande bör dimensioneras med hjälp av font:size=# attribut.
Du kanske också märker några tolka fel. Dessa indikerar fel i koden, men valideraren visar dig inte alltid var problemen finns. Du måste gå igenom ditt arbete för att lokalisera problemet.
Här är ett exempel på ett analysfel:
Det här felet uppstår när CSS-formatmallen innehåller HTML-element. Även om CSS-valideraren inte ger ett radnummer för felet, kan du helt enkelt kopiera det medföljande kodblocket och söka i ditt kodredigerare eller IDE.
Hur man åtgärdar vanliga fel
Lyckligtvis talar W3C-valideraren om var du kan hitta fel och hur du åtgärdar dem. Om du till exempel har en saknad alt-tagg kommer validatorn att tala om för dig var du behöver inkludera den.
Om du har en öppen tagg berättar validatorn dig inte var den avslutande taggen är. Det kommer dock att ge dig platsen för den öppna taggen, så du kan helt enkelt navigera till det kodblocket och lägga till den saknade taggen.
Dessutom, om du använder alternativet för direktinmatning i valideraren, kommer hela koden att visas med felen markerade. Därför kan du jämföra den med originalkoden i din IDE för att hitta och åtgärda misstag snabbare.
Slutsats
Använda W3C validator kan förbättra din webbplats övergripande prestanda. Det låter dig undvika koduppsvällning, lösa tillgänglighetsproblem och åtgärda vanliga fel. Alla dessa element kan leda till snabbare laddningstider och en bättre UX, vilket i sin tur kan öka din webbplats SEO.
Som vi har sett kan du använda W3C för att validera din HTML- och CSS-kod. Verktyget genererar en lista med varningar och fel, med förslag på hur du åtgärdar dem. Vanliga problem inkluderar ostängda element, saknade alt-taggar och analysfel.
Utvald bild via Chaosamran_Studio / shutterstock.com