HTML semantik teglar (header, nav, main, footer)

HTML element nomi mazmunning vazifasini aytsa, u semantik hisoblanadi. <nav> kodni o’qigan odam va yordamchi texnologiyaga bu navigatsiya ekanini bildiradi. <div> esa faqat umumiy konteyner bo’lib, ichidagi mazmun haqida hech narsa aytmaydi.

Shu paytgacha ishlatgan sarlavha, ro’yxat va jadval ham semantik elementlardir — endi ular bilan butun sahifa skeletini quramiz.

Bu dars yakunida sahifani ma’noli bo’limlarga ajratasiz, section va article farqini tushunasiz, <div> qachon kerakligini bilasiz va asosiy accessibility landmarklarini to’g’ri ishlatasiz.

Asosiy semantik bo’limlar

<header>Sayt sarlavhasi va yordamchi boshqaruvlar</header>
<nav>Asosiy havolalar</nav>
<main>Sahifaning noyob asosiy mazmuni</main>
<aside>Asosiy mazmunga yordamchi ma'lumot</aside>
<footer>Mualliflik, aloqa va yakuniy havolalar</footer>

• <header> sahifa yoki alohida bo’limning kirish qismi;
• <nav> muhim navigatsiya havolalari guruhi;
• <main> ayni sahifaga xos asosiy mazmun;
• <aside> yon yoki qo’shimcha mazmun;
• <footer> sahifa yoki bo’limning yakuniy ma’lumoti.

Odatda sahifada bitta ko’rinadigan <main> bo’ladi. header va footer esa butun sahifada ham, article yoki section ichida ham ishlatilishi mumkin. Ular shunchaki tepa va past joylashuvni emas, mazmundagi rolni bildiradi.

Article va section farqi

<article> mustaqil tarqatish yoki qayta ishlatish mumkin bo’lgan mazmun: maqola, yangilik, forum posti yoki mahsulot kartasi.

<article>
  <h2>HTML nima?</h2>
  <p>HTML veb-sahifaning tuzilishini belgilaydi.</p>
</article>

<section> esa hujjat ichidagi bitta mavzuga bag’ishlangan bo’lim. U odatda sarlavhaga ega:

<section>
  <h2>Kurs dasturi</h2>
  <p>Kurs HTML, CSS va amaliy loyihani qamrab oladi.</p>
</section>

Oddiy qoida: mazmun boshqa joyda mustaqil ko’rinsa ham ma’noli bo’lsa — article; kattaroq hujjat ichidagi mavzuli bo’lim bo’lsa — section.

Jonli semantik sahifa

Previewdagi rang va chegaralar faqat bo’limlarni ko’z bilan ajratish uchun. Haqiqiy semantika HTML element nomlarida saqlanadi.

<header class="site-header">
<strong>LearnCode kundaligi</strong>
<nav aria-label="Asosiy navigatsiya">
  <a href="#maqola">Maqola</a>
  <a href="#manbalar">Manbalar</a>
</nav>
</header>

<main>
<article id="maqola">
  <header>
    <h1>Semantik HTML nega muhim?</h1>
    <p>Muallif: Ali · 5 daqiqa</p>
  </header>

  <section>
    <h2>Asosiy foyda</h2>
    <p>Element nomi mazmunning vazifasini tushuntiradi.</p>
  </section>
</article>

<aside id="manbalar">
  <h2>Qo'shimcha manbalar</h2>
  <p>HTML elementlari ma'lumotnomasi.</p>
</aside>
</main>

<footer>© 2026 LearnCode kundaligi</footer>

<style>
body { margin: 0; }
.site-header, main, footer { padding: 12px; }
.site-header { background: #eef2ff; }
nav { margin-top: 8px; }
nav a { margin-right: 12px; }
article, aside { margin: 12px 0; padding: 12px; border: 1px solid #cbd5e1; }
footer { background: #f1f5f9; }
</style>

Landmarklar va accessibility

header, nav, main, aside va footer yordamchi texnologiyalar uchun landmark vazifasini bajarishi mumkin. Ekran o’quvchi foydalanuvchisi masalan asosiy mazmunga yoki navigatsiyaga tez o’tadi.

Agar sahifada bir nechta <nav> bo’lsa, ularni nomlang:

<nav aria-label="Asosiy navigatsiya">...</nav>
<nav aria-label="Dars mundarijasi">...</nav>

Nomlar har navigatsiyaning maqsadini farqlashga yordam beradi.

Div qachon to’g’ri tanlov?

<div> yomon element emas. Mazmun uchun mos semantik element bo’lmasa yoki faqat CSS/JavaScript uchun guruhlash kerak bo’lsa, <div> ishlatiladi:

<div class="card-grid">
  <!-- kartalar -->
</div>

Har bir qutini majburan section qilish ham noto’g’ri. Agar bo’limning mantiqiy sarlavhasi va hujjat tuzilishidagi roli bo’lmasa, umumiy konteyner yetarli bo’lishi mumkin.

Tuzilmani tanlash tartibi

1. Mazmunning vazifasini aniqlang.
2. Shu vazifaga mos HTML elementi borligini tekshiring.
3. Sarlavha iyerarxiyasini mantiqiy saqlang.
4. Bir nechta bir xil landmark bo’lsa, ularni nomlang.
5. Mos semantika bo’lmasa, div yoki span ishlating.

Amaliy mashq

Yangilik sahifasi tuzing: sayt headeri, asosiy nav, bitta main, mustaqil article, maqola ichida ikkita section, tegishli aside va umumiy footer bo’lsin. So’ng har bir element nomi uning ichidagi mazmunni to’g’ri ifodalashini tekshiring.

Qisqacha xulosa

• Semantik element mazmun rolini bildiradi.
• main sahifaning noyob asosiy qismi, nav muhim havolalar guruhidir.
• article mustaqil mazmun, section hujjat ichidagi mavzuli bo’limdir.
• aside yordamchi, footer yakuniy ma’lumotni ifodalaydi.
• Mos semantik teg bo’lmasa, div to’g’ri umumiy konteynerdir.

Keyingi darsdagi HTML amaliy loyihada shu semantik tuzilmani oldingi matn, havola, rasm, ro’yxat, jadval va forma bilimlari bilan bitta to’liq sahifada birlashtiramiz.