Containere

Păvă

Am parcurs câteva elemente de bază, dar nu am vorbit despre cum le organizăm pentru a crea layout-uri mai complexe. Aici intervin elementele de tip “container”.

#De ce avem nevoie de aceste elemente?

Fiecare pagina Web are un layout specific - adică o structură generală după care elementele sunt aranjate. Spre exemplu, pagina Mozilla Developer Network de mai jos are 4 mari secțiuni:

Pagina https://codepen.io/pen/ pe de altă parte e organizată diferit, în 3 secțiuni principale:

Aceste dreptunghiuri pe care noi le-am numerotat sunt elementele de tip container. Ele nu au o funcționalitate și nici stiluri specifice, ci sunt folosite ca să grupeze alte elemente, ușurând astfel crearea layout-ului. Deseori, numele lor ne va da un indiciu despre situațiile în care trebuie să le folosim. Mai jos le vom rezuma pe cele mai des folosite de noi:

#Header, Main și Footer

Așa cum sugerează și numele lor:

<body>
  <header> ... </header>
  <main> 
    ... 
  </main>
  <footer> ... </footer>
</body>

Elementul <header> grupează elemente aflate în antetul paginii (deseori în partea de sus). Des întâlnite aici sunt logo-ul, meniul de navigație, etc…
Elementul <main> este locul unde vom adăuga elementele ce reprezintă “esența” paginii noastre. Cu alte cuvinte, cea mai importantă parte din pagină trebuie să se afle în aceste element
Elementul <footer> grupează elementele aflate în “subsol”-ul paginii. De obicei vom găsi aici logo-ul cât și alte link-uri de navigație pentru pagini mai puțin importante din site-ul nostru

Cam orice pagina web are aceste 3 elemente (lăsăm mai jos 2 exemple).

#Nav

Așa cum îi spune și numele, aici vom grupa elemente de navigație către alte pagini din site-ul nostru. Spre exemplu, meniul lateral de navigație din această pagină se află într-un <nav> :

<nav>
  <ul>
    <li>
      <a href="https://FrontEnd.ro/html/containere#why">De ce avem nevoie de aceste elemente?</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#header-main-footer">Header, Main și Footer</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#nav">Nav</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#aside">Aside</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#article">Article</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#div">Div</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#importanta-containerelor">De ce e important ce container folosim?</a>
    </li>
    <li>
      <a href="https://FrontEnd.ro/html/containere#exercitii">Exerciții</a>
    </li>
  </ul>
</nav>

Open Sandbox

#Article

Este folosit pentru a marca un articol - cel mai des în bloguri sau site-uri de știri. Spre exemplu CSS Tricks are pe prima pagină 29 elemente de tip <article> .

#Section

Elementul <section> îl vom folosi pentru secțiuni generice dintr-un document/articol, fiecare cu titlul (heading) propriu.

În această pagină de exemplu, fiecare sub-capitol se află într-o secțiune proprie:

<article>
  <section>
    <h2> De ce e important ce container folosim? </h2>
    <p>
      ...
    </p>
  </section>
  <section>
    <h2> Exerciții </h2>
    <p>
      ...
    </p>
  </section>
</article>

#Div

Și am ajuns în sfârșit și la <div> , cel mai popular element de tip container iar din păcate, de multe ori folosit incorect.

Elementul <div> este un container generic, fără vreo însemnătate specială. Dacă <nav> ne sugerează elemente de navigație, sau <main> specifică că acolo e cea mai importantă parte a paginii, <div> nu reprezinta nimic deci ar trebui folosit doar cand nici unul din celelalte elemente de tip container nu are sens. Spre exemplu, în galeria de imagini de pe Unsplash elementul <div> e perfect ca și container pentru aceste elemente căci nu au vreo însemnătate specială, având nevoie de un container doar ca să le poziționăm în colțurile imaginii.

Exemplu de bună folosire a elementului <div>

#De ce e important ce container folosim?

La prima vedere ai putea crede că nu prea contează ce containere folosim. Nu au stilizări proprii și nici funcționalități specifice, deci cele doua snippet-uri de mai jos sunt identice din punct de vedere vizual și funcțional.

<body>
  <nav>
    <a href="/"> Home </a>
  </nav>
  <main>
    <p> Is there any difference? </p>
  </main>
</body>

<body>
  <div>
    <a href="/"> Home </a>
  </div>
  <div>
    <p> Is there any difference? </p>
  </div>
</body>

Totuși, problema devine evidentă atunci când încercăm să citim și să înțelegem cod ce nu folosește corect containerele. Spre exemplu, ce indicii despre layout și conținut îți oferă codul de mai jos?

<body>
  <div>
    <img src="logo" alt="logo">
    <div>
      <a href="/home"> Home </a>
      <a href="/profile"> Profile </a>
    </div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <p> Copyright 2021 </p>
  </div>
</body>

Hmm, din păcate codul de mai sus care folosește doar div-uri nu e foarte explicit. Ar trebui să pornim aplicația în browser ca să ne dăm seama de mai multe detalii.

Dar, dacă am încerca să folosim și alte containere?

 <body>
  <header>
    <img src="logo" alt="logo">
    <nav>
      <a href="/home"> Home </a>
      <a href="/profile"> Profile </a>
    </nav>
  </header>
  <main>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </main>
  <footer>
    <p> Copyright 2021 </p>
  </footer>
</body>

Deja lucrurile sunt mult mai clare 💪! Ne dăm ușor seama că avem un container în partea de sus (header) cu logo-ul și câteva linkuri de navigare, apoi partea principală a paginii ce conține o serie de articole, iar jos un footer cu informații de copyright.

Iar aici e esența folosirii corecte a containerelor. Nu pentru utilizatorii site-ului ci pentru colegii tăi developeri sau pentru tine din viitor, care vei citi codul și vei înțelege imediat despre ce e vorba!