Ce este un Div?
DIV este un HTML tag utilizat pentru a contine in el diferite parti a unui HTML document care sunt legate impreuna. Div de fapt raspunde pentru divizarea componentelor unei pagini HTML in blocuri. Cu ajutorul sau putem imparti layoutul in header, footer, sidebar, content sectiuni etc. El nu doar grupeaza elemenele din punct de vedere semantic, dar si permite sa definim reprezentareavizuala utilizind CSS.
Ce este Divitis?
Divitis se refera la utlizarea excesiva a tagului div in pagina, pentru alte scopuri decit divizarea layoutului in sectiuni semnificative.
Din aceste utilizari excesive fac parte:
- Inserarea fiecarui HTML obiect din pagina intr-un div, indiferent daca este sau nu nevoie.
- Manipulare cu structura paginii pentru a atinge obiectivele vizuale dorite
- Folosirea tag-ului DIV pentru marcarea elementelor, care par sa nu corespunda la nici un alt component HTML.
Acst obicei provine de la proasta intelegere a scopului predestinarii tagului div. Multi web designeri sunt tentati sa creada ca div-ul este un tag multi-scop si il utilizeaza pentru rezolvarea problemelor vizuale shi a obiectivelor propuse de multe ori din cauza lipsei de intelegere a HTML si CSS selectors. Uneori si din cauza ideilor gresite despre ce reprezinta CSS layoutul in realitate dar si din cauza unor abordari de lucru cu CSS creind similaritate cu HTML tabele(pur si simplu se schimba celulele din tabel cu div-uri :) ) ceea ce este
total gresit.
De ce Divitis este rau?
Sunt citeva motive:- Este partial eliminat unul dintre motivele cheie pentru care se trece la layouturile bazate pe CSS si anume: separarea partii vizuale de structura in sine. Aceasta structura nu mai este curata din punct de vedere semantic. Iar divurile care au fost adaugate ulterior nu servesc la nimic
- Codul devine foarte complex si mult mai dificil de stilizat cu ajutorul CSS.
- Codul devine mult mai dificil de citit iar erorile se infilitreaza mai usor.
Exista un numar de strategii pentru a scapa de extradivuri si anume:
1. Folosirea intregului arsenal de taguri HTML. Inainte de a incepe crearea layoutului trebuie sa ne gindim la semanticitatea codului si la ce reprezinta componentele viitorului layout de fapt. Ce este un navigation menu? Este de fapt o list de itemuri. Ce este aceasta propozitie? Nu este chiar un HTML paragraf, dar este tagul HTML cel mai apropiat prin care putem o reprezenta, si cu siguranta nu este un div HTML!
2. Decideti daca DIV este intradevar necesar. Uneori adaugam div-urile din obisnuinta sau din falsa presupunere ca este necesar pentru a accesa continutul din interiorul sau. De exemplu avem un navigation menu care arata cam asa:
<div id="nav">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
... etc ...
</ul>
</div>Cu toate acestea div in aces caz nu e necesar, putem simplu sa reprezentam navigation menu in modul urmator:
<ul id="nav">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
... etc ...
</ul>
Acest menu se poate de accesat in CSS scriind ul#nav in loc de div#nav ul.
3. Folosirea la putere maxima a CSS selectors. Nu tot timpul e necesar un div container cu o clasa sau ID specif pentru a formata elementele din interior. O recapitulare asupra modului de lucru CSS ne va face sa stilizam direct elementele fara sa le incadram in containere div.
4. Reconsiderarea standartelor pe care le suporta un browser. Nu tot timpul e necesar ca renderingul sa fie 100% egal in toate browserele, mai alescind vine vorba de IE6, uneori e foarte greu sa facem ca un component sa arate exact in toate browserele.
5. Reconsiderarea preferintelor designului. Suna cam dur dar, uneori merita de gindit asupra acestei optiuni. Cind vine vorba de rounded corners scalabile, sunt imposibile de transmis layoutului fara inserarea unor div-uri si span-uri adaugatoare, si atunci apare intrebarea, pe cit timp o sa fie stabil layoutul pentru care am folosit diferite trucuri pentru a reda componente de genul colturilor rotunjite?
