Veb rivojlanish kontekstida semantika nima?

Veb dasturlashda semantik HTML teglaridan foydalanish ularning ma'nosiga muvofiq bo'lishi kerak, nafaqat uslublash uchun emas. Bu, kontentning tuzilishi va ma'nosini tavsiflashga yordam beradi, veb-sahifa brauzerlar, qidiruv tizimlari, ekran o'quvchilar va boshqa parserlar uchun yanada tushunarli bo'lishini ta'minlaydi.

Semantik belgilashning asosiy afzalliklari:

• Kirish imkoniyati: Ekran o'quvchilarni ishlatadigan nogironlar uchun sayt bilan o'zaro aloqani yaxshilaydi.
• SEO: Qidiruv tizimlariga sahifa tuzilishi va mazmunini yaxshiroq tushunishga yordam beradi, bu esa reytingga ijobiy ta'sir qiladi.
• Texnik xizmat ko'rsatish: Kodni o'qilishi va tushunilishi osonroq qiladi.
• Moslashuvchanlik: Kontentning turli qurilmalarda va brauzerlarda to'g'ri ko'rsatilishini ta'minlaydi.

HTML5 da semantik teglarning misollari:

• <header>: Hujjat yoki ma'lum bir bo'lim uchun kirish yoki navigatsiyani ifodalaydi.
• <nav>: Navigatsiya havolalari guruhini ifodalaydi.
• <main>: Hujjatning asosiy mazmunini ifodalaydi.
• <article>: To'liq va mustaqil mazmun bo'lagi, u mustaqil tarqatilishi mumkin (masalan, blog yozuvi, yangilik).
• <section>: Hujjatda mustaqil bo'limni ifodalaydi.
• <aside>: Asosiy mazmunga bilvosita bog'liq bo'lgan kontentni ifodalaydi (masalan, yon panel).
• <footer>: Hujjat yoki bo'lim uchun pastki qism.
• <figure> va <figcaption>: Media elementini (rasm, diagram va boshqalar) va uning tavsifini ifodalaydi.
• <time>: Sana va vaqtni ifodalaydi.

Semantik va semantik bo'lmagan yondashuvlarni taqqoslash:

Semantik bo'lmagan yondashuv	Semantik yondashuv
<div> va <span> dan foydalanish	Maxsus teglar (<header>, <nav>, <article>) dan foydalanish
Tuzilmani sinflar (class="header") yordamida tavsiflash	Tuzilmani to'g'ridan-to'g'ri tavsiflovchi teglar yordamida tavsiflash
CSSga bog'liqlik	HTML kodidan tuzilmani tushunish mumkin

Semantik bo'lmagan markup misoli:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Bosh sahifa</a></li>
      <li><a href="#">Haqida</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Sarlavha</h2>
    <p>Mazmun...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Semantik markup misoli:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Bosh sahifa</a></li>
      <li><a href="#">Haqida</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Sarlavha</h2>
    <p>Mazmun...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Semantik markup CSS bilan uslublash uchun o'rnini bosmaydi, lekin HTML hujjatini turli kontent iste'molchilari uchun yanada ma'lumotli va foydali qiladi.