Läsvärt

Att förstå HTML: webbens grundstomme

Html är språket som används för att skapa strukturen och innehållet på internet. Allt du ser på webbsidor är resultatet av html. Språket har ofta missförståtts och underskattats. Det är dags att gå in närmare på varför det är avgörande att använda det korrekt.

En skärmdump av kod som består av drygt tio nästlade div-element.

Vad är html?

Html är ett kodspråk som utgör själva stommen eller skelettet i alla webbplatser. Det uppfanns tidigt 90-tal av Tim Berners-Lee (grundaren av W3C). HT ”hyper text” representerar text som man kan klicka på och komma till en annan plats. ML ”markup language” är en generell term som kan översättas till ”märkspråk”, av vilka det finns flera till exempel xml, Markdown och yaml.

Html har särskilda element för olika ändamål, som listor, rubriker, länkar, formulär och mycket annat. 

Ett exempel på korrekt html med en rubrik och en länk:

<h2>Hello</h2>
<a href="sida.html">World</a>

Webbläsarna är för snälla

Originalspecifikationen för html innehöll inga regler för hur ogiltig html skulle hanteras. Därför gjorde webbläsarna ett medvetet val att försöka tolka koden, trots att den innehöll fel. Det var ett marknadsföringsval: om tillverkarna hade slagit på regler för ”strict parsing” skulle de flesta webbplatser helt enkelt sluta att fungera. Vem skulle välja att använda en webbläsare där många sidor inte visas ut alls? En sådan produkt skulle snabbt dö ut.

Andra kodspråk fungerar inte så. Där kan det komma långa listor med alla kompileringsfel och koden ”bygger inte”, som det heter, och felen måste åtgärdas innan de kan skickas till webbläsaren.

Allt detta, i kombination med att ingångströskeln är låg (det är gratis, inga särskilda program eller licenser behövs), har misstolkats till att betyda att html är mycket enkelt. Det finns videos och artiklar som menar att html går att lära sig på fem minuter! Det är naturligtvis inte sant. Den som spelat Othello minns kanske sloganen ”a minute to learn, a lifetime to master”. Ungefär så är det.

Här är samma kod igen, fast nu med ogiltig html. 

<h2>Hello
<a href="sida.html"><button>World</button></a>

Html kan vara ogiltigt på olika sätt:

  • Otillåtna attribut
  • Attribut som saknas
  • Ej unika ID:n
  • Ogiltiga värden till attributen
  • Ej stängda taggar (som i exemplet ovan)
  • Ej tillåtna element inuti element (som i exemplet ovan)

Men vad får det för konsekvenser?

  • Det kan bli layoutproblem och att delar ser trasiga ut.
  • Funktioner beter sig inte som förväntat.
  • Indexering i sökmotorer kan försämras.
  • Tillgänglighet påverkas negativt.
  • Det medför också bristfälligt (och ofta obefintligt) samspel med digitala hjälpmedel.
  • Dålig kod tar längre tid att rendera ut.

Ramverk och html

På tech-fronten är det mycket nytt, som alltid. Ständigt kommer nya ramverk, paket och bibliotek. De är ofta lightning fast och erbjuder lösningar på olika problem och effektivisering av arbetsflöden. Men kvalitetssäkrar de bristfällig html? Det gör de inte.

Html har utvecklats genom åren

Den första versionen av html innehöll 18 element och var anpassad för de behov som fanns vid den tiden, främst för att strukturera och publicera vetenskapliga uppsatser och avhandlingar. Sedan dess har html utvecklats genom olika versioner, från HTML2 på 90-talet till HTML5 som lanserades 2014. Nya element har introducerats samtidigt som vissa element har tagits bort: Vem minns inte klassiker som <blink> och <marquee>?

Hurdan är kvaliteten på webben 2024?

Om nu html är så enkelt, då är väl kvaliteten hög där ute på webben? Låt oss titta under huven på några kända stora sajter.

Om testerna

Dessa tester är gjorda i maj 2024 med W3 Validator. Observera att en validator inte kan bedöma om rätt element har använts: en <div> får godkänt trots att den kanske skulle ha varit en <button>. Det kan med andra ord fortfarande finnas problem och brister i koden. Testerna är alltså också för snälla – men de ger en indikation.

Testresultat
Webbplats Antal fel
aftonbladet.se 109
klart.se 110
sas.se 123
zalando.se 131
xxl.se 178
tradera.com 241
pricerunner.se 245
hitta.se 381
expressen.se 738
Hedersomnämnanden
Webbplats Antal fel
sr.se 0
arbetsformedlingen.se 0
systembolaget.se 0
start.stockholm 0
1177.se 0

Hur många fel har just er webbplats?

Gå in på W3 Validator och testa idag. Det är helt gratis såklart. Föreslå till IT-ansvarig eller produktägare att åtgärda felen. Gör sedan testet igen om några månader. Det är väldigt tillfredställande att se antalet fel minska.

Hur många html-element kan du?

Det finns idag ca 140 st olika html-element. Hur många kan du? Vågar du göra detta quiz? Fuska inte 🙂 Länk till quizzet