Curs Web Development
Curs HTML
Curs CSS
Curs Javascript
Curs PHP
Curs Phyton
Curs SQL
Curs SEO

Algoritmul de prezentare a documentelor web

HTML 5 outline algorithm

In HTML 4, utilizarea etichetelor div pentru a construi si descrie un document avea multe limitari. In primul rind div-urile actioneaza ca elemente de tip bloc ceea ce nu este neaparat rau, pina cind incepem sa imbricam mai multe div-uri. Odata imbricate mai multe div-uri, este foarte greu sa facem diferenta intre div-urile utilizate in scop de prezentare si cele utilizate in scopul sectionarii paginii si gruparii continutului in sectiuni, fara a utiliza clase si id-uri. De asemenea, nu era posibil in HTML 4, sa definim sectiuni cu informatii, care sa se refere la tot site-ul ca un intreg.

HTML 5 a introdus aceste noi elemente semantice care sa ajute la o mai buna structurare a documentelor: header, hgroup, article, section, aside, footer, nav si altele. Menirea acestor elemente noi nu era de a inlocui vechiul div ci de a lucra impreuna cu acesta si cu titlurile (heading's) in vederea unei mai bune organizari a continutului paginilor web si a modului de relationare intre diferitele tipuri de continut din pagina. In mod traditional structura si sectionarea documentelor(document outline), era creata cu ajutorul etichetelor h1-h6.

Algoritmul pleaca de la eticheta "body", aceasta fiind considerata radacina documentului, apoi parcurge documentul trecind prin toate nodurile, pentru a stabili structura. De fiecare data cind o noua sectiune este gasita, aceasta este utilizata pentru a crea schematic structura documentului. Daca sectiunea are un titlu, acesta este utilizat ca nume al sectiunii respective.

O lunga perioada de timp, specificatiile HTML 5 sustineau ca dezvoltatorii nu mai trebuie sa tina cont de ce numar are eticheta heading(titlu h1-h6), atunci cind se utilizeaza impreuna cu elementele de sectionare. Ce conta era nivelul de imbricare a acestor titluri in elementele de sectionare. Acest concept a fost anuntat cu surle si trambite in tot felul de carti, articole, discursuri de specialitate. De fapt acest algoritm nu a fost implementat in totalitate niciodata de toate browserele si chiar mai mult, HTML 5.2 nu recomanda utilizarea acestui algoritm.

Stim ca ar trebui sa utilizam HTML 5 pentru a construi site-uri, dar mai stim ca o parte destul de greu de inteles este cea legata de impartirea continutului documentelor folosind noile etichete: section, article, aside si nav. Pentru a intelege cum sa folosim aceste noi etichete trebuie sa intelegem cit se poate de bine algoritmul de prezentare a documentului.

Intelegerea algoritmului de prezentare a documentelor poate fi o provocare, dar in final merita tot efortul. Nu va veti mai intreba daca sa utilizati eticheta "section" sau eticheta "div" - veti sti imediat sa faceti alegerea corecta. Mai mult decit atit veti sti de ce sunt folosite aceste elemente, iar aceasta cunoastere a semanticii este cel mai mare beneficiu cu care veti ramine in urma invatarii modului in care functioneaza algoritmul.

Ce este algoritmul de prezentare a documentelor? Este un mecanism de generare a structurii schematice(un rezumat, o schita) a paginii web, bazat pe modul in care sunt marcate elementele din pagina. Fiecare pagina web are o structura si devoalarea acestei structuri o vom face utilizind aplicatia de mai jos.

Sa incepem un sir de exemple care sa ne ajute sa intelegem modul de functionare al algoritmului de prezentare.

Sa ne imaginam urmatoarea structura:

1 Comercializam bauturi
  1.1 Bere
      1.1.1 Blonda de Vaslui
      1.1.2 Bruneta de Birlad
      1.1.3 Roscata de Bacau
  1.2 Vin
      1.2.1 Feteasca neagra
      1.2.2 Muscat
      1.2.3 Tamaioasa

O structura simpla, curata, usor de citit, cu o ierarhie clara. Pentru a face lucrurile si mai simple, va voi spune ca doar doua lucruri influenteaza schita unui document:

Evident, sectionarea continutului este noul mod de a realiza structura unei pagini in HTML 5, dar sa vedem inainte de asta cum ar trebui sa folosim titlurile pentru a ajunge la aceasta structura.

class="m1r"

Crearea structurii folosind titlurile (h1-h6)

Pentru a crea structura de mai sus am putea sa folosim urmatorul marcaj:

<div>
  <h1>Comercializam bauturi</h1>
    <h2>Bere</h2>
      <h3>Blonda de Vaslui</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <h3>Bruneta de Birlad</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <h3>Roscata de Bacau</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <h2>Vin</h2>
      <h3>Feteasca neagra</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      <h3>Muscat</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      <h3>Tamaioasa</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  <p>Toate bauturile comercializate de firma noastra au certificat de calitate!</p>
</div>

Atit de simplu este. Structura de mai sus este creata cu ajutorul titlurilor de diferite marimi. Pentru a verifica schita documentului, copiati codul de mai sus si lipiti codul in fereastra din stanga a analizatorului semantic HTML:

Deschide analizatorul semantic in fereastra noua.

O structura creata cu ajutorul etichetelor H1-H6, genereaza sectiuni implicite. Fiecare titlu creeaza o sectiune implicita proprie, iar orice titlu nou de nivel inferior celui precedent, creeaza o alta sectiune proprie imbricata in sectiunea superioara (parinte).

O sectiune implicita se incheie cind in structura apare un alt titlu de acelasi nivel sau de nivel superior. In exemplul nostru sectiunea "Bere", se termina cind incepe sectiunea "Vin" si fiecare sectiune care contine informatii despre un anumit tip de bere, se incheie cind incepe urmatoarea sectiune cu un alt tip de bere.

Mai jos puteti vedea un exemplu clar de sectiune implicita care se termina cu un titlu de acelasi nivel si o alta sectiune care se termina cu un titlu de nivel superior.

<div>
   <!‐‐ Start sectiune implicita ‐‐>
    <h3>Blonda de Vaslui</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   <!‐‐ Aici incepe o noua sectiune implicita, astfel ca sectiunea de mai sus este inchisa ‐‐>
    <h3>Bruneta de Birlad</h3> 
</div>

<div>
  <!‐‐ Start sectiune implicita ‐‐>
    <h3>Blonda de Vaslui</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <!‐‐ Aici incepe o noua sectiune implicita, cu un titlu de nivel superior ‐‐>
    <h2>Bruneta de Birlad</h2> 
</div>

Crearea structurii folosind elemente de sectionare

Dupa ce am vazut cum se poate crea o structura folosind titlurile, sa marcam pagina din nou, de data aceasta folosind elementele de sectionare din HTML 5:

<div>
  <h6>Comercializam bauturi</h6>
     <section>
      <h1>Bere</h1>
         <article>        
          <h1>Blonda de Vaslui</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </article>
         <article>
          <h5>Bruneta de Birlad</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </article>
         <article>
          <h2>Roscata de Bacau</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </article>
     </section>       
     <section>
      <h6>Vin</h6>
         <article>
          <h3>Feteasca neagra</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
         </article>
         <article>
          <h3>Muscat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
         </article>
         <article>
          <h1>Tamaioasa</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
         </article>
      </section>
    <p>Toate bauturile comercializate de firma noastra au certificat de calitate!</p>
</div>

Nu am ales titlurile in acest fel, pentru ca am luat-o razna, ci pentru a face un lucru cit se poate de evident si anume ca de data aceasta, structura este data de elementele de sectionare si nu de titluri.

Copiati codul de mai sus si lipiti-l din nou in analizatorul semantic si veti vedea ca titlurile nu au niciun efect asupra structurii paginii. Elementele section, article, aside si nav sunt cele care dau conturul paginii si in acest caz se numesc sectiuni explicite.

Una din cele mai discutate caracteristici ale HTML5 este aceea ca, sunt permise mai multe titluri H1 si acum ati putut vedea de ce. Nu este o invitatie deschisa de a marca fiecare titlu cu eticheta H1, ci o recunoastere a faptului ca structura documentului, este creata cu ajutorul elementelor de sectionare si acum, fiecare sectiune are propria structura de titluri.

Specificatiile HTML 5 despre titluri si sectiuni sunt foarte clare in acest sens:

☞ Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Secțiunile pot conține titluri de orice rang, dar autorii sunt încurajați să folosească doar elemente H1, sau să utilizeze elemente de rang adecvat pentru nivelul de imbricare al secțiunii.

Pina cind browserele si mai ales screen-readers, vor implementa si vor intelege ca elementele de sectionare, creeaza sub-sectiuni, utilizarea de titluri multiple H1, este mai putin sigura in comparatie cu utilizarea unei structuri de titluri, care reflecta in mod logic continutul documentului, asa cum puteti vedea mai jos:

<div>
  <h1>Comercializam bauturi</h1>
     <section>
      <h2>Bere</h2>
         <article>
          <h3>Blonda de Vaslui</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </article>
         <article>
          <h3>Bruneta de Birlad</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </article>
         <article>
          <h3>Roscata de Bacau</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         </article>
     </section>
     <section>
      <h2>Vin</h2>
         <article>
          <h3>Feteasca neagra</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
         </article>
         <article>
          <h3>Muscat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
         </article>
         <article>
          <h3>Tamaioasa</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        </article>
      </section>

      <p>Toate bauturile comercializate de firma noastra au certificat de calitate!</p>
  </div>

Trebuie sa va atrag atentia asupra paragrafului: "Toate bauturile comercializate de firma noastra au certificat de calitate!". In exemplul care utilizeaza corect titlurile, acest paragraf este o parte implicita a sectiunii create de titlul "Tamaioasa". Screen-readers vor vedea clar ca acest text se aplica intregului document si nu doar sectiunii "Tamaioasa".

In exemplul creat cu elemente de sectionare, aceasta chestiune este rezolvata destul de simplu, prin mutarea paragrafului la nivelul de top "Comercializam bauturi".

Sa mixam putin structurile

Sa vedem ce se intimpla atunci cind sectiunile implicite si sectiunile explicite sunt combinate. Atita timp cit va amintiti ca sectiunile implicite pot fi incluse in sectiuni explicite, dar nu si invers, veti fi bine. De exemplu urmatoarea structura functioneaza bine si este perfect corecta:

<h1>Comercializam bauturi</h1>
 
  <section>
    <h2>Vin</h2>

        <h3>Feteasca neagra</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

        <h3>Muscat</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

        <h3>Tamaioasa</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

  </section>

Structura creata este cea de mai jos:

1 Comercializam bauturi
    1.1 Vin
        1.1.1 Feteasca neagra
        1.1.2 Muscat
        1.1.3 Tamaioasa

Cu toate acestea, sa nu sperati sa obtineti aceeasi structura, prin inserarea unei sectiuni explicite in interiorul unei sectiuni implicite. Nu va functiona!

Elementul de sectionare <article> va inchide pur si simplu sectiunea implicita creata de titlu si va crea o structura foarte diferita, dupa cum puteti vedea mai jos:

<div>
    <h1>Comercializam bauturi</h1>

      <h2>Vin</h2>
       <article>
          <h3>Feteasca neagra</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
       </article>
       <article>
          <h3>Muscat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
       </article>
       <article>
          <h3>Tamaioasa</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
       </article>

      <p>Toate bauturile comercializate de firma noastra au certificat de calitate!</p>
  </div>

Codul de mai sus va produce urmatoarea structura:

1 Comercializam bauturi
    1.1 Vin
    1.2 Feteasca neagra
    1.3 Muscat
    1.4 Tamaioasa

Nu exista nicio modalitate de a face sectiunile explicite create de eticheta article, sa devina sub-sectiuni ale sectiunii implicite "Vin". Se pot utiliza titluri pentru a aranja continutul elementelor de sectionare dar nu si invers.

Important de urmarit

Sectiunile fara titlu

Pina acum nu am discutat deloc despre etichetele nav si aside, dar trebuie sa stiti ca acestea au un comportament similar cu etichetele section si article.

Daca aveti in pagina continut secundar, care este legat de tema principala, sa zicem, in cazul exemplului nostru, tehnici de obtinere a bauturilor, ati putea marca acest continut cu eticheta aside, ceea ce va duce la crearea unei sectiuni explicite.

Nu este absolut necesar sa utilizati titluri pentru nav si aside, astfel ca acestea vor genera sectiuni fara titlu (Untitled Sections).

Incercati urmatorul cod in analizatorul semantic:

<div>
   <nav>
     <ul>
       <li><a href="#">Acasa</a></li>
       <li><a href="#">Bere</a></li>
       <li><a href="#">Vin</a></li>
     </ul>
   </nav>

  <h1>Comercializam bauturi</h1>

    <section>
       <h2>Bere</h2>
    </section>
    <section>
       <h2>Vin</h2>
    </section>
</div>

Elementul nav, apare ca sectiune fara titlu ceea ce nu este neaparat grav si nu este considerata o greseala in HTML 5. Cu toate acestea se recomanda folosirea titlurilor pentru fiecare element de sectionare din document, motivul principal fiind cresterea accesibilitatii.

In schimb utilizarea elementelor section si article, fara titluri trebuie evitata cu desavirsire.

Daca nu stiti cind anume sa utilizati cele doua etichete, o regula buna este sa urmariti logica documentului, sa vedeti daca acest lucru se impune. Daca nu, atunci, cel mai intelept ar fi sa utilizati vechiul div.

Specificatiile HTML 5 nu stipuleaza foarte clar ca elementele de sectionare ar trebui sa aiba un titlu:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Insa, interpretarea pe care eu o dau textului de mai sus, referindu-ma in special la "typically with a heading"(de obicei cu un titlu), este ca mi-ar trebui un motiv al naibii de bun, ca sa nu folosesc un titlu pentru sectiuni. Nicidecum nu pot sa inteleg, ca ar trebui sa ignor utilizarea titlurilor impreuna cu elementele noi din HTML 5.

Totusi, specificatiile merg chiar mai departe si dau un exemplu de folosire a etichetei article, ca marcaj pentru sectiunea de comentarii a unui blog, bineinteles fara titlu. Deci exista si exceptii. In concluzie, atunci cind utilizati in pagina etichetele "section" si "article", asigurati-va ca aveti un motiv intemeiat pentru care sa nu utilizati si un titlu.

Sectiuni radacina

Daca ati fost atenti, am spus ca elementele de sectionare nu pot crea o sub-sectiune a unei sectiuni implicite, dar in ultimul exemplu, titlul H1 - "Comercializam bauturi", neinclus in nicio sectiune, este urmat imediat de sectiunea "Bere" si continutul acestei sectiuni este de fapt o sub-sectiune pentru titlul H1.

Moivul pentru care se intimpla acest lucru se datoreaza sectiunilor radacina. Sectiunile radacina creeaza in document propria structura separata de restul continutului si nu au stramosi(parinti). Dupa cum indica si specificatiile, elementele de sectionare, creeaza sub-sectiuni ale stramosului radacina cel mai apropiat sau sub-sectiuni ale celui mai apropiat element de sectionare parinte(ancestor):

☞ Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest.

Elementele de secționare a conținutului, sunt considerate întotdeauna subsecțiuni, ale celui mai apropiat element rădăcina sau cel mai apropiat element de sectionare, oricare dintre acestea este cel mai apropiat.

Elementul body este un element radacina.

De exemplu, in codul de mai jos, titlul H1 este titlu radacina, iar elementul "section", este o sub-sectiune a elementului radacina "body":

<h1>Comercializam bauturi</h1>

  <section>
    <h2>Vin</h2> 

      <h3>Feteasca neagra</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

      <h3>Muscat</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

      <h3>Tamaioasa</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

  </section>

Mai sunt alte cinci elemente radacina:

Un lucru important de precizat este acela ca, desi aceste elemente pot avea in interiorul lor o structura proprie de titluri si sectiuni, aceasta structura nu va influenta in niciun fel structura stramosilor lor.

In sfirsit, un ultim lucru despre elementul radacina, care va aduce putina bucurie, este acela ca primul titlu din document care nu se afla in interiorul unui element de sectionare, este cel care va da titlul documentului. Verificati codul de mai jos in analizatorul semantic.

<section>
  <h1>Acesta este un titlu H1.</h1>
</section>

  <h6>Acest titlu H6 este primul in afara sectiunii.</h6>

  <h1>Acest titlu H1 este ultimul.</h1>

Elemente fara titlu(Untitled Documents)

Daca nu exista niciun titlu in radacina documentului(exceptind interiorul elementelor de sectionare implicite), atunci documentul insusi va fi fara titlu. Aceasta problema este destul de serioasa si poate sa apara fie din neglijenta, fie, paradoxal, din prea multa atentie acordata modului in care ar trebui utilizate elementele de sectionare.

In concluzie

Logica din spatele algoritmului de prezentare a documentelor, poate fi greu de inteles iar specificatiile sunt si ele destul de greu de inteles, chiar si dupa lecturi repetate.

Totusi, daca retineti notiunile de baza, cum ar fi faptul ca elementele section, article, aside si nav, creeaza sub-sectiuni in documentul web, atunci sunteti pe calea cea buna in proportie de 90%.

Este bine ca dupa ce marcati continutul cu elemente de sectionare sa verificati rezultatul intr-un analizator semantic sau folosind alte unelte din editorul de text, pentru ca, prin cit mai multa practica si exercitiu, veti ajunge sa intelegeti foarte bine algoritmul de prezentare. Odata ce ati inteles algoritmul, fiecare pagina web pe care o veti crea, va fi bine structurata semantic si robusta.

🧠 Quiz - HTML: Algoritmul de conturare a documentelor

Depanarea codului HTML ➔

Top