M-a intrebat Andrei de ce lumea prefera sa foloseasca < li > – uri in loc de < a > – uri cand are de construit cate-un meniu CSS.
La intrebarea lui Andrei raspunsurile mele ar fi cam doua:
1. Pentru Google. LI = list item… adica niste A-uri in LI-uri intr-un UL il “fac” pe Google sa priceapa ca exista anumite relatii intre A-urile alea – lucru bun pentru relevantza.
2. Pentru ca deobicei pentru a defini un buton mai bogat grafic dar editabil ca text ai nevoie de cel putin 2 tag-uri unul in altul… or, cand folosesti un < A > intr-un < LI >, obtii exact asta, fara sa mai scrii
< div class= “menu” > < div class = “item” > < a href=”#” > menuitem < /a > < / div > < / div>
Impusti asa doi iepuri dintr-un foc: obtii cod mai STRUCTURAT si mai CURAT.
Iar pentru puristii care sunt atenti la orice bit optimizabil, LI e un cuvant mai scurt decat DIV, iar definirea clasei unui UL face ca definirea stilurilor elementelor din el sa devina redundanta in cod – deci o noua economie.
Exemplificare:
< div class = "menu" > < div class = "item" > < a href="#" >menu item 1< / a > < / div > < div class = "item" > < a href="#" >menu item 2< / a > < / div > < div class = "item" > < a href="#" >menu item 3< / a > < / div > < / div>
vs
< ul class = "menu" > < li >< a href="#" >menu item 1< / a >< / li > < li >< a href="#" >menu item 2< / a >< / li > < li >< a href="#" >menu item 3< / a >< / li > < / ul>
interesant, dar un pic incomplet
div.menu div{
}
in loc se pui class item in div pentru element menu
sau ai putea sa scapi de div din
menu item 1
si sa pui
div.menu a{
display:block;
}
alex: ai dreptate. Poate ca economia realizata nu e chiar atat de mare – de-aia am si zis: “pentru puristi” … 😉 ma bucur ca unul din ei ma completeaza, competent si la obiect 😉
forma completa, asa cum o sugereaza Alex, este:
< div class = "menu" >
< a href = "#" >menu item 1< / a >
< a href = "#" >menu item 2< / a >
< a href = "#" >menu item 3< / a >
< / div>
Intr-adevar, este o economie de cod – dar codul rezultat ar fi si mai relevant pentru Google daca s-ar folosi LI-urile in schimb.
In aceeasi idee in care < h1 > Titlu < / h1 > este mai relevant decat < div class = "title" > Titlu < / div >
bunul simt, spune ca un menu e format de o insiruire de elemente (o lista),
sunt pentru folosirea listei in locul unor divs
acelasi lucru il zic mereu cand aud de tableless layout, o pagina nu contine informatii tabelare, ci informatii impartite in blocuri
e pur si simplu vorba de bun simt pana la urma
gand la gand cu bucurie, alex: citeste si comentariul de mai sus, care si explica cum e cu relevanta unor TAG-uri in raport cu altele.
[…] Later edit: for a more elegant menu version (in terms of coding and approach), but less functional and without JS, read here. […]
[…] elegant menu version (in terms of coding and approach), but less functional and without JS, read here (in […]