Semantik HTML - HTML va CSS

Semantik HTML - teglarni ko'rinishi uchun emas, ma'nosi uchun tanlash. Bu SEO, kirish imkoniyati va kod sifatining asosi.

Muammo: div sho'rvasi #

Ko'p boshlovchi sahifani shunday yozadi:

HTML

<div class="tepa">
    <div class="logo">Softromeda</div>
    <div class="menyu">
        <div class="menyu-element">Bosh sahifa</div>
        <div class="menyu-element">Darsliklar</div>
    </div>
</div>
<div class="asosiy">
    <div class="maqola">
        <div class="sarlavha">Python darsligi</div>
        <div class="matn">...</div>
    </div>
</div>
<div class="past">&copy; 2026</div>

Bu ishlaydi, lekin brauzer, qidiruv tizimi va ekran o'quvchisi uchun bu shunchaki quti to'plami - hech qanday ma'no yo'q.

Yechim: semantik teglar #

HTML

<header>
    <a href="/" class="logo">Softromeda</a>
    <nav>
        <a href="/">Bosh sahifa</a>
        <a href="/darsliklar">Darsliklar</a>
    </nav>
</header>

<main>
    <article>
        <h1>Python darsligi</h1>
        <p>...</p>
    </article>
</main>

<footer>&copy; 2026</footer>

Bir xil ko'rinadi, lekin endi mazmuni tushunarli.

Zamonaviy sahifaning standart semantik tuzilmasi

Asosiy semantik teglar #

Teg	Ma'nosi	Nechta bo'lishi mumkin
`<header>`	Sarlavha qismi	Ko'p (har bir `article` da ham)
`<nav>`	Navigatsiya	Ko'p
`<main>`	Asosiy mazmun	Faqat bitta
`<article>`	Mustaqil mazmun	Ko'p
`<section>`	Mavzuli bo'lim	Ko'p
`<aside>`	Yon mazmun	Ko'p
`<footer>`	Pastki qism	Ko'p
`<figure>`	Rasm/diagramma + izoh	Ko'p
`<time>`	Sana va vaqt	Ko'p
`<address>`	Aloqa ma'lumotlari	Ko'p
`<details>`	Yig'iladigan blok	Ko'p

<main> faqat bitta bo'lishi kerak

Sahifada bitta <main> bo'ladi va u <article>, <aside> yoki <footer> ichida joylashmasligi kerak. Ekran o'quvchilarida "asosiy mazmunga o'tish" tugmasi aynan shunga tayanadi.

`<article>` va `<section>` farqi #

Bu eng ko'p chalkashtiriladigan juftlik.

	`<article>`	`<section>`
Ma'nosi	Mustaqil mazmun	Mavzuli bo'lim
Sinov savoli	Uni RSS ga qo'ysa bo'ladimi?	Uning sarlavhasi bormi?
Misollar	Maqola, blog posti, izoh, mahsulot kartochkasi	"Biz haqimizda", "Narxlar", bob

HTML

<article>
    <h2>Python darsligi</h2>
    <p>Bu darslikni boshqa saytga ko'chirsangiz ham mazmunli qoladi.</p>

    <section>
        <h3>O'zgaruvchilar</h3>
        <p>Maqolaning bir bo'limi - mustaqil emas.</p>
    </section>

    <section>
        <h3>Sikllar</h3>
        <p>Yana bir bo'lim.</p>
    </section>
</article>

Oddiy qoida

"Buni alohida olib, boshqa joyga qo'ysam ham ma'noli bo'ladimi?"

Ha → <article>
Yo'q, u faqat kontekstda ma'noli → <section>
Ikkalasi ham emas, faqat CSS uchun kerak → <div>

`<div>` va `<span>` qachon kerak? #

Ular semantik ma'noga ega emas - va bu ba'zan aynan kerakli narsa.

HTML

<!-- div: blok element, faqat guruhlash va CSS uchun -->
<div class="karta-orash">
    <article class="karta">...</article>
    <article class="karta">...</article>
</div>

<!-- span: satr ichidagi element -->
<p>Narx: <span class="narx">185 000</span> so'm</p>

	`<div>`	`<span>`
Turi	Blok (yangi satrdan)	Satr ichida
Vazifasi	Guruhlash	Matn qismini ajratish
Semantika	Yo'q	Yo'q

<div> yomon emas

