Web Semantics, best practices
Layouturile bazate in intregime pe CSS nu mai sunt de mult un lux in webul romanesc. Avantajele lor asupra layouturilor bazate pe tabele se cunosc, nu e cazul sa le mai enumar aici. Din pacate, in goana dupa “xhtml css valid”, unele lucruri au fost prost (sau deloc) intelese, printre care si semantica.
Sa luam ca exemplu tabelele. Desi singura lor vina este ca pana acum au fost folosite incorect de web designeri, ele nu mai sunt dorite in nici o parte a unui site, pentru ca toata lumea stie acum de “tableless layouts”.
| Nume | Prenume | Varsta |
|---|---|---|
| de Hunedoara | Iancu | 620 ani |
| Tepes | Vlad | 576 ani |
Acesta este un tabel simplu. Informatiile sunt dispuse clar, usor de inteles.
Acum, ce parere aveti de urmatoarele doua bucati de cod?:
<table> <tr> <th>Nume</th> <th>Prenume</th> <th>Varsta</th> </tr> <tr> <td>de Hunedoara</td> <td>Iancu</td> <td>620 ani</td> </tr> <tr> <td>Tepes</td> <td>Vlad</td> <td>576 ani</td> </tr> </table>
<div class="table"> <div class="table-row"> <span class="table-headcell">Nume</span> <span class="table-headcell">Prenume</span> <span class="table-headcell">Varsta</span> </div> <div class="table-row"> <span class="table-cell">de Hunedoara</span> <span class="table-cell">Iancu</span> <span class="table-cell">620 ani</span> </div> <div class="table-row"> <span class="table-cell">Tepes</span> <span class="table-cell">Vlad</span> <span class="table-cell">576 ani</span> </div> </div>
Interesant, nu? Mai e nevoie sa scriu si codul CSS necesar pentru ca a doua varianta sa arate ca prima? Pare absurd, dar multi sunt convinsi ca a doua varianta e cea mai buna (indiferent de circumstante), pentru ca “e din css”. Tabelele nu sunt rele! Ele trebuie folosite pentru informatii tabulare. E normal si semantic corect sa fie folosite astfel si este anormal sa se foloseasca o alta structura doar de dragul de a nu folosi tabele.
A scrie un site corect dpdv semantic inseamna a folosi fiecare tag html cu scopul pentru care a fost creat. Lista tagurilor suportate in XHTML 1.0 este aici. Daca o portiune de text vrei sa fie rosie, iti pui intrebarea “de ce?”. Iar daca raspunsul este “vreau sa scot acea portiune de text in evidenta”, atunci in loc sa folosesti <span class="red">, vei folosi <strong class="important">.
O regula de bun simt: daca, dupa dezactivarea stylesheet-ului CSS, nu poti identifica rapid elementele structurale ale site-ului (titluri, blocuri de text separate, formulare, meniu), atunci ceva e in neregula, iar structura HTML trebuie regandita putin. De asemenea, imaginile n-ar trebui sa existe in codul HTML decat daca sunt cu adevarat relevante pentru continut (ex: screenshoturi la o aplicatie). In rest, orice imagine (titluri mai speciale, colturi rotunjite, butoane colorate) trebuie adusa din CSS, de obicei folosind background-image. Asadar, o lista de comentarii la un articol va fi creata folosind o lista numerotata, titlurile vor folosi tagurile <hN> iar meniurile vor fi liste neordonate.
De ce este important sa scriem HTML semantic? Din multe motive. Unul ar fi SEO, deoarece se stie ca Google extrage informatiile dintr-un site in functie de structura HTML-ului, deci e bine sa-i indicam exact ce informatii sunt utile.
Un alt motiv este “backwards compatibility”: acest lucru inseamna ca daca site-ul va fi accesat de un dispozitiv mai putin inzestrat decat un calculator (ex: telefoane, screen readere, browsere mai vechi), structura lui va ramane in picioare iar informatiile vor putea fi accesate cu usurinta.
De asemenea, daca intr-o zi site-ul va fi preluat de un alt developer, ii va fi mult mai usor sa inteleaga cum functioneaza lucrurile in codul HTML.
Nu in ultimul rand pentru ca este primul pas catre semantic web.
Este bine de stiut ca nici un tag HTML nu e special in vreun fel (cu putine exceptii, cum ar fi tagul <a>). Felul cum arata un <h3> (de exemplu) depinde de setarile default ale fiecarui browser. Poti crea un intreg site doar din taguri <span>, fapt dovedit aici, insa in acest fel anulezi complet ideea de semantica asociata cu tagurile.
Resurse utile
- Semantics, HTML, XHTML, and Structure
- Standards don’t necessarily have anything to do with being semantically correct
- The Semantic Web: An Introduction
Completare
Ionut a scris acum cateva zile un articol foarte bun despre stilizarea formularelor fara a folosi tabele, ci folosind definition lists. Enjoy :)
E simplu: tabelul se foloseste cind trebuie prezentate date tabulare, nu pentru layout, iar daca se vrea o stilizare a tabelului se poate face cu CSS , asa cum prezinta Veerle intr-un post de prin 2005 pe blog-ul ei si mai nou am vazut am vazut ca a scos versiunea 2 in 2007. Simplu, elegant, semnatic.
Link-uri (ptr cine nu a citit deja, sint convins ca majoritatea interesata din bransa le-a citi deja):
http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
pai una e stilizarea unui tabel si alta e re-inventarea rotii :)
am vazut multi idioti care se incapataneaza sa faca tabele din CSS. Am vazut si articole prin saituri serioase care cochetau cu ideea.
Eu folosesc tabele si la formurile mai mari, ca se aseaza destul de greu si trebuie mult cod css, asa ca pentru viteza, bag tabelu’ :)
are Ion la el pe blog un totorial despre asezarea field-urilor in formular din css.
Permite-mi sa fac o precizare:
Daca ai 10 culori diferite mi s-ar parea normal ca ele sa fie:
… si nu important1,2, etc
@Tiberiu Micu: datele alea sunt tabelare banuiesc :)
@Tiberiu: yep, asta am zis si eu :). Articolele alea sunt interesante.
@add: corect, mersi ca mi-ai adus aminte, completez acum postul
@Dever: sa zicem ca intr-un caz extrem ar fi acceptabil, dar am impresia ca vorbim deja despre ceva ce poate fi tratat diferit. 10 culori diferite in aceeasi bucata de text? :|
Dever chiar ash vrea sa vad un site cu 10 culori intr-un text :)) hai sa fim seriosi ceea ce a zis andrei in legatura cu scoaterea unei bucati de text in evidenta mi se pare una decenta si buna in acelasi timp.
Cred ca ai fortat putin exemplul 2, nu era nevoie de clasa la fiecare div si span, era de ajuns
si in felul asta era la egalitatea cantitatea de “taguri”, same thing.
Faza cu table, intradevar a intrat gresit la oameni in cap, ca tabelele sunt dracul gol, ideea era ca erau folosite gresit, nu ca nu isi aveau rostul.
@gigi (lol), nu stiu ce cod ai scris pentru ca a fost taiat de wordpress, dar cantitatea de taguri este si acum egala in exemplu: 1 tag pentru tabel, cate unul pentru fiecare row, si cate unul pentru fiecare celula.
Nu era vorba de 10 culori intr-un text … era vorba de 10 culori pe site (ce un singur text din site are nevoie de evidentiere ? si bineinteles ca nu era vorba de 10).