Example Validation

Validatie

Voordeel

'Schone webcode:
optimale laadsnelheid'

Zie verder »

Example Validation

Validatie

Voordeel

'Schone webcode:
een ware uitdaging'

Zie verder »

Example Validation

Validatie

Nadeel

'Zorgvuldig geschreven code:
ongeschikt voor beginners'

Zie verder »


Opmerkingen

Inleiding

Webpagina's bestaan uit (X)HTML-broncode waarbinnen content (tekst, afbeeldingen, tabellen, formulieren) wordt geplaatst.
Binnen (X)HTML bestaan er verschillende versies, vanaf het prille begin lopend van HTML 2.0 tot HTML5, en van XHTML 1.0 tot 1.1.
Met de ontwikkeling van XHTML 2.0 is men al jaren geleden gestopt.

HTML 2.0 en HTML 3.2 zijn echt niet meer 'bruikbaar', omdat de (opmaak)mogelijkheden hierbinnen zeer beperkt zijn.
HTML 4.01 zou je nog kunnen gebruiken maar deze versie is feitelijk in onbruik geraakt. De laatste officiële versie is al jaren HTML5.

XHTML 1.0 en XHTML 1.1 zijn te beschouwen als XML-variant en werden lange tijd door het W3C als opvolger(s) van HTML 4.01 gezien.
Maar dat werd HTML5.
De consequentie is dat de eerder genoemde versies van XHTML uit beeld zijn, al was het maar door de nieuw geïntroduceerde semantische tags 'header', 'footer', enzovoorts, in HTML5.
HTML5 kent een XML-variant in de versie XHTML5. Het verschil zit hem erin dat in HTML5 fouten in de webcode worden getolereerd, in XHTML5 leidt een fout in de webcode tot een waarschuwingsscherm. De inhoud van de pagina is dan geblokkeerd.
Wie foutloos in webcode kan schrijven, weet dat ie gegarandeerd snelle pagina's in XHTML5 aan het internet levert.
Uiteindelijk heb ik gekozen voor het 'gewone' standaard HTML5 dat foutjes toestaat. Niettemin streef ik ernaar foutloos HTML5 te schrijven, ten behoeve van de laadsnelheid. Ik ontdekte overigens dat XHTML5-pagina's in PWA (Progressive Web Apps) niet konden worden gevalideerd. Een PWA dient dan in HTML5 te worden geschreven.

XHTML en HTML bieden dezelfde opmaak- en integratiemogelijkheden (bijvoorbeeld SVG in (X)HTML5), maar verschillen hierin dat HTML door de webserver als tekst (text/html) wordt geïntepreteerd, terwijl XHTML door de webserver als een applicatie (application/xhtml+xml) wordt geïntepreteerd. Met andere woorden, HTML wordt via een SGML-parser en XHTML door een XML-parser verwerkt.


De zin van het valideren van webpagina's

Net als verkeersregels zijn strikte gebruiksregels voor (X)HTML zinvol: ze bevorderen de doorstroom / het parsen van de (X)HTML-code.

Als je 'afgekeurde' code (zoals font) gebruikt of gewoon fouten maakt in de code, moet de parser van de webbrowser die allemaal verwerken.

Het eindresultaat is dan doorgaans hetzelfde als bij gebruik van schone en correcte (X)HTML-code, maar in het laatste geval wordt de webpagina (net iets) soepeler en sneller geladen.
De parser verdoet immers geen tijd aan het doorploegen van foutieve of niet te gebruiken informatie.

In dit verband is het heel onwenselijk om Word-documenten in HTML-vorm op het web te plaatsen. Het door Word gebruikte HTML is zo complex en niet-conform de internationaal geaccepteerde HTML-validatie-normen, dat elke browser onnodig veel tijd kwijt is om die code-brij door te ploegen.

Door een webpagina te laten valideren (via de online-validatie-machine van het W3C of WDG) weet je dus zeker dat die webpagina snel(ler) en soepel(eler) wordt geladen.

Bovendien is de kans groter, dat zo'n pagina ook identiek in de verschillende typen browsers waaronder Firefox 128.0.2 (64-bits), Opera 111.0.5168.61 (64-bits), Chrome 127.0.6533.73 (64-bits) wordt weergegeven.

Die kans wordt nog meer vergroot, als er ook gebruik wordt gemaakt van correcte CSS-stylesheet-codering.


ISO-HTML in historisch perspectief

Op basis van HTML 4.01 Strict is ooit ISO-HTML ontwikkeld. Deze 'basale' versie van HTML 4.01 was zeer geschikt voor gebruik in eenvoudig gestructureerde content zoals wetenschappelijke teksten, waar de inhoud belangrijker is dan de presentatie.

ISO-HTML kon door de strikte regels waaraan het moest voldoen, gemakkelijk worden omgezet naar gevalideerd HTML 4.01, XHTML 1.0 en 1.1.

