Mikor kell az <div> és <span> tageket használni HTML-ben?

A div és span tagek univerzális konténerek, amelyeket elemek csoportosítására és stílusok alkalmazására használnak.

• div (osztály): Blokk elem. Új sort hoz létre a tartalom előtt és után. Nagy tartalmi szakaszok, például fejléc, fő tartalom, lábléc, oldalsávok csoportosítására használják. A CSS segítségével oldalelrendezést hoz létre.

• span: Soron belüli elem. Nem hoz létre új sort. Kis tartalomrészek, például szavak vagy kifejezések csoportosítására használják egy soron belül. A szöveg egy részének stílusozására alkalmazható anélkül, hogy befolyásolná a környező elemeket.

div használatának példája:

<!-- A weboldal fejléc szakaszának csoportosítása -->
<div class="header">
  <h1>Logó</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- A fő tartalom csoportosítása -->
<div class="main-content">
  <article>
    <h2>Cikk címe</h2>
    <p>Cikk tartalma...</p>
  </article>
</div>

A span használatának példája:

<p>Ez egy normál szöveg, benne <span class="highlight">kiemelt</span> szóval.</p>

<style>
  .highlight {
    color: blue; /* Csak a "kiemelt" szóra alkalmazza a stílust */
    font-weight: bold;
  }
</style>

Ezeket a tageket jelentésüknek megfelelő osztályokkal vagy azonosítókkal kell használni a kód olvashatóságának és karbantartásának javítása érdekében, valamint a stílusozás és DOM-műveletek céljából. Fontos elkerülni a div és span túlzott használatát, ahol a HTML5 semantikusabb tagei, például header, footer, article, nav, section jobban megfelelnek.