Când ar trebui să folosiți etichetele <div> și <span> în marcajul HTML?

Etichetele div și span sunt containere universale utilizate pentru gruparea elementelor și aplicarea stilurilor.

• div (diviziune): Element de bloc. Creează un rând nou înainte și după conținutul său. Este folosit pentru a grupa secțiuni mari de conținut, cum ar fi anteturi, conținut principal, subsoluri, panouri laterale. Se folosește pentru a crea aspectul paginii cu CSS.

• span: Element inline. Nu creează un rând nou. Este folosit pentru a grupa părți mici de conținut în interiorul unui rând, cum ar fi cuvinte sau fraze individuale. Se folosește pentru a aplica stil unui fragment de text fără a afecta elementele înconjurătoare.

Exemplu de utilizare a div:

<!-- Gruparea secțiunii de antet a site-ului -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Gruparea conținutului principal -->
<div class="main-content">
  <article>
    <h2>Titlul articolului</h2>
    <p>Conținutul articolului...</p>
  </article>
</div>

Exemplu de utilizare a span:

<p>Aceasta este un text obișnuit cu <span class="highlight">cuvânt evidențiat</span>.</p>

<style>
  .highlight {
    color: blue; /* Aplicarea stilului doar la cuvântul "evidențiat" */
    font-weight: bold;
  }
</style>

Aceste etichete trebuie utilizate cu clase sau identificatori semantic corespunzători pentru o mai bună lizibilitate și întreținere a codului, precum și pentru scopuri de stilizare și manipulare DOM. Este recomandat să se evite utilizarea excesivă a div și span, acolo unde sunt mai potrivite etichete HTML5 mai semantice (cum ar fi header, footer, article, nav, section).