Die striktheid / eenvoud in regels kwam tot uiting in het feit dat in de img-tag de attributen width, height en border niet mochten worden gebruikt; deze eigenschappen moesten altijd worden beschreven in een stylesheet; en zo waren er meer atrributen die uitgesloten waren. Verder mochten de hx-tag (h1 t/m h6) nooit in een div-tag staan; en de hx-tags mochten officieel alleen in aflopende volgorde worden gebruikt zodat h4 niet voor h3 mocht komen staan.

Dat laat zien dat deze versie van HTML een minder ingewikkelde structuur had dan HTML 4.01. Zie http://jp29.org/iso.htm voor meer informatie op dit vlak.

Al met al was ISO-HTML ongeschikt voor het maken van 'echte' websites.


Inleiding tot voorbeelden
Hieronder vind je een reeks van gevalideerde HTML- en XHTML-voorbeelden.

Opmerking 2. (X)HTML als frames-webpagina (met de doctype Frameset in HTML 4.01 en XHTML 1.0) blijft hier verder buiten beschouwing, aangezien de content van ingebedde frames onzichtbaar is in de broncode en daardoor in strijd is met het principe van accessibility.

Voorbeelden van gevalideerd (X)HTML

Voorbeeld webpagina in HTML 2.0 || This document was successfully checked as HTML 2.0!

Voorbeeld webpagina in HTML 3.0 || This document was successfully checked as -//IETF//DTD HTML 3.0//EN! (1 warning(s))

Voorbeeld webpagina in HTML 3.2 || This document was successfully checked as HTML 3.2!

Voorbeeld webpagina in HTML 4.0 Transitional || This document was successfully checked as HTML 4.0 Transitional! (1 warning(s))

Voorbeeld webpagina in HTML 4.0 Strict || This document was successfully checked as HTML 4.0 Strict! (1 warning(s))

Voorbeeld webpagina in HTML 4.01 Transitional || This document was successfully checked as HTML 4.01 Transitional!

Voorbeeld webpagina in HTML 4.01 Strict || This document was successfully checked as HTML 4.01 Strict!

Voorbeeld webpagina in ISO HTML || This document was successfully checked as ISO/IEC 15445:2000 ("ISO HTML")!

Voorbeeld webpagina in HTML 5 || Document checking completed. No errors or warnings to show.

Voorbeeld webpagina in XHTML 1.0 Transitional || This document was successfully checked as XHTML 1.0 Transitional!

Voorbeeld webpagina in XHTML 1.0 Strict || This document was successfully checked as XHTML 1.0 Strict!

Voorbeeld webpagina in XHTML 1.1 || This document was successfully checked as XHTML 1.1!


Voorbeelden van gevalideerd C-HTML, SVG, WML, XHTML Basic

Voorbeeld webpagina in C-HTML 1.0 Draft || This document was successfully checked as -//W3C//DTD Compact HTML 1.0 Draft//EN! (2 warning(s))

Voorbeeld webpagina in C-HTML 2.0 Draft || This document was successfully checked as -//W3C//DTD Compact HTML 2.0 Draft//EN! (2 warning(s))

Voorbeeld met afbeelding in SVG 1.0 || This document was successfully checked as SVG 1.0! (1 warning(s))

Voorbeeld met afbeelding in SVG 1.1 || This document was successfully checked as SVG 1.1! (1 warning(s))

Voorbeeld webpagina in WML 1.1 || This document was successfully checked as -//WAPFORUM//DTD WML 1.1//EN!

Voorbeeld webpagina in WML 1.2 || This document was successfully checked as -//WAPFORUM//DTD WML 1.2//EN!

Voorbeeld webpagina in WML 1.3 || This document was successfully checked as -//WAPFORUM//DTD WML 1.3//EN!

Voorbeeld webpagina in WML 2.0

Voorbeeld webpagina in XHTML Basic 1.0 || This document was successfully checked as XHTML Basic 1.0!

Voorbeeld webpagina in XHTML Basic 1.1 || This document was successfully checked as XHTML Basic 1.1!


Voorbeelden van gevalideerd XML

Voorbeeld I webpagina in XML 1.0 + CSS || Document Valid

Voorbeeld II webpagina in XML 1.0 + XSL || Document Valid

Voorbeeld III webpagina in XML 1.0 + CSS + DTD

Voorbeeld IV webpagina: Sitemap with CSS layout || Document Valid

Voorbeeld V webpagina: RSS Feed with CSS layout || Document Valid


Example Validation

Validatie

Nadeel

'Foutief geschreven code:
vertraagde laadsnelheid'

Zie verder »

Example Validation

Validatie

Bron: HAKHAK

'beter gevonden, gelijk
weergegeven, sneller weergegeven
'

Zie verder »

Example Validation

Validatie

Bron: SEO ...

'Betere gebruikerservaring ...
Snellere pagina’s
'

Zie verder »