Semantik teg mavjud bo'lsa uni ishlating. Lekin faqat joylashuv (layout) uchun o'rovchi kerak bo'lsa - <div> to'g'ri tanlov. Uni sun'iy ravishda <section> ga almashtirish xato bo'ladi: <section> sarlavhaga ega mavzuli bo'limni bildiradi.

Foydali semantik elementlar #

HTML

<!-- Sana - mashina o'qiy oladigan formatda -->
<p>Chop etilgan:
    <time datetime="2026-09-09">9-sentabr, 2026</time>
</p>

<!-- Davomiylik -->
<p>O'qish vaqti: <time datetime="PT8M">8 daqiqa</time></p>

<!-- Yig'iladigan blok - JavaScript kerak emas -->
<details>
    <summary>Tez-tez so'raladigan savol</summary>
    <p>Bu javob faqat sarlavha bosilganda ko'rinadi.</p>
</details>

<!-- Ochiq holatda -->
<details open>
    <summary>Ochiq bo'lim</summary>
    <p>Bu darhol ko'rinadi.</p>
</details>

<!-- Jarayon -->
<label for="yuklash">Yuklanmoqda:</label>
<progress id="yuklash" value="70" max="100">70%</progress>

<!-- O'lchov (bandlik, reyting) -->
<label for="disk">Disk bandligi:</label>
<meter id="disk" value="0.8" min="0" max="1" high="0.9">80%</meter>

<!-- Aloqa ma'lumotlari -->
<address>
    Softromeda Edu<br>
    Toshkent shahri<br>
    <a href="mailto:[email protected]">[email protected]</a>
</address>

<details> - bepul akkordeon

Ilgari "ochiladigan/yopiladigan" blok uchun JavaScript kerak edi. Endi <details> buni kodsiz bajaradi va ekran o'quvchilari bilan to'g'ri ishlaydi.

Ushbu darslikning "Markdown qo'llanmasi" bo'limi ham shu tegda qurilgan.

To'liq sahifa tuzilmasi #

HTML

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Python dasturlash tili haqida to'liq darslik">
    <title>Python darsligi | Softromeda Edu</title>
</head>
<body>

<header class="sayt-sarlavha">
    <a href="/" class="logo">Softromeda Edu</a>

    <nav aria-label="Asosiy menyu">
        <ul>
            <li><a href="/">Bosh sahifa</a></li>
            <li><a href="/darsliklar">Darsliklar</a></li>
            <li><a href="/biz-haqimizda">Biz haqimizda</a></li>
        </ul>
    </nav>
</header>

<main>
    <nav aria-label="Yo'l xaritasi">
        <ol class="yol-xaritasi">
            <li><a href="/">Bosh sahifa</a></li>
            <li><a href="/darsliklar">Darsliklar</a></li>
            <li aria-current="page">Python</li>
        </ol>
    </nav>

    <article>
        <header>
            <h1>Python dasturlash tili</h1>
            <p class="meta">
                <time datetime="2026-09-09">9-sentabr, 2026</time> &middot;
                <time datetime="PT8M">8 daqiqa o'qish</time>
            </p>
        </header>

        <section>
            <h2>Kirish</h2>
            <p>Python - yuqori darajali dasturlash tili...</p>
        </section>

        <section>
            <h2>O'rnatish</h2>
            <p>Python'ni rasmiy saytdan yuklab oling...</p>

            <figure>
                <img src="rasmlar/ornatish.png" alt="Python o'rnatuvchi oynasi"
                     width="800" height="500" loading="lazy">
                <figcaption>1-rasm. O'rnatish oynasi</figcaption>
            </figure>
        </section>

        <section>
            <h2>Ko'p so'raladigan savollar</h2>

            <details>
                <summary>Python bepulmi?</summary>
                <p>Ha, Python butunlay bepul va ochiq kodli.</p>
            </details>

            <details>
                <summary>Qaysi versiyani tanlash kerak?</summary>
                <p>Har doim eng so'nggi Python 3 versiyasini tanlang.</p>
            </details>
        </section>

        <footer>
            <p>Muallif: <a href="/muallif/husanboy" rel="author">Husanboy Qodirov</a></p>
        </footer>
    </article>

    <aside aria-label="O'xshash darsliklar">
        <h2>Shunga o'xshash</h2>
        <ul>
            <li><a href="/darslik/algoritmlar">Algoritmlar</a></li>
            <li><a href="/darslik/sql">SQL va MySQL</a></li>
        </ul>
    </aside>
</main>

