HTML & CSS pentru începători (Partea 19): Semantica pentru web (2)

În prezent, documentele HTML sunt structurate în general folosind elemente div. Formatarea și poziționarea acestor containere sunt de obicei realizate cu CSS. Pentru software-urile precum cititoarele de ecran, acest proces este inutil deoarece nu pot recunoaște care este semnificația anumitor conținuturi. Acest lucru ar trebui să se schimbe prin introducerea noilor elemente de structurare.

Două dintre cele mai importante elemente noi sunt section și article, care sunt în centrul atenției în acest tutorial.

Etichetarea articolelor

Prin intermediul elementului article se pot marca texte (contribuții pe forumuri, articole de știri etc.) ca fiind articole. Exemplul următor arată definirea unui articol tipic.

<article>
   <h1>Crearea aplicațiilor web (Partea 09): jQuery mobil (1)</h1>
   <p&gt>jQuery este fără îndoială unul dintre cele mai cunoscute framework-uri JavaScript. Prin urmare, jQuery este deja folosit în miile pe site-urile „clasice”...</p>
   ...
</article>

Datorită elementului article, puteți structura conținuturile dvs. semantic.

Cum poate arăta acest lucru poate fi ilustrat foarte frumos printr-un blog.

<article>
  <header>
    <h1>Crearea aplicațiilor web (Partea 09): jQuery mobil (1)</h1>
    <p>Publicat la: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p&gt>jQuery este fără îndoială unul dintre cele mai cunoscute framework-uri JavaScript. Prin urmare, jQuery este deja folosit în miile pe site-urile „clasice”...</p>
  ...
  <footer>
    <p><small>Drepturi de autor de la PSD-Tutorials.de</small></p>
  </footer>
</article>

În acest exemplu, în cadrul elementului article se face o despărțire destul de tipică în domeniul de sus-, principal și de jos. Și o astfel de diviziune este întâlnită foarte des în bloguri.

Crearea secțiunilor

Continuăm cu elementul section. Elementul section împarte pagina în diferite secțiuni. Acestea pot fi secțiuni, capitole, file sau alte asemenea. Prin intermediul section se poate separa logic zone precum introducerea și știrile curente.

Section este folosit pentru a împărți conținuturile după criterii reale de conținut. O să vorbesc despre diferența dintre section și div la finalul acestui tutorial.

Exemplul următor arată o structură tipică de blog. Cu toate acestea, această structură mai conține ceva ce este necesar în multe bloguri, și anume o secțiune de comentarii. Această secțiune de comentarii este definită în cadrul unui element section. Comentariile individuale din cadrul secțiunii section sunt înconjurată de câte un element article.

<article>
  <header>
    <h1>Crearea aplicațiilor web (Partea 09): jQuery mobil (1)</h1>
    <p>Publicat la: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>>jQuery este fără îndoială unul dintre cele mai cunoscute framework-uri JavaScript. Prin urmare, jQuery este deja folosit în miile pe site-urile „clasice”...</p>
  ...

  <section>
    <h2>Comentarii</h2>
    <article>
      <header>
      <h3>Comentat de: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Cu o oră în urmă</time></p>
    </header>
    <p>Mulțumesc pentru tutorial!</p>
    </article>
    <article>
      <header>
      <h3>Comentat de: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Cu două ore în urmă</time></p>
    </header>
    <p>Foarte util! Acest lucru mă ajută în continuare.</p>
    </article>
  </section>
</article>

Aici încă o dată menționez că voi discuta detalii despre elementele folosite aici, cum ar fi header, footer, etc. la finalul acestui tutorial. Până acum doar atât: Prin aceste elemente se pot separa conținuturile în domeniul de sus și jos, permitând o structurare logică suplimentară a documentelor.

Un alt exemplu arată cum se poate clarifica și mai mult combinarea elementelor article și section. De fapt, este posibil să utilizăm elementul section pentru a împărți un articol în zone logice de conținut, fiecare cu propriile sale antete.

<article> 
  <h1>Dezvoltarea aplicațiilor</h1> 
  <p>Aici aflați cum să creați aplicații web.</p>
  <section> 
     <h2>Crearea aplicațiilor web (Partea 09): jQuery mobil (1)</h2> 
     <p>jQuery este fără îndoială unul dintre cele mai cunoscute framework-uri JavaScript.</p> 
   </section> 
  <section> 
     <h2>Crearea aplicațiilor web (Partea 08): Ghid rapid pentru jQuery</h2> 
     <p>JavaScript este un lucru minunat pentru site-urile web, deoarece permite tot felul de lucruri interesante.</p> 
   </section> 
 </article>

De asemenea, este posibil ca în cadrul unui element section să se definească elemente article. Un exemplu tipic ar putea fi o secțiune pentru comentarii, așa cum a fost prezentat deja. Totuși, este posibilă, de asemenea, separarea secțiunii în domeniile tematice tratate în blog.

De asemenea, iată un exemplu corespunzător pentru acest lucru:

<section> 
  <h1>Dezvoltare de aplicații</h1>
  <article> 
     <h2>Crearea de aplicații web (Partea 09): jQuery mobile (1)</h2> 
     <p>jQuery este fără îndoială unul dintre cele mai cunoscute cadre JavaScript.</p> 
   </article> 
  <article> 
     <h2>Crearea de aplicații web (Partea 08): Începerea rapidă cu jQuery</h2> 
     <p>JavaScript este foarte util pentru site-urile web, permițând realizarea a diverse lucruri interesante.</p> 
   </article>    
 </section>

De asemenea, într-un element section pot fi incluse alte elemente section. Încorporările sunt deci permise. Iată și un exemplu pentru aceasta:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Bun venit</h2>     
      <p>Ne bucurăm...</p>
    </section>   
    <section>     
      <h2>Tutoriale</h2>
      <P>Aici aveți cele mai noi tutoriale...</p> 
    </section>
    <aside>
      <p>Contact</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Această încorporare a section-urilor oferă următoarea structură:

1. PSD-Tutorials.de

1.1 Bun venit

1.2 Tutoriale

1.3 Contact

2. (c) 2014 PSD-Tutorials.de
   
   Astfel de structurări sunt de asemenea posibile.
   
   

Diferența dintre div, article și section

Este recunoscut faptul că nu este chiar simplu să se facă distincția dintre div, article și section. De fapt, elementul article a fost definit în principal pentru structurarea postărilor din blog. Elementul section este plasat efectiv sub article. În cadrul elementului section ar trebui întotdeauna să fie definită o antetă. Chiar dacă în mod eficient nu se definește niciun antet, ar trebui să fie teoretic posibil să se specifice unul în cadrul elementului respectiv.

Bineînțeles că elementele div nu sunt proscrise nici în HTML5, ci trebuie încă să fie folosite. Acestea sunt interesante, de exemplu, atunci când este vorba să se grupă elemente.

În final, încă o dată, menționăm efectele optice ale elementelor prezentate până acum. De fapt, pentru o formatare corespunzătoare aveți nevoie de CSS. Utilizarea normală a elementelor prezentate nu are niciun efect în browser. Structurați aici conținutul strict semantic. Tot ce ține de aspect este reglat prin foi de stiluri.