Tag-ul de <main> este folosit pentru a delimita partea principala a unei pagini, adica acolo unde este continutul cel mai important din pagina.
Bineinteles ca am putea folosi un simplu tag de tip <div>, pentru ca este un tag foarte general si poate fi folosit in orice situatie. Dar este o idee mult mai buna sa folosim un tag modern care si explica ce rol are continutul lui.
Tag-ul de tip <main> poate fi folosit o singura data pe pagina, si cel mai bine este sa il punem sub header si inainte de footer, dar nu este obligatoriu.
Nimic din aceasta structura nu este obligatoriu, HTML este limbaj destul de permisiv, ne-am putea organiza elementele altfel. Dar aceasta structura are sens si e usor de citit, de aceea o folosim.
Intr-o pagina putem avea ceva continut si nu este o idee buna sa il aruncam pur si simplu pe tot in elementul <main>. Trebuie si acesta impartit in mai multe sectiuni si pentru aceasta avem cateva tag-uri de care ne putem folosi.
Separarea continutului
Daca de exemplu in pagina noastra am vrea sa afisam un articol mai lung avem un element HTML special de care ne putem folosi.
Este vorba de <article></article>.
In interiorul acestui element putem introduce orice continut dorim. Acest tag este deseori folosit atunci cand continutul din interiorul lui este de sine statator, adica, daca am indeparta orice alt tag HTML din pagina, si am lasa doar tag-ul de <article> si continutul sau, atunci pagina tot ar avea sens.
<header>
...
</header>
<main>
<article>
<h1>Cine suntem</h1>
<p>In acest articol vom explica ...</p>
...
</article>
</main>
<footer>
...
</footer>Un continut care se repeta
Dar daca am avea un continut care nu are sens singur ci doar impreuna cu alt continut, atunci am putea folosi elementul <section></section>.
Daca de exemplu am avea o pagina care are mai multe sectiuni cu link-uri catre diferite articole. Fiecare sectiune poate avea o imagine, un titlu, si o scurta descriere.
<main>
<h1>Lista de articole</h1>
<section>
<img src="" />
<h2>Articolul 1</h2>
<p>Scurta descriere ...</p>
</section>
<section>
<img src="" />
<h2>Articolul 2</h2>
<p>Alta descriere ...</p>
</section>
</main>
Vedem ca fiecare sectiune are legatura cu cealalta dar fiecare in parte (scoasa din context) nu are sens. Daca am lasa doar un element de tip <section></section> in pagina, nu prea am intelege care este rolul paginii sau ce vrea sa semnifice acea sectiune.
Asa ca elementul <section></section> ne arata continutul care nu este de sine stator si se bazeaza pe ce avem in jurul lui.
Acum, chiar daca acest tag este mai general, nu inseamna ca putem sa il folosim in orice caz.
Atunci cand vrem sa stilizam sau pur si simplu sa grupam anumite elemente putem folosi tagul <div></div>. Dupa cum am vorbit, este cel mai general tag care nu are nici un rol semantic si care poate fi folosit pentru aproape orice.
Elementul de tip <section></section> nu este atat de general si trebuie folosit cand elementele din interiorul lui sau au sens impreuna.
Continutul optional
Putem folosi un element special atunci cand vrem sa introducem in pagina si alte informatii care nu sunt legate de continutul principal. Pentru aceasta avem elementul <aside></aside>.
De exemplu daca in pagina avem un articol si am vrea sa scriem si cateva informatii despre autorul lui, am putea folosi acest element:
<aside>
<img src="" alt="O poza de profil al autorului" />
<h3>Nume Prenume</h3>
<p>O scurta desciere ...</p>
</aside>
Sau putem avea o lista cu link-uri catre articole ce au legatura cu cel din pagina. In mare, acesta este rolul elementului <aside></aside>: de a cuprinde continutul care este tangential continutului principal al paginii.