Tag-uri HTML despre care probabil nu știai mai nimic

Cred că orice om are un punct în care începe să uite chestii învățate cu mult timp în urmă dar nefolosite. Bănuiesc că așa funcționează creierul, nu știu exact. Dar cum programatorii sunt oameni (am spulberat și mitul ăsta!), se întâmplă ca unele coduri ori să fie uitate ori să fie trecute cu vederea. Și m-am gândit să fac o listă cu coduri folosite mai rar decât ar trebui.

De ce ai folosi aceste tag-uri „exotice”? Cel mai bun motiv este păstrarea unui cod cu o structură semantică. Un alt motiv ar fi evitarea adăugării de clase peste clase diverselor elemente din pagină.

Tabele

Tag-ul table

Chiar dacă tot hype-ul în jurul codului fără tabele de acum cinci ani s-a stins, încă mai sunt clienți care cer – și evident, programatori care fac – cod fără tabele. Nimic greșit, nu? Doar atunci când ai date… tabulare. Probabil tag-ul table sună ca o fosilă și ar trebui lăsat să moară. Nimic mai fals! Este viu, este util și te scutește de bătăi de cap. A început să fie folosit pentru design pe la mijlocul anilor ’90 din motive foarte întemeiate: războiul browserelor era în floare, fiecare browser avea un mod unic de a interpreta CSS iar tabelele erau singura soluție pentru programatorii ce vroiau un site cross-browser.

Cu toate astea, întrebarea rămâne: Cum recunoști datele tabulare? Când pot folosi tabele fără frică? Dacă poți aranja informația respectivă într-un fișier excel foarte ușor, atunci ai nevoie de un tabel!

Tag-ul th (table head)

Tag-ul th îl folosești când ai de afișat un cap de tabel. Am văzut tot felul de artificii, de la clasă suplimentară pentru un td până la folosirea tag-ului strong într-un td. În plus, ce scapă destul de mulți din vedere este că un cap de tabel poate fi și în altă parte decât sus (ex: stânga).
Detalii.

Tag-ul colgroup

Trebuie să recunosc, până acum vreo două luni nu am folosit prea mult aceste tag-uri. Ca să specifici lățimea unei celule de tabel poți adăuga câte o clasă pentru fiecare td sau th și să ajustezi proprietățile clasei respective. Folosind colgroup poți defini proprietățile celulelor dintr-o coloană întreagă. Rezultatul? Nicio carie clasă aiurea!
Detalii.

<table>
	<colgroup class="col1"></colgroup>
	<colgroup class="col2"></colgroup>
	<colgroup class="col3"></colgroup>
	<tr>
		<td>continut col 1</td>
		<td>continut col 2</td>
		<td>continut col 3</td>
	</tr>
</table>

Tag-ul col

Se folosește în combinație cu colgroup și, spre deosebire de mai sus-numitul colgroup, col te ajută să setezi doar lățimea coloanelor. Ar mai fi de menționat că tag-urile col sunt de tip self-closed (<col />) dacă folosești un doctype XHTML.
Detalii.

Tag-urile tbody, thead și tfoot

Aici sunt două chestii funny:

• Chiar dacă nu specifici, tbody este adăugat automat de (unele) browsere.
• Ordinea corectă într-un tabel este următoarea: thead, tfoot și tbody. Chiar dacă footer-ul apare la început în cod, în browsere este randat corect.

Detalii tbody, thead și tfoot.

Formulare

Da, și la formulare există tag-uri nefolosite sau folosite puțin. Hai să vedem care sunt acestea.

fieldset

În practică am întâlnit diverse situații în care existau părți ale unui formular împărțite în… div-uri. Aparent, nu e nimic greșit în asta, dar definiția tag-ului div sună cam așa:

îl folosești atunci când n-ai un tag mai bun

Prin urmare, folosești… fieldset.
Detalii.

Poți grupa elementele unui formular foarte ușor și poți folosi următorul tag:

legend

Tag-ul ăsta este genul de tag la care te întrebi: „de ce naiba există așa ceva?”. Răspunsul? SE-MAN-TI-CĂ! Da, poți folosi un h3 în locul lui, dar… de ce ai face-o? Tag-ul legend îți adaugă un titlu fieldset-ului curent (se poate folosi doar într-un fieldset).
Detalii.

label

label este un tag aparte. Chiar dacă este folosit de mulți, nu este folosit corect de mulți. În teorie, tag-ul label ajută la adăugarea unui text lângă un element de formular. Fie că este input (de orice fel), fie că este textarea, fie că este select. Ceea ce mulți nu știu este că pot face elementul din interiorul unui label să „răspundă” la click pe textul din label. Astfel, în situația unui chestionar – de exemplu – este suficient să faci un click pe text pentru a selecta bifa (nu doar pe bifă; Apple, ar trebui să iei în considerare chestia asta în OSX 10.7!). Modalități de folosire:

<label><input type="checkbox" /> Bifează asta!</label>

<label for="check">Bifează asta!</label> 
<input type="checkbox" id="check" name="check" />

Da, este nevoie să ai ambele atribute: și id și name pentru a funcționa corect.

Atenție! NU recomand plasarea tag-ului select în interiorul unui label, deoarece va deveni inutilizabil!.
Detalii.

button

S-a întâmplat vreodată să ai nevoie ca într-un tag input type="submit" să ai nevoie de o imagine? O săgeată, o bifă, un X, orice. Sau o literă boldată, un text italic sau alte minuni d’astea? Sau poate un sliding door? Răspunsul scurt: nu ai cum fără a adăuga CSS suplimentar. Soluția? button!

<button type="submit" name="submit_button" value="submit_form"><img src="ok.gif" alt="ok"/> <strong>S</strong>a<em>v</em>e</button>

Combinația de tag-uri este perfect validă. Singura problemă este la modul în care IE6 se comportă: dacă toate browserele trimit serverului valoarea atributului value, IE6 se prostește la maxim și trimite ce este în interiorul tag-ului. Dar cum am observat foarte rar situații în care programatorul backend folosește validarea ȘI la butonul de submit, consider că e destul de safe de folosit (nu 100%, dar… e ok). O altă problemă – tot cu IE6 – este că în cazul în care ai mai mult de un buton pe pagină, nu e capabil să îți spună pe care ai apăsat (ceea ce nu se întâmplă dacă folosești input type="submit".
Detalii.

optgroup

Folosind acest tag, poți grupa elementele unui select, astfel încât au un soi de titlu boldat.
Detalii.

Alte tag-uri

Dacă tag-urile de mai sus se pot folosi fie în interiorul unui tabel fie în interiorul unui formular, ce urmează acum sunt tag-uri ce pot fi folosite oriunde, fără a ține cont (prea mult) de parent. Sunt un fel de copii rebeli, dacă vrei.

dl/dt/dd

Poți folosi un dl (definition list) atunci când ai o listă cu titlu pentru fiecare element. Cel mai bun exemplu care îmi vine în minte acum este o pagină de genul Q&A.
Detalii.

Încheiere

Cam astea sunt tag-urile cărora le-am simțit lipsa în unele proiecte la care am lucrat peste munca altora. Nu sunt tag-uri imperios necesare, întrucât poți face artificii foarte ușor pentru a le înlocui, dar, dacă există, de ce să nu le folosești, nu?