Kedy by ste mali použiť značky <div> a <span> v HTML značkovaní?

Tagy div a span sú univerzálne kontajnery používané na skupinové prvky a aplikáciu štýlov.

• div (oddiel): Blokový prvok. Vytvára nový riadok pred a po svojom obsahu. Používa sa na skupinové veľké sekcie obsahu, ako sú hlavičky, hlavný obsah, pätičky, bočné panely. Používa sa na vytvorenie rozloženia stránky pomocou CSS.

• span: Inline prvok. Nevytvára nový riadok. Používa sa na skupinové malé časti obsahu v rámci riadku, ako sú jednotlivé slová alebo frázy. Používa sa na aplikáciu štýlu na určitý fragment textu bez ovplyvnenia okolitých prvkov.

Príklad použitia div:

<!-- Skupinovanie sekcie hlavičky stránky -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Odkaz 1</li>
      <li>Odkaz 2</li>
    </ul>
  </nav>
</div>

<!-- Skupinovanie hlavného obsahu -->
<div class="main-content">
  <article>
    <h2>Nadpis článku</h2>
    <p>Obsah článku...</p>
  </article>
</div>

Príklad použitia span:

<p>Toto je bežný text s <span class="highlight">zvýrazneným</span> slovom.</p>

<style>
  .highlight {
    color: blue; /* Aplikácia štýlu iba na slovo "zvýrazneným" */
    font-weight: bold;
  }
</style>

Tieto značky by mali byť používané s vhodnými sémantickými triedami alebo identifikátormi na lepšiu čitateľnosť a údržbu kódu, ako aj na účely štýlovania a manipulácie s DOM. Je dôležité vyhýbať sa nadmernému používaniu div a span, kde sú vhodnejšie sémantické HTML5 značky (napríklad header, footer, article, nav, section).