HTML / div ба span

div ба span

Semantic элементүүдийг сурсны дараа <div> ба <span> хэзээ хэрэглэх нь олонд тодорхойгүй байдаг. Энэ хичээлд тэдгээрийн зөв хэрэглээг тодруулна.

<div> — блок бүлэглэгч

<div> нь block-level элемент — шинэ мөрнөөс эхэлж, боломжит бүх өргөнийг эзэлнэ. Ямар ч семантик утга агуулдаггүй — зөвхөн бүлэглэх зориулалттай.

html

<!-- Блок элемент — дараагийнхаас доош шилжинэ -->
<div>Нэгдүгээр блок</div>
<div>Хоёрдугаар блок</div>

<span> — дотоод бүлэглэгч

<span> нь inline элемент — мөрийн дотор урсана, шинэ мөр үүсгэхгүй. Мөн ямар ч утга агуулдаггүй.

html

<!-- Inline — мөрийн дотор үлдэнэ -->
<p>
  Энэ бол <span>онцлох</span> үг агуулсан параграф.
</p>

Block ба inline харьцуулалт

html

<!-- div — блок: шинэ мөр эхэлнэ -->
<div style="background: #fee;">Эхний div</div>
<div style="background: #efe;">Хоёрдугаар div</div>

<!-- span — inline: мөрийн дотор урсана -->
<p>
  Монгол нийслэл
  <span style="color: red;">Улаанбаатар</span>
  хот юм.
</p>

Хэзээ <div> ашиглах вэ?

<div> нь semantic хувилбар байхгүй үед л зөв сонголт:

html

<!-- Карт grid — тохирох semantic элемент байхгүй -->
<div class="card-grid">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</div>

<!-- Modal — UI бүрдэл, semantic элемент байхгүй -->
<div class="modal" role="dialog" aria-modal="true">
  <div class="modal-header">
    <h2>Баталгаажуулах</h2>
  </div>
  <div class="modal-body">
    <p>Та энэ үйлдлийг хийхдээ итгэлтэй байна уу?</p>
  </div>
  <div class="modal-footer">
    <button type="button">Тийм</button>
    <button type="button">Үгүй</button>
  </div>
</div>

<!-- CSS layout зорилгоор бүлэглэх -->
<div class="flex-container">
  <main>...</main>
  <aside>...</aside>
</div>

Хэзээ <span> ашиглах вэ?

<span> нь текстийн нэг хэсгийг style хийх эсвэл JavaScript-ээр хянах шаардлагатай үед:

html

<!-- Үнийг онцлох -->
<p>Нийт дүн: <span class="price">15,000₮</span></p>

<!-- Тоог динамикаар өөрчлөх (JavaScript-ийн зорилттой) -->
<p>Таны XP: <span id="xp-count">0</span></p>

<!-- Нэр томьёог өнгөөр ялгах -->
<p>
  HTML нь <span class="keyword">HyperText Markup Language</span>-ийн товчлол.
</p>

<!-- Тэмдэгт эсвэл icon -->
<button>
  <span class="icon">✓</span>
  Хадгалах
</button>

Semantic элементийн эрэмбэ

Шийдвэр гаргах дараалал:

код

1. Semantic элемент байна уу? → Тийм бол тэрийг ашиглана
   header, nav, main, footer, article, section, aside,
   h1-h6, p, ul, ol, a, img, form, table...

2. Semantic хувилбар байхгүй үү?
   → Block зорилго бол <div>
   → Inline зорилго бол <span>

Практик жишээ

html

<!-- БУРУУ — semantic элемент байтал div ашиглах -->
<div class="navigation">
  <div class="nav-item"><a href="/">Нүүр</a></div>
</div>

<!-- ЗӨВ -->
<nav>
  <a href="/">Нүүр</a>
</nav>

<!-- БУРУУ — p байтал div ашиглах -->
<div class="text">Энэ параграф мөн.</div>

<!-- ЗӨВ -->
<p>Энэ параграф мөн.</p>

<!-- ЗӨВ — div-д тохирох semantic хувилбар байхгүй -->
<div class="card-grid">
  <article>...</article>
</div>

<!-- ЗӨВ — span-д тохирох inline semantic хувилбар байхгүй -->
<p>Үлдсэн хугацаа: <span id="timer">05:00</span></p>

CSS-тэй хослуулах

<div> ба <span>-ийн гол хэрэглээ нь CSS болон JavaScript-тай хосолсон ажиллагаа:

html

<!-- class → CSS-д style хийх -->
<div class="hero-section">
  <h1>Монгол хэлний код сургалт</h1>
  <p class="hero-subtitle">Үнэгүй, Монгол хэлээр</p>
  <a href="/courses" class="btn btn-primary">Эхлэх</a>
</div>

<!-- id → JavaScript-д ашиглах -->
<span id="live-count">0</span> хэрэглэгч онлайн байна

Нийтлэг алдаа

html

<!-- БУРУУ — div-ийн div-ийн div... хэт гүн давхарлалт -->
<div>
  <div>
    <div>
      <div>
        <p>Текст</p>
      </div>
    </div>
  </div>
</div>

<!-- ЗӨВ — шаардлагагүй div-уудыг арилгах -->
<p>Текст</p>

<!-- БУРУУ — span-д block элемент оруулах -->
<span>
  <h2>Гарчиг</h2>  ← HTML-д хүчингүй
</span>

<!-- ЗӨВ — span дотор зөвхөн inline агуулга -->
<span class="highlight">Онцлох текст</span>

Дараагийн хичээлд:

HTML-ийн global attribute-уудыг үзнэ: id, class, style, title, lang, hidden, tabindex, contenteditable, data-* гэх мэт бүх элементэд ашиглаж болдог attribute-уудын хэрэглээ.

← Өмнөх хичээлarticle, section, aside Дараах хичээл →HTML attribute-ууд