Antet și subsol
Prin intermediul elementelor header și footer se pot defini antetul și subsolul. Pentru a defini antetul, se folosește elementul head. Apropo, acest lucru nu trebuie neapărat să fie antetul întregii pagini. De asemenea, se poate marca antetul și altor elemente, cum ar fi secțiuni și articole, cu ajutorul elementului head.
Atenție: Nu confundați elementul header cu cunoscutul element head, care definește antetul documentelor HTML, în care sunt incluse titlul documentului, apelurile la fișierele de stil și JavaScript.
Pentru un document întreg, utilizarea elementului header ar arăta în felul următor:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Aplicat pe un element section, s-ar obține următoarea imagine:
<section>
<header>
<h1> Cum să creați aplicații web (Partea 09): jQuery mobile (1)</h1>
<p> jQuery este fără îndoială unul dintre cele mai cunoscute framework-uri JavaScript.</p>
</header>
<p>
Pe "clasicele" site-uri web, jQuery este deja folosit de mii de ori. Special conceput pentru utilizare în aplicațiile web, a fost creat framework-ul înrudit, jQuery mobile (jQM). Acest framework vă ajută să faceți ca aplicația web să pară ca o aplicație reală într-un timp scurt. Suficient de motivant pentru a examina în detaliu jQM-ul.
</p>
<footer>
<p>Copyright de la PSD-Tutorials.de</p>
</footer>
</section>Asigurați-vă întotdeauna că elementele footer și header nu trebuie să conțină elemente suplimentare header sau footer.
Grupează titlurile
În contextul secțiunilor, titlurile devin relevante. Aceste titluri pot fi inițial elementele tradiționale h1 până la h6. De asemenea, în HTML5, este permis și elementul hgroup. În interiorul acestor elemente hgroup, pot exista din nou multiple titluri.
Aruncăți o privire inițială asupra unui document HTML clasic, unde structura "obișnuită" este definită folosind elementele hx.
<h1>
Carte
</h1>
<h2>
Capitolul 1
</h2>
<h2>
Capitolul 2
</h2>
<h3>
Subcapitolul 2.1
</h3>
<h3>
Subcapitolul 2.2
</h3>
<h2>
Capitolul 3
</h2>
Această definiție înseamnă următoarea structură:
Carte
Capitolul 1
Capitolul 2
Subcapitolul 2.1
Subcapitolul 2.2
Capitolul 3
În browser, titlurile nu sunt indentate.
Elementul hgroup este interesant în special în contextul textelor jurnalistice. Acestea constau adesea dintr-un titlu format din două părți, compus din linia principală și linia superioară sau inferioară. Un exemplu va clarifica acest aspect.
<hgroup> <h1>Sistem de operare în cloud</h1> <h2>Web-ul ca sistem de operare</h2> </hgroup> <p>Aici începe conținutul articolului...</p>
În acest exemplu este clar că linia inferioară nu deschide un nou paragraf în cadrul articolului. Mai degrabă, este o parte a titlului articolului. Exact acest lucru poate fi sintetizat folosind elementul hgroup.
În cadrul elementului hgroup, elementele h1 până la h6 sunt permise.
Conceptul de Contur (Outline)
În plus, în HTML5 intervine conceptul de Contur (Outline), în care se discută despre interacțiunea dintre elementele section și cele diverse elemente hx. Conform acestui concept, așa cum era obișnuit până acum, titlurile sunt divizate în diferite niveluri de către elementele h1 până la h6. Astfel, h1 corespunde nivelului superior, în timp ce h6 reprezintă cel mai scăzut nivel. Deci, nu există schimbări în comparație cu situația anterioară. Acum, însă, elementele hx pot fi definite în interiorul elementelor section. Și de fiecare dată începe din nou numărătoarea, dar întotdeauna cu un nivel mai jos.
Conceptul de Contur poate părea complicat în specificația HTML5, dar ideea din spatele acestuia este extrem de simplă. De fapt, poate defini un rezumat al conținutului care face structura documentului ușor de înțeles pentru mașini.
Un exemplu în acest sens:
<h1>
Capitolul 1
</h1>
<section>
<h1>
Capitolul 2
</h1>
<section>
<h1>
Capitolul 3
</h1>
</section>
</section>
Prin conceptul Outline din HTML5 rezultă următoarea structură:
1. Capitolul 1
- Capitolul 2
- Capitolul 3
- Capitolul 3
Un alt exemplu va ilustra efectul. Aici, din nou, documentul inițial.
<section>
<h1>Instalare și Configurare</h1>
<section>
<h2>Instalare</h2>
<p>Toate detaliile despre instalare
</section> <section>
<h2>Configurare</h2>
<p>Aici găsiți toate detaliile despre configurare
</section>
<aside>
<p>Cărți interesante despre subiect...
</aside>
</section>
<footer>
<p>(c) de PSD-Tutorials.de
</footer>
</section>
Structura rezultată arată astfel:
1. Secțiune (Instalare și Configurare)
1.1 Secțiune (Instalare)
1.2 Secțiune (Configurare)
1.3 Secțiune (aside)
- Secțiune (footer)
Și încă un exemplu:
<body>
<h1>Instalare și Configurare</h1>
<h2>Instalare</h2>
<p>Toate despre instalare
...mai mult conținut...
<section>
<h3>Cerințe</h3>
<p>Toate despre cerințele de instalare
...mai mult conținut...
<h3>Pregătiri</h3>
<p>Toate despre pregătiri
...mai mult conținut...
<h2>Configurare</h2>
<p>Toate despre configurare
...mai mult conținut...
</section>
</body>
Structura rezultată arată astfel:
1. Instalare și Configurare
1.1 Instalare
1.1.1 Cerințe
1.1.2 Pregătiri
1.2 Configurare
Contorul intern va reîncepe de fiecare dată de la 1. Doar aceste elemente sunt afectate de conceptul Outline:
• article
• aside
• nav
• section
În schimb, elementele header și footer rămân în afara structurii.
Vă rugăm să rețineți că momentan conceptul Outline nu este încă suportat de browsere.
Însă este doar o chestiune de timp până când producătorii de browsere vor interveni. Beneficiile conceptului Outline ar fi considerabile. Gândiți-vă, de exemplu, la barele de navigare generate automat. Dar chiar și așa, chiar dacă structurarea în forma menționată este momentan ignorată de browsere, ar trebui să încercați deja să structurați logic documentele. Astfel vă asigurați în același timp o anumită siguranță pentru viitoarele dvs. site-uri web.
