HTML işarələməsində <div> və <span> etiketlərini nə zaman istifadə etməlisiniz?

div və span etiketləri elementləri qruplaşdırmaq və üslubları tətbiq etmək üçün istifadə olunan ümumi konteynerlərdir.

• div (bölmə): Blok elementi. Öz məzmunundan əvvəl və sonra yeni sətir yaradır. Böyük məzmun bölmələrini, məsələn, başlıqları, əsas məzmunu, ayaq hissələrini, yan panelləri qruplaşdırmaq üçün istifadə olunur. CSS ilə səhifənin tərtibatını yaratmaq üçün tətbiq edilir.

• span: Satır içi element. Yeni sətir yaratmır. Satır daxilində kiçik məzmun hissələrini, məsələn, sözləri və ya ifadələri qruplaşdırmaq üçün istifadə olunur. Mətnin müəyyən bir fraqmentinə stil tətbiq etmək üçün, ətrafdakı elementlərə təsir etmədən.

div nümunəsi:

<!-- Sayt başlığı bölməsinin qruplaşdırılması -->
<div class="header">
  <h1>Loqo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Əsas məzmunun qruplaşdırılması -->
<div class="main-content">
  <article>
    <h2>Məqalə başlığı</h2>
    <p>Məqalə məzmunu...</p>
  </article>
</div>

span nümunəsi:

<p>Bu, adi mətn və içində <span class="highlight">vurğulanmış</span> söz var.</p>

<style>
  .highlight {
    color: blue; /* Yalnız "vurğulanmış" sözünə stil tətbiq et */
    font-weight: bold;
  }
</style>

Bu etiketlər semantik uyğun siniflər və ya identifikatorlar ilə istifadə olunmalıdır ki, kodun oxunaqlığı və saxlanması yaxşılaşsın, həmçinin stil və DOM manipulyasiyası üçün. div və span-ın çox istifadəsindən çəkinmək, daha semantik HTML5 etiketləri (məsələn, header, footer, article, nav, section) istifadə etmək daha məqsədəuyğundur.