Zaterdag 23 November 2024


XHTML1.1 (Experiment)

10 oktober 2003, deze pagina staat nog onder bewerking, niet alle links zullen nog werken ook kan de tekst nog wijzigen.

  1. XHTML
    1. In de practijk
  2. Browsers en CSS2
    1. Testbrowsers
  3. Uitwerking
  4. Resultaten
  5. Beperkingen
  6. Conclusie

XHTML

XHTML is de opvolger van HTML. XHTML1.0 is rechstreeks afgeleid van HTML4.01 en XHTML1.1 is een verbetering daarop (op basis van 1.0 strict). Inmiddels is de ontwikkeling van XHTML2.0 in volle gang. XHTML2.0 zal niet meer per definitie compatible zijn met haar voorlopers.

XHTML is een nieuwe definitie van HTML in XML. XML wordt gebruik om data op te slaan en is erg flexibel. XML is een afleiding van SGML en HTML is daar weer een subset(onderdeel) van.

Zowel HTML als XML kunnen gebruikt worden om documenten met gestructureerde informatie te beschrijven. De verschillende stukjes data worden gescheiden door tags, bijvoorbeeld <H1>. Bij HTML ligt de betekenis van de tags vast. Bij XML bepaalt de maker van het document de betekenis. Dit laatste maakt XML zo flexibel.

In de practijk

XHTML kent nog wel enkele tags met een vast betekennis, maar het aantal is veel beperkter. Verder wordt de betekenis van de tags niet meer beschreven door de atributen van de tag, maar door CSS. Hierdoor ontstaat een stricte scheiding tussen de beschrijvende datastructuur en de opmaak daarvan.

In theorie zou een XHTML bestand dus veel compacter en overzichtelijker gestructuurd moeten zijn als een HTML bestand, waardoor het bijvoorbeeld beter gelezen zou kunnen worden door de robots (spiders) van de zoekmachines. Ook draagt XHTML automatisch bij aan een scheiding tussen opmaak en content.

Om te kijken hoe bruikbaar dit is, heb ik de pagina die u nu bekijkt gemaakt in XHTML. Uitdaging daarbij was een pagina te maken, die qua functionaliteit, accessbility (toegankelijkheid) en usability (gebruiksvriendelijkheid) gelijk is aan de testpagina van deze site in HTML4.01 volgens het strict DTD.

Opmaak van deze pagina gebeurde m.b.v. CSS versie 2.

Browsers en CSS2

Voor een goede toegankelijkheid zou het eindresultaat browser-onafhankelijk moeten zijn. Maar welke browsers ondersteunen CSS2?
De onderstuning van 4e of eerdere generatie browsers (o.a. IE4 en NN4) is slecht of te verwaarlozen. Hogere versies zouden CSS2 moeten ondersteunen, opvallend daar bij is de slechte onder steuning van alle Internet Explorer Browsers, Microsoft houdt blijkbaar niet van standaards.
Uitgebreidere informatie is te vinden op: CSS 2 Tests.

Test browsers

Zelf het ik de pagina getest met de volgende browsers onder Linux Redhat9

Meer info over de gebruikte browsers: Browsers.

Uitwerking

Door uitsluitend gebruik te maken van CSS(2) zou de XHTML gelijk aan (zelfde functionaliteit, accessbility en usability) de HTML4.01 strict pagina, gemaakt moeten kunnen worden zonder te hoeven terugvallen op tabellen (<table>) voor de layout. Ook zou het javascript voor het 'sticky' menu (= menu dat meescrollt met de pagina) overbodig moeten worden.

Een layoutontwerp waarbij geen gebruik van tabellen gemaakt wordt heeft diverse voordelen:

Globaal bestaat de(ze) pagina uit een header(kop), footer(voet) en drie kolommen, waarvan de middelste kolom de feitelijke conetent(inhoud) bevat.

Duidelijk ben ik niet de eerste die zich met dit vraagstuk bezig houd:

Vooral de laatste twee gaven nuttige informatie voor de uiteindelijke tot standkoming van deze pagina.

Het eindresultaat lijkt in eerste instantie redelijk. Grootste probleem bleek het behoud van functionaliteit en wel het meescrollen van het menu met de pagina.
CSS geeft ons de mogelijkheid dit te doen met het volgende stukje code:
position: fixed;
Maar geen enkele versie van MS IE blijkt deze code te ondersteunen. Dit lijkt alleen op te lossen, door toch terug te vallen op javascript. De code die de oplossing geeft is te vinden op:
http://www.doxdesk.com/software/js/fixed.html

