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
șitbody
. 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?
- Posted in:
- CSS,
- Tips & Tricks
Buttonul ala e as o arma cu doua taisuri. Ba e button, ba e input type=submit ba e input type=image
Coduri HTML? Ce “a la noob” suna… http://css.dzone.com/articles/10-html-tags-which-are-not – Bine macar ca nu ai tradus si ti-ai expus propriul punct de vedere.
Geo, mulțumesc pentru comentariu. Am editat titlul cu două minute înainte să postezi tu
Cât despre articolul respectiv… Dacă îți spun că habar n-aveam de el, mă crezi?
chiar lipsesc tag-urile astea in multe proiecte. ma chinui si eu de multe ori. mai ales la absenta table-urilor la date tabulare
is curios cati oameni o sa si asculte ce ai scris
Mircea, nu cred că e vorba despre ascultat cât despre ținut minte!
interesant… ar fi bine sa existe mai multe articole care sa vorbeasca despre semantica in html…
eu as fi adaugat si address in lista asta… nu prea este folosit, desi majoritatea site-urilor contin o zona cu datele de contact…
Ant,
address
este un tag ușor neînțeles. Inițial vroiam să-l pun, dar am văzut că nu este folosit pentru ceea ce lasă numele să se înțeleagă ci pentru datele de contact ale autorului articolului.Am fost ușor nehotărât, nu știam dacă ar fi bine să-l pun sau nu… Și m-am gândit să-l pun în articolul următor
da… nu poate fi folosit pentru orice tip de adresa, ci doar pentru datele de contact ale autorului / proprietarului articolului / intregului document…
poate produce un pic de confuzie. cred ca si din cauza exemplelor din documentatie… pe mine m-au incurcat de cateva ori…
spor la urmatorul articol
Mie mi se pare ciudat ca in general, unde ti se cere sa completezi un formular cu mai multe date asemanatoare gen (proprietar / administrator / persoana de contact) gen hai sa zicem pentru un … domeniu nu se foloseste fieldset-ul + legend, mi se pare total absurd sa nu ii zici omului “Baaaaaai aiicisa completezi datele proprietarului iar aicisa completezi admin si pers de contact”.
Also, trebuie sa recunosc ca am dat de dificultati in ultima perioada cand vine vorba de tabele, mai ales ca a trebuit sa stilizez un nou site construit peste o baza de date refacuta dar cu datele vechi, in care au fost introduse date prin intermediul unui wysiwyg (de cacat, de pe vremea lui ceausescu in plm, cer iertare pentru frustrari, dar parca alaltaieri ma chinuiam la asa ceva, ah stai chiar a fost alaltaieri).
Anyway, good article. Nice memories, ce sa zic :)).