<footer class="sayt-past">
    <p>&copy; 2026 Softromeda Edu</p>
    <address>
        <a href="mailto:[email protected]">[email protected]</a>
    </address>
</footer>

</body>
</html>

ARIA atributlari #

Semantik teglar yetmasa, aria-* atributlari qo'shimcha ma'no beradi:

HTML

<!-- Bir nechta nav bo'lsa, ularni ajratish -->
<nav aria-label="Asosiy menyu">...</nav>
<nav aria-label="Yo'l xaritasi">...</nav>

<!-- Joriy sahifani belgilash -->
<a href="/darsliklar" aria-current="page">Darsliklar</a>

<!-- Faqat ikonkali tugma -->
<button aria-label="Menyuni ochish">
    <svg>...</svg>
</button>

<!-- Bezak rasm - ekran o'quvchisi o'tkazib yuborsin -->
<img src="bezak.svg" alt="" aria-hidden="true">

ARIA ning birinchi qoidasi

Semantik HTML tegi mavjud bo'lsa, ARIA ishlatmang.

HTML

<!-- Yomon -->
<div role="button" tabindex="0" onclick="...">Yuborish</div>

<!-- Yaxshi -->
<button>Yuborish</button>

<button> avtomatik ravishda: klaviatura bilan boshqariladi, Enter va Space ga javob beradi, ekran o'quvchisiga "tugma" deb tanitiladi. <div> bilan bularning hammasini qo'lda yozish kerak - va ko'pincha noto'g'ri chiqadi.

Semantikaning amaliy foydasi #

Kim uchun	Foydasi
Qidiruv tizimlari	Sahifa mazmunini to'g'ri tushunadi, yaxshiroq indekslaydi
Ekran o'quvchilari	Foydalanuvchi bo'limlar orasida sakrab yura oladi
Brauzerlar	"O'qish rejimi" asosiy mazmunni to'g'ri ajratadi
Dasturchilar	Kod o'zini o'zi hujjatlaydi
Kelajak qurilmalar	Soat, ovozli yordamchi mazmunni tushunadi

Ko'zi ojiz foydalanuvchi sahifani qanday o'qiydi?

Ekran o'quvchisi (NVDA, JAWS, VoiceOver) foydalanuvchiga sahifa bo'ylab sarlavhalar bo'yicha sakrash imkonini beradi - xuddi siz sahifani ko'z bilan tez ko'zdan kechirganingiz kabi. Agar sarlavhalar <div class="katta-matn"> bo'lsa, bu imkoniyat yo'qoladi.

O'zbekistonda ham ko'zi ojiz internet foydalanuvchilari bor. Semantik HTML - ular uchun sayt ochilishi yoki ochilmasligini hal qiladi.

Amaliy topshiriq

4-bo'limda yaratgan "shahar haqida" sahifangizni oching.
Barcha <div> larni ko'rib chiqing - qaysilarini semantik tegga almashtirish mumkin?
To'liq tuzilma quring: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
<time> bilan sanalarni belgilang.
<details> bilan uchta savol-javob bloki qo'shing.
Har bir <nav> ga aria-label bering.
validator.w3.org da tekshiring.
Chrome DevTools da F12 → Lighthouse → Accessibility testini o'tkazing.

Xulosa #

Semantik teg ma'no beradi; <div> esa faqat guruhlaydi.
Sahifa tuzilmasi: <header>, <nav>, <main>, <article>, <aside>, <footer>.
<main> faqat bitta bo'lishi kerak.
<article> - mustaqil mazmun, <section> - sarlavhali bo'lim, <div> - faqat CSS uchun.
<details> JavaScript siz yig'iladigan blok yaratadi.
ARIA ning birinchi qoidasi: semantik teg bor bo'lsa, ARIA ishlatmang.
Semantika SEO, kirish imkoniyati va kod sifatini bir vaqtda yaxshilaydi.

Keyingi bo'limda CSS ga o'tamiz va sahifamizni bezashni boshlaymiz.

Muammo: div sho'rvasi #

Yechim: semantik teglar #

Asosiy semantik teglar #

<article> va <section> farqi #

<div> va <span> qachon kerak? #

Foydali semantik elementlar #

To'liq sahifa tuzilmasi #

ARIA atributlari #

Semantikaning amaliy foydasi #

Xulosa #

Xatolik topdingizmi?

`<article>` va `<section>` farqi #

`<div>` va `<span>` qachon kerak? #