HTML markupida <div> va <span> teglari qachon ishlatiladi?

div va span teglari elementlarni guruhlash va uslublash uchun ishlatiladigan universal konteynerlardir.

• div (bo‘lim): Blok element. O‘z ichiga olganidan oldin va keyin yangi satr yaratadi. Katta bo‘limlarni, masalan, sarlavhalar, asosiy kontent, footerlar, yon panelalarni guruhlash uchun ishlatiladi. CSS yordamida sahifa maketini yaratish uchun qo‘llaniladi.

• span: Inline element. Yangi satr yaratmaydi. Satr ichidagi kichik qismlarni, masalan, so‘zlar yoki iboralarni guruhlash uchun ishlatiladi. Matnning ma’lum bir fragmentiga stil berish uchun, atrofdagi elementlarga ta’sir qilmasdan.

div ning misoli:

<!-- Sayt sarlavhasi bo‘limini guruhlash -->
<div class="header">
  <h1>Logotip</h1>
  <nav>
    <ul>
      <li>Havola 1</li>
      <li>Havola 2</li>
    </ul>
  </nav>
</div>

<!-- Asosiy kontentni guruhlash -->
<div class="main-content">
  <article>
    <h2>Ma’lumot sarlavhasi</h2>
    <p>Ma’lumotlar...</p>
  </article>
</div>

span ning misoli:

<p>Bu oddiy matn va ichida <span class="highlight">ta’kidlangan</span> so‘z bor.</p>

<style>
  .highlight {
    color: blue; /* Faqat "ta’kidlangan" so‘ziga uslub qo‘llash */
    font-weight: bold;
  }
</style>

Ushbu teglar semantik jihatdan mos keladigan sinflar yoki identifikatorlar bilan ishlatilishi, kodning o‘qilishi va texnik xizmat ko‘rsatishni yaxshilash uchun muhimdir, shuningdek, stil va DOM bilan manipulyatsiya qilish uchun. div va span ning ortiqcha ishlatilishidan saqlanish tavsiya etiladi, ularning o‘rniga HTML5 ning semantikroq teglaridan foydalanish ma’qul (masalan, header, footer, article, nav, section).