Kdy by měly být v HTML značkách použity <div> a <span>?

Tagy div a span jsou univerzální kontejnery používané k seskupování prvků a aplikaci stylů.

• div (oddíl): Blokový prvek. Vytváří nový řádek před a po svém obsahu. Používá se k seskupování velkých sekcí obsahu, jako jsou hlavičky, hlavní obsah, patičky, boční panely. Používá se k vytváření rozvržení stránky pomocí CSS.

• span: Inline prvek. Nevytváří nový řádek. Používá se k seskupování malých částí obsahu uvnitř řádku, například jednotlivých slov nebo frází. Používá se k přiřazení stylu určitému fragmentu textu bez ovlivnění okolních prvků.

Příklad použití div:

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

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

Příklad použití span:

<p>Toto je běžný text s <span class="highlight">zvýrazněným</span> slovem.</p>

<style>
  .highlight {
    color: blue; /* Aplikace stylu pouze na slovo "zvýrazněným" */
    font-weight: bold;
  }
</style>

Tyto značky by měly být používány s vhodnými sémantickými třídami nebo identifikátory pro lepší čitelnost a údržbu kódu, stejně jako pro účely stylování a manipulace s DOM. Je důležité se vyvarovat nadměrného používání div a span, tam kde jsou vhodnější sémantické značky HTML5 (například header, footer, article, nav, section).