XHTML semantika
Radi razdvajanja sadržaja i prezentacije, u XHTML-u postavljamo samo semantički potrebne elemente. Od ovog generalnog pravila odstupa se u rijetkim prilikama, većinom kad je potrebno riješiti neki problem nesavršenosti implementacije u današnjim preglednicima (engl. browser). Drugim riječima, naslovi su označeni h1-h7 tag-ovima, tekst je zatvoren u paragrafe, a pojedini dijelovi stranice zatvoreni su u odjeljke (divisione, odnosno div tag-ove). U XHTML dokumentu ne koriste se prezentacijski tag-ovi font, bold i/ili italic.
Dugo vremena tablice su korištene za dizajn stranice (za postavljanje elemenata stranice na njihova mjesta), jer drugog načina nije bilo. Razdvajanjem XHTML-a i CSS -a moguće je napraviti dizajn stranice bez tablica, a time dobivamo puno jednostavniji XHTML kod te bolje performanse zbog smanjene veličine stranice.
Izbacivanje prezentacijskih tag-ova i potpuno prebacivanje prezentacije u eksterne CSS datoteke ima još jednu prednost: možemo raditi više alternativnih prikaza (više CSS datoteka) i dozvoliti korisniku izbor prikaza (teme).
Posebna pažnja kod dizajna stranica potrebna je prema ljudima s posebnim potrebama (najčešće se danas priča o osobama koje imaju problema s vidom ili motorikom). Osobama koje imaju probleme s vidom ne treba prenosit informacije bojom, a potrebno je pripaziti na skaliranje (uvećanje/umanjenje) saržaja (veličine fonta). Osobe s motoričkim problemima mogu imati teškoće u radu s mišem, pa se treba obratiti pažnja na mogućnost rada samo tipkovnicom. Slijepe osobe mogu koristiti preglednike koji čitaju tekstove naglas, te zbog toga treba postaviti smislene alt atribute na slike.
Struktura
XHTML struktura stranica je konzistentno izvedena: nakon <body> taga, slijedi glavni naslov (<h1>), pa sadržaj zatovren u <div id="main">. Svaka kategorija sadržaja ima svoj id kojim je označen <body> tag (drugim riječima, <body> tag ima id atribut koji definira subkategoriju site-a).
Sadržaj počinje podnaslovom (<h2>), koji je podijeljen na manje logičke cjeline (<h3>), a sam tekst zatvoren je u odlomke (paragrafe: <p>). Na kraju sadržaja može biti popis stranica koje detaljnije obrađuju pojedine aspekte teksta: taj popis počinje svojim podnaslovom (<h2>Pogledajte</h2>) ispod kojeg je popis stranica (<ul class="related">).
Kako logo, meniji i ostali manje važni dijelovi (footer) slijede nakon glavnog sadržaja, nije potrebno postavljati "preskoči navigaciju" link (koji normalno, postavljamo na početku stranice: to je pomoć ljudima s posebnim potrebama te onima koji koriste ne-grafičke preglednike).
Razdvajanje logičkih cjelina izvedeno je <div> tagovima: važan sporedni efekt takvog kodiranja je mogućnost kontrole izgleda putem stilova. Tako su razdvojene cjeline:
- glavni sadržaj (main)
- logo i link na naslovnu stranicu (ja)
- izmjenjivač stilova (styleswitcher)
- meni (menu)
- dno stranice (footer)
Primjena
Izrada XHTML 1.0 stranice je proces u kojem postavljamo markere (XHTML tag-ove) u sadržaj. Ideal je postaviti sve semantički bitne elemente, bez suvišnih div (span) tag-ova (autori ponekad upadnu u divitis, stanje duha u kojem se nepotrebno postavljaju div tagovi). Zbog neprecizne implementacije standarda u realnim preglednicima ponekad se odstupa od tog pravila (u praksi, postavlja se "vanjski" div koji sadrži elemente koje treba npr. centrirati). Izgled (dizajn) site-a izveden je primjenom CSS tehnologije.
Kontrola (validacija) stranica napravljena je primjenom James Clark-ovog SGML parsera (verzija 1.3.4) na DTD (Document Type Definition) XHTML-a. SGML parser omogućava validaciju dokumenata prema danom DTD-u pa se uz postojeći DTD za HTML 4 mogu istim parser-om kontrolirati i dokumenti pisani za HTML4 (postoje i DTD-ovi za HTML 3.2, pa čak i za HTML 2.0 verziju). Detaljnije upute za instalaciju i korištenje možete naći na stranici offline HTML validatora, a informacije o SGML-u i DTD-u HTML-a u knjizi HTML Unleashed.