Kada naudoti <div> ir <span> žymes HTML žymėjime?

Žymės div ir span yra universali konteineriai, naudojami elementų grupavimui ir stilių taikymui.

• div (skyriaus): Bloko elementas. Sukuria naują eilutę prieš ir po savo turinio. Naudojamas didelių turinio sekcijų, tokių kaip antraštės, pagrindinis turinys, poriniai, šoninės juostos grupavimui. Naudojamas kuriant puslapio išdėstymą su CSS.

• span: Inline elementas. Neskiria naujos eilutės. Naudojamas mažų turinio dalių grupavimui vienoje eilutėje, pavyzdžiui, žodžių ar frazių. Naudojamas tam, kad tam tikram teksto fragmentui būtų pritaikytas stilius, nepažeidžiant aplinkinių elementų.

div naudojimo pavyzdys:

<!-- Svetainės antraštės sekcijos grupavimas -->
<div class="header">
  <h1>Logotipas</h1>
  <nav>
    <ul>
      <li>Nuoroda 1</li>
      <li>Nuoroda 2</li>
    </ul>
  </nav>
</div>

<!-- Pagrindinio turinio grupavimas -->
<div class="main-content">
  <article>
    <h2>Straipsnio pavadinimas</h2>
    <p>Straipsnio turinys...</p>
  </article>
</div>

span naudojimo pavyzdys:

<p>Tai įprastas tekstas su <span class="highlight">pabrėžtu</span> žodžiu.</p>

<style>
  .highlight {
    color: blue; /* Stiliaus taikymas tik žodžiui "pabrėžtu" */
    font-weight: bold;
  }
</style>

Šias žymes reikėtų naudoti su semantiškai tinkamomis klasėmis ar identifikatoriais, siekiant geresnio kodo skaitomumo ir priežiūros, taip pat stilizavimo ir DOM manipuliacijos tikslais. Svarbu vengti perteklinio div ir span naudojimo, kur labiau tinka semantiškesni HTML5 žymės, tokios kaip header, footer, article, nav, section.