Structurarea paginilor in HTML5
Pe lângă faptul că definește părți individuale ale paginii dvs. (cum ar fi „un paragraf” sau „o imagine”), HTML are și o serie de elemente de tip bloc, utilizate pentru a defini zonele unui site (cum ar fi headerul, meniul de navigare, coloana principală de conținut si altele). In acest articol analizăm modul de planificare a unei structuri de bază a site-ului web, pentru a reprezenta această structură.
Un mare beneficiu pe care il aduce HTML 5, este acela ca ne permite sa structuram documentele de asa maniera incit sa aiba o logica nu doar vizuala.
Secțiuni de bază ale unui document
Paginile web pot și vor arăta destul de diferit unele de altele, dar toate au tendința de a împărtăși componente standard similare, cu excepția cazului în care pagina afișează un joc video sau ecran complet, face parte dintr-un fel de proiect de artă sau este doar prost structurată:
header (antetul) - este reprezentat de obicei, de o banda mare pozitionata în partea de sus, cu un titlu mare și / sau un logo. Acesta este locul, în care sunt plasate principalele informații uzuale despre un site web, si se repeta, de regula, in toate paginile.
bara de navigare - contine link-uri către secțiunile principale ale site-ului, de obicei reprezentate prin link-uri de tip buton. La fel ca antetul, acest conținut rămâne, de obicei, neschimbat de la o pagină web la alta. Mulți designeri web consideră că bara de navigare este o parte a antetului și nu o componentă individuală. Altii susțin că separarea celor doua componente, este mai buna pentru accesibilitate, deoarece cititorii de ecran, pot citi mai bine cele două componente, dacă sunt separate.
conținutul principal - este o zonă mare din centru, care conține cea mai mare parte a conținutului paginii web, de exemplu, un videoclip, un articol principal, o harta, sau titlurile principale, etc.. Aceasta este o parte a site-ului, care se va schimba cu siguranță de la pagină la pagină.
sectiuni laterale (sidebar) - sunt reprezentate de unele informații periferice, link-uri, citate, anunțuri si altele, care au legatura cu continutul principal al paginii sau cu intreg continutul site-ului (precum un sistem de navigare secundar).
subsolul paginii (footer) - de obicei, o banda situata in partea de jos a paginii, ce poate contine link-uri utile, notificari privind drepturile de autor, informatii de contact si altele. Continutul acestui element, este de regula identic in toate paginile unui site.
Un site web tipic, denumit generic "holy grail layout", arata cam așa:
Sa nu uitam ca printre consumatorii de Internet, se afla si persoane cu deficiente, pentru care designul (aspectul) unui site, nu inseamna nimic.
Pentru aceste categorii de utilizatori, modul in care este structurat un site, conteaza foarte mult. Daca o pagina nu este structurata corect, atunci nu va exista o ierarhie a continutului si o logica clara.
Cind sunt utilizate corect, aceste elemente vor da paginii o structura schematica, care va reprezenta clar si inteligent, modul in care este grupat continutul paginii, va face site-ul mai accesibil si mai interesant atit pentru utilizatori cit si pentru motoarele de cautare. De asemenea, un site cu un cod HTML bine structurat, va fi mai usor de stilizat.
Asadar, in acest articol, incepem sa studiem fiecare element structural in parte si incepem cu elementele care creeaza sectiuni in documente.
Elementul Nav
Elementul nav, reprezinta o sectiune a unei pagini al carei scop este acela de a stabili legaturi cu alte pagini sau cu parti din pagina curenta. Practic este o sectiune ce contine link-uri de navigare.
Nu toate link-urile dintr-o pagina trebuie sa fie continute de elementul nav. Elementul este destinat pentru sectiuni care constau in blocuri mari de navigare.
Aceasta nu inseamna ca sectiunea footer, care contine de regula mai multe link-uri ar trebui sa grupeze acele link-uri intr-un element nav. Utilizarea acestei etichete este inutila in acest caz.
Elementul Article
Elementele article si section, creeaza uneori confuzie pentru cei care le utilizeaza.
Acest element trebuie vazut ca un soi de container autonom, care poate avea propria structura interna si un continut care poate fi distribuit, copiat(syndication) si reutilizat. Ar putea fi o postare pe un forum, un articol despre un subiect anume, o postare pe blog, continut postat de un user sau orice alta forma de continut independent, care, chiar daca este mutat in alta pagina, inca poate avea sens. Este independent.
Atunci cind mai multe elemente article, sunt imbricate, elementele interioare reprezinta articole, in principiu, legate de articolul principal.
Cind este utilizat pentru un articol principal din pagina, poate fi utilizat impreuna cu eticheta main, pentru ca aceasta, nu va produce o noua sectiune in structura si va da mai mult sens semantic paginii.
Acest element trebuie utilizat cu prudenta, cu precadere atunci cind contine informatii de sine statatoare.
Elementul Section
La fel ca in cazul elementului article, exista o usoara confuzie legata de momentul oportun al utilizarii acestui element.
Elementul section reprezinta o sectiune generica a unui document sau aplicatii, o grupare tematica a continutului. Exemple de sectiuni ar fi capitolele unei carti sau o pagina de pornire a unui site, impartita in sectiuni introductive de articole, stiri si informatii de contact.
Atunci cind un element este necesar doar pentru scopuri de styling, autorii sunt incurajati sa foloseasca elementul div. Elementul section este necesar doar daca, continutul acestuia, ar trebui listat in mod explicit in schita documentului.
Se consideră că, cea mai bună practică este să începeți fiecare secțiune cu un titlu.
Elementul Aside
Elementul aside reprezinta o sectiune ce trebuie sa aiba continut legat tangential, de continutul din jurul lui si care poate fi prezentat separat de acel continut. Astfel de sectiuni sunt adesea reprezentate ca elemente laterale in tipografia tiparita.
Elementul poate fi utilizat pentru efecte tipografice, pentru citate, pentru publicitate, pentru un grup de elemente de navigare(un meniu lateral) si pentru orice alt continut ce poate fi prezentat separat de continutul paginii.
Pozitionarea acestui element in pagina este foarte importanta, pentru ca d.p.d.v semantic reprezinta mult mai mult decit o simpla coloana laterala(sidebar).
Elemente non-semantice
Elementul de tip bloc <div> nu are niciun inteles semantic si se utilizeaza ca un container pentru alte elemente, in scopul de a le modifica prezentarea cu ajutorul CSS sau pentru a indeplini anumite sarcini Javascript.
Autorii sunt incurajati sa vada acest element ca o ultima solutie, atunci cind nu exista un alt element adecvat. Ce gluma buna...
Utilizarea altor elemente in locul batrinului div, conduce catre o mai buna accesibilitate pentru utilizatori si la o mai usoara intretinere si actualizare a paginilor web.
Eticheta div nu trebuie ignorata complet. Multi designeri folosesc eticheta, pentru a putea aplica proprietati CSS unui grup mai mic sau mai mare de elemente si uneori chiar pentru intreaga pagina.
Elementul <span> este non-semantic, de tip inline, pe care ar trebui să îl folosești doar dacă nu te poți gândi la un element semantic mai bun, pentru a-ți înfășura conținutul sau nu vrei să adaugi vreun sens specific.
Elementul <hr>, creează o linie orizontală în document, care denotă o modificare tematică a textului (cum ar fi o schimbare de subiect). Vizual, apare ca o linie orizontală, exact ca linia de mai jos.
Ce este "divitis" si cum se trateaza?
Exemplu gresit:
<div class="page">
<div class="header">
<div class="logo">Logo</div>
<div class="nav">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Contact</div>
</div>
</div>
<div class="content">
<div class="article">
<div class="title">Ce este divitis?</div>
<div class="text">Prea multe div-uri!</div>
</div>
</div>
<div class="footer">© 2025</div>
</div>
Exemplu corect:
<main>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Ce este divitis?</h2>
<p>Este o utilizare excesivă a div-urilor în locul elementelor semantice.</p>
</article>
</section>
<footer>
<p>© 2025</p>
</footer>
</main>
Divitis este un termen folosit pentru a descrie o eroare comuna printre autorii mai putin inspirati sau pregatiti, si anume, utilizarea exagerata de elemente div in paginile web.
Divitis face parte din aceeasi categorie cu 'classitis' si 'span mania', ambii termeni fiind utilizati sugestiv, pentru a descrie folosirea exagerata si inutila a unor etichete sau clase.
Elementul Header
Elementul header (antet) are rol semantic, nu modifica structura documentului in care apare, functioneaza ca o introducere (pentru cel mai apropiat element de sectionare sau element radacina), se situeaza in partea de sus a unei pagini sau sectiuni si poate contine un logo, elemente de navigare, o imagine sau titlul sectiunii respective. Poate fi utilizat de asemenea pentru a infasura un formular de cautare sau pentru partea introductiva a unui element de sectionare.
- Utilizarea elementului nu este obligatorie;
- Poate fi utilizat de mai multe ori in pagina;
- Pentru ca de regula contine titluri (headings), creeaza impresia falsa ca este un element de sectionare.
Elementul Main
Acest element va infasura continutul dominant si unic al documentului si trebuie sa fie un element principal ierarhic, fara nume accesibil sau elemente personalizate autonome.
Un element principal ierarhic are parintii limitati la elementele: html, body, div si form.
- Utilizarea elementului nu este obligatorie;
- Poate fi utilizat o singura data in pagina;
- Este foarte semantic;
- Nu este element de sectionare.
Elementul Footer
Elementul footer (subsol) are rol semantic si creeaza un subsol al paginii, pentru cel mai apropiat element de sectionare sau element radacina. Contine in mod obisnuit informatii suplimentare despre elementul in care se afla (autorul articolului), legaturi catre documente asociate, drepturile de autor, etc.. Informatiile de contact ale autorului pot fi plasate intr-un element address in interiorul unui element footer.
- Utilizarea elementului nu este obligatorie;
- Poate fi utilizat de mai multe ori in pagina.
WAI-ARIA
Web Accessibility Initiative-Accessibile Rich Internet Applications, defineste modalitatea de a face mai accesibil continutul web si aplicatiile web, pentru persoanele cu dizabilitati.
Accesibilitatea continutului web se realizeaza prin intermediul informatiilor semantice despre widget-uri, structuri si comportamente, pentru a permite tehnologiilor de asistenta sa transmita informatii adecvate persoanelor cu dizabilitati.
Mai multe informatii gasiti aici:
🧠 Quiz - HTML: Structurarea paginilor