Intr-un articol precedent va prezentam cateva din tag-urile pe care HTML5 le pune la dispozitie pentru structurarea paginii. De asemenea, acolo spuneam ca astept cu nerabdare ca standardul sa fie definitivat si adoptam de toate browser-ele (sau macar majoritatea lor).
Realitatea este ca HTML5 nu este suportat 100% de niciun browser la acest moment (cel putin nu din ce stiu eu). Si chiar daca exista un browser care ofera suport, nu putem dezvolta numai pentru el.
Deci nu putem inca sa dezvoltam website-uri in HTML5. Putem, in schimb, sa dezvoltam site-uri HTML5 ready. Cu alte cuvinte putem sa folosim un markup XHTML care sa poata fi transformat ulterior foarte usor in HTML5.
Bazat pe reprezentarea din articolul trecut, layout-ul XHTML ar trebui sa arate asa:
Dupa cum se poate vedea, am inlocuit tag-urile <header>, <nav>, <section>, etc. cu div-uri care poarta id-uri reprezentative. Astfel, <header> devine <div id='header'>, <nav> devine <div id='nav'> s.a.m.d.
Veti observa ca exista o exceptie de la aceasta regula. Tag-ul <article> nu a fost inlocuit cu <div id='article'> ci cu <div class='article'>. Asta pentru ca tag-ul <article> apare de mai multe ori in pagina, iar id-urile este recomandat sa fie unice.
Cum ne ajuta asta in migrarea la HTML5? Simplu. In momentul in care ne hotaram ca vrem sa trecem la noul standard avem de facut doua lucruri.
In primul rand, trebuie sa modificam tag-urile din layout, astfel incat div-urile sa fie inlocuite cu tag-uri corespunzatoare id-ului fiecaruia respectiv clasei. Astfel, <div id='header'> devine <header>, <div id='nav'> devine <nav>, <div class='article'> devine <article> s.a.m.d.
Pana aici, nimic spectaculos, daca tot trebuie sa schimbam toate elementele din pagina, de ce le-am mai numit dupa aceasta conventie? Avantajul se vede la pasul al doi-lea din aceasta transformare. Modificarea CSS-ului.
Pentru layout-ul cu div-uri am fi avut un CSS cu selectori de genul #header{ }, #nav{ }, #footer{ }, .article{ }. Tot ce trebuie sa facem pentru ca CSS-ul sa fie compatibil cu noul layout este sa transformam selectorii de tip id si clasa in selectori de tag.
Astfel #header{ } se transforma in header{ }, #nav{ } in nav{ } si .article{ } in article{ }. Asta-i tot. Am transformat un layout XHTML intr-unul HTML5.
Acestea fiind spuse, browser support-ul va ramane probabil mult timp de-acum incolo o problema. Sunt convins ca browsere diferite vor interpreta putin diferit genul asta de tag-uri.
E greu de ajuns la un standard prin care un layout sa se vada identic pe toate browserele (mai ales cat IE e inca pe piata), dar cu ceva precautie se poate ajunge la un design consecvent cu minim de compromisuri.