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

> Header, nav, main, article, section, aside va footer bilan semantik sahifa tuzing; divdan farqi, accessibility landmarklari va to'g'ri tanlovni o'rganing.

Manba: https://learncode.uz/html-css/semantik-teglar/
Sana: 2026-05-19

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](https://learncode.uz/html-css/sarlavha-paragraf),
[ro'yxat](https://learncode.uz/html-css/royxatlar) va [jadval](https://learncode.uz/html-css/jadvallar) 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

```html
<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.

```html
<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:

```html
<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.

```html
<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>
```

```css
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; }
```

## 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:

```html
<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:

```html
<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.

> **Semantik teg avtomatik dizayn bermaydi**
>
> `header` yoki `aside` ishlatish elementni o'z-o'zidan yon tomonga, tepaga yoki
> rangli blokka joylamaydi. Joylashuv CSS vazifasi. Semantik element avvalo
> mazmunning rolini ifodalaydi.

## 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.

> **Ko'rinishni o'chirib tasavvur qiling**
>
> CSS yuklanmasa ham HTML tuzilishi o'qishga va tushunishga yaroqli bo'lishi
> kerak. Semantikani tanlashda element qanday ko'rinishini emas, mazmun nima
> ekanini so'rang.

## 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](https://learncode.uz/html-css/html-amaliy-loyiha) shu
semantik tuzilmani oldingi matn, havola, rasm, ro'yxat, jadval va forma
bilimlari bilan bitta to'liq sahifada birlashtiramiz.