Када треба користити тагове <div> и <span> у HTML означавању?

Tagovi div i span su univerzalni kontejneri koji se koriste za grupisanje elemenata i primenu stilova.

• div (odeljak): Blok element. Kreira novi red pre i posle svog sadržaja. Koristi se za grupisanje velikih sekcija sadržaja, kao što su zaglavlja, glavni sadržaj, podnožja, bočne trake. Koristi se za kreiranje rasporeda stranice pomoću CSS-a.

• span: Inline element. Ne pravi novi red. Koristi se za grupisanje malih delova sadržaja unutar reda, kao što su pojedinačne reči ili fraze. Koristi se za primenu stila na određeni fragment teksta bez uticaja na okolne elemente.

Primer korišćenja div:

<!-- Grupisanje sekcije zaglavlja sajta -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Grupisanje glavnog sadržaja -->
<div class="main-content">
  <article>
    <h2>Naslov članka</h2>
    <p>Sadržaj članka...</p>
  </article>
</div>

Primer korišćenja span:

<p>Ovo je običan tekst sa <span class="highlight">istaknutom</span> rečju.</p>

<style>
  .highlight {
    color: blue; /* Primena stila samo na reč "istaknutom" */
    font-weight: bold;
  }
</style>

Ove oznake treba koristiti sa semantički odgovarajućim klasama ili identifikatorima radi bolje čitljivosti i održavanja koda, kao i za stilizaciju i manipulaciju DOM-om. Važno je izbegavati prekomernu upotrebu div i span, gde su prikladniji semantički HTML5 tagovi (kao što su header, footer, article, nav, section).