Uiteindelijk werd een betere oplossing gevonden op: http://imfo.ru/csstest/fixed/fixed.htm. Hiermee kan ook zonder javscript, het beoogde effect in IE gerealsieerd worden. Deze oplossing maakt handig gebruikt van: Conditional comments of IE.

Resultaten

Het eindresultaat is een pagina, die voldoet aan de gestelde eisen, uiteindelijk dus ook geheel zonder javascript.

Ter vergelijking vergelijken we een document met de hier beschreven methoden met een zelfde document in HTML 4.01 strict. De oorspronkelijke pagina zetten we om op dezelfde manier als deze pagina, voor een goede vergelijking laten we de tekst "Email Communications" in de meest rechter kolom weg.

  HTML 4.01 strict XHTML1.1 + CSS2
HTML-code 8357 6566
Stylesheet 1943 3173
Javascript 916 0
Totaal: 10.9Kb 9.5Kb

Bovenstaande tabel laat zien hoeveel bytes er nodig zijn voor de verschillende onderdelen van de pagina. Het totaal is weergeven in Kilobytes.

Voor dezelfde pagina levert XHTML1.1 + CSS2 hier dus een besparing van 12.8%. De bezoeker kan dit merken door een sneller laadtijd, dit effect wordt nog eens versterkt doordat de extra laadtijd voor het javascript komt te vervallen en we ook niet meer te maken hebben met relatief langzaam ladende tabellen.

Het aantal bytes wordt HTML-code mede bepaald door de feitelijk content (+/- 3500bytes). Naarmate de content van de pagina groter wordt, zal de procentuele 'winst' zoals bovenbeschreven afnemen. Al hoeft die afname niet altijd evenredig te zijn met toename van bytes, omdat het gebruikt van CSS ook voor andere opmaakeffecten een voordeel kan hebben.

De besparing is hier relatief gering, omdat HTML 4.01 strict pagina ookal goed gebruik maakte van CSS.

Belangrijk ander voorbeeld is gehaald in de optimalisatie voor de zoekmachines. In de eerste plaats slaan de robots alle javascript en CSS over, zij treffen dus een duidelijk compactere pagina, ruim 20% kleiner. Dat laatste zal leiden tot een hogere keyword densitity.

Daar naast stelt deze aanpak ons in staat de belangrijkste content (in dit geval de feitelijk content) bovenaan in de broncode te plaatsen. Zoekmachines hechten meer waarde aan het begin van een document, sommige (lees de meeste) indexeren alleen de eerste .. Kb.

Beperkingen

De pagina zal alleen werken voor browsers met een redelijke ondersteuning voor CSS2.

In het oorspronkelijk ontwerp had de rechterkolom van de 3-kolommen-layout een andere achtergrondkleur. Omdat in dit onwerp de kolom de achtergrond krijgt van zijn parent-element (body), moeten de linker- en rechterkolom dezelfde achtergrond kleur hebben.
Zouden we de kolom zelf een achtergrondkleur geven, dan geeft dat problemen, omdat niet automatisch een hoogte van 100% krijgt.
zie o.a.: http://www.xs4all.nl/~ppk/css2tests/100percheight.html

Wel kunnen zonder problemen elementen in de rechter kolom gepositioneerd worden, ter illustratie is daar dus de tekst Email Communications geplaatst.

Deze pagina maakt gebruik van zgn. named anchors (interne links). Dit geeft problemen voor Konqueror en Mozilla, die het anchor bovenaan de pagina plaatsen i.p.v. boven aan de content div. De opgegeven padding van de body wordt dus genegeerd:
body
{
padding-top: 4em;
background-color:#990000;
}

Conclusie

Het is mogelijk een goede pagina te maken met behulp van alleen CSS, ook kunnen (nagenoeg) alle traditionele HTML pagina's op deze manier omgezet worden naar XHTML.

Grootste probleem lijkt de ondersteuning van oudere browsers. Hoe ouder de browser hoe minder opmaak. Ook de slechte ondersteuning van (standaards voor) CSS2 door MS IE, maakt het er niet makkelijker op. Wat betreft dat laatste verwijs ik u graag nog eens door naar: The Web Standards Project (WaSP)

Onder resultaten worden de voordelen voor de bezoeker en zoekmachine optimalisatie al beschreven.

Overige voor- en nadelen van CSS worden uitgebreider beschreven onder CSS op deze website. Meer over zoekmachine optimalisatie valt te lezen naar zoekmachine optimalisatie.



Email Communications
info | sitemap
E
M
A
I
L

C
O
M
M
U
N
I
C
A
T
O
I
N
S