6.1-dars: Semantik versta

Semantik teg nima?

"Semantika" so'zi tilshunoslikdan kelib chiqqan — bu ma'no haqidagi fandir. Semantik teg — bu nafaqat mazmunni qanday ko'rsatish haqida, balki ichida aynan nima borligi haqida ham ma'lumot beruvchi teg.

<b> tegini va <strong> tegini eslang. Vizual jihatdan ular bir xil ko'rinadi — qalin matn. Ammo:

• <b> — shunchaki qalin shrift. Hech qanday ma'no yo'q.
• <strong> — muhimlik. Skrinriderlar bu matnni intonatsiya bilan ajratib beradi.

<i> (kursiv) va <em> (mantiqiy urg'u) bilan ham xuddi shunday. Semantik teglar — ichida nima borligini tushuntiradigan teglar: shapka, menyu, maqola, footer, navigatsiya, bo'lim.

Ilgari, 2000-yillarda veb-dasturchilar sahifalarni shunday verstka qilishardi:

<div id="header">
  <div class="logo">Mening saytim</div>
  <div class="nav">
    <div class="menu-item">Bosh sahifa</div>
    <div class="menu-item">Biz haqimizda</div>
  </div>
</div>
<div id="content">
  <div class="post">
    <div class="post-title">Sarlavha</div>
    <div class="post-body">Matn...</div>
  </div>
</div>
<div id="footer">
  <div class="copyright">2026 Barcha huquqlar himoyalangan</div>
</div>

Bu ishlaydi, lekin bu «divlar bilan versta». "Bu navigatsiya" deyish o'rniga biz "bu nav klassli div" deymiz. Brauzer, qidiruv tizimi, skrinrider — ular buning navigatsiya ekanini tushunmaydi. Ular shunchaki blokni ko'radi.

Zamonaviy, semantik yondashuv:

<header>
  <div class="logo">Mening saytim</div>
  <nav>
    <a href="/">Bosh sahifa</a>
    <a href="/about">Biz haqimizda</a>
  </nav>
</header>
<main>
  <article>
    <h1>Sarlavha</h1>
    <p>Matn...</p>
  </article>
</main>
<footer>
  <p>2026 Barcha huquqlar himoyalangan</p>
</footer>

Farqni his qilyapsizmi? Endi teglarning o'zi ichida nima borligini aytadi. <header> — shapka. <nav> — navigatsiya. <main> — asosiy kontent. <article> — maqola. <footer> — footer.

Semantik versta nima uchun kerak?

1. SEO (qidiruv tizimlari uchun optimallashtirish)

Google va Yandex — bu sizning HTML'ingizni o'qiydigan dasturlar. Ularning ko'zi yo'q, ular sahifa qanchalik chiroyli ko'rinishini ko'rmaydi. Ular faqat kodni ko'radi. Va ular semantik teglarni tanib olishni o'rganadi.

Qidiruv tizimi <article>ni ko'rganda, tushunadi: "Ha, bu mustaqil material, uni qidiruvda ko'rsatish mumkin". <nav>ni ko'rganda: "Bu sayt bo'ylab navigatsiya, uni asosiy kontent sifatida indekslamayman".

<h1>ni ko'rganda — bu sahifaning asosiy sarlavhasi, eng muhim kalit so'z. <h2> esa — bo'limlarning quyi sarlavhalari.

2. Qulaylik (a11y)

Butun dunyo bo'ylab millionlab odamlar skrinriderlardan — ekran mazmunini ovoz bilan o'qib beradigan dasturlardan foydalanadi. Ko'rmagani uchun emas, balki shunday qulayroq bo'lgani uchun (masalan, mashina haydab ketayotganda).

Skrinriderlar semantikaga tayanadi. Ular <nav>ga duch kelganda, aytadi: "Navigatsiya, 5 ta havola". <article>da esa: "Maqola, sarlavhasi bunday". Foydalanuvchi kitobning boblari bo'ylab o'tayotgandek, bo'limlar orasida sakrab yurishi mumkin.

Agar butun sahifa divlar bilan verstka qilingan bo'lsa — skrinrider matnni shunchaki ketma-ket o'qiydi. Tasavvur qiling, mundarija va abzatslarsiz kitobni ovoz chiqarib o'qishyapti — so'zlarning uzluksiz oqimi. Noqulay, shunday emasmi?

3. Kod o'qilishi va qo'llab-quvvatlash

Siz kodni bir marta yozasiz, lekin uni o'nlab marta o'qishadi — bir oydan keyin siz o'zingiz, hamkasblaringiz, loyihaga kelgan yangi dasturchi. Semantik teglar — yaxshi izohlarga o'xshaydi, faqat yaxshiroq: ular o'z-o'zidan tuzilmani hujjatlashtiradi.

Ikki fragmentni solishtiring:

<!-- Nosemantik -->
<div class="footer">
  <div class="footer-columns">
    <div class="footer-col">...</div>
    <div class="footer-col">...</div>
  </div>
</div>

<!-- Semantik -->
<footer>
  <div class="footer-columns">
    <section>...</section>
    <section>...</section>
  </div>
</footer>

Ikkinchi variant darhol tushunarli: bu saytning footer qismi, ichida — bo'limlar. Birinchi variant: "footer klassli qandaydir div, ichida yana divlar...".

4. Kelajak va standartlar

HTML rivojlanmoqda. Semantik teglar HTML5 spetsifikatsiyasida (2014-yil) paydo bo'lgan. Bugun bu standart. Ertaga semantikaga tayanadigan yangi imkoniyatlar paydo bo'ladi. Agar kodingiz allaqachon semantik bo'lsa — siz kelajakka tayyorsiz. Aks holda — qayta yozishga to'g'ri keladi.

Asosiy semantik teglar

Keling, har bir tegni misollar va tushuntirishlar bilan batafsil ko'rib chiqamiz.

<header> — sayt yoki bo'lim shapkasi

<header> tegi kirish qismini bildiradi: sayt shapkasi, bo'lim sarlavhasi, maqolaga muqaddima. Logotip, nom, navigatsiya, qidiruvni o'z ichiga olishi mumkin.

Muhim: sahifada bir nechta <header> bo'lishi mumkin. Masalan, biri — butun saytning shapkasi, ikkinchisi — maqola ichidagi sarlavha.

<header>
  <img src="logo.svg" alt="Kompaniya logotipi">
  <h1>Sayt nomi</h1>
  <p>Qisqacha tavsif, shior</p>
</header>

<article>
  <header>
    <h2>Maqola sarlavhasi</h2>
    <time datetime="2026-06-24">2026-yil 24-iyun</time>
    <p>Muallif: Ivan Petrov</p>
  </header>
  <p>Maqola matni...</p>
</article>

<nav> — navigatsiya

<nav> ichiga sayt yoki bo'lim bo'ylab navigatsiya uchun asosiy havolalar joylashtiriladi. Barcha havolalar nav ichida bo'lishi shart emas — faqat eng muhim havolalar bloklari.

<nav>
  <ul>
    <li><a href="/">Bosh sahifa</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contacts">Aloqa</a></li>
  </ul>
</nav>

E'tibor bering: navigatsiya odatda ro'yxat (<ul> + <li>) sifatida qilinadi, chunki mantiqan bu — havolalar ro'yxati. Ammo bu qat'iy talab emas.

<main> — asosiy kontent (sahifada bitta)

<main> — noyob teg. U sahifada faqat bir marta uchrashi mumkin. Ichida — sahifaning asosiy, unga xos bo'lgan kontenti. Boshqa sahifalarda takrorlanmaydigan narsa (shapka, footer, yon panel — takrorlanadi, shuning uchun ular main ichida emas).

<body>
  <header>...</header>
  <main>
    <h1>Xush kelibsiz!</h1>
    <p>Bu sahifaning noyob kontenti...</p>
  </main>
  <footer>...</footer>
</body>

<section> — bo'lim

<section> bog'liq kontentni guruhlaydi. Odatda ichida sarlavha (<h1>–<h6>) bo'ladi.

Tasavvur qiling, sahifa — bu kitob. <section> — bu bob. Har bir bobning nomi bor.

<section>
  <h2>Bizning xizmatlarimiz</h2>
  <div class="services-grid">
    <div class="service">
      <h3>Veb-dasturlash</h3>
      <p>Har qanday murakkablikdagi saytlarni yaratamiz</p>
    </div>
    <div class="service">
      <h3>SEO-siljitish</h3>
      <p>Qidiruv tizimlarining yuqori o'rinlariga olib chiqamiz</p>
    </div>
  </div>
</section>

<article> — mustaqil maqola yoki yangilik

<article> — bu sahifadan «chiqarib olsa» ham ma'nosini yo'qotmaydigan kontent. Yangilik, blog posti, izoh, mahsulot kartochkasi.

article'ning asosiy xususiyati — o'zicha yetarliligi. Agar siz bu blokni boshqa saytda yoki RSS-lentada e'lon qilmoqchi bo'lsangiz — u tushunarli bo'lishi kerak.

<article>
  <h2>Google yangi neyron tarmoqni taqdim etdi</h2>
  <p><time datetime="2026-06-20">2026-yil 20-iyun</time></p>
  <p>Google kompaniyasi yangi modelni e'lon qildi...</p>
  <a href="/news/google-ai">Batafsil o'qish</a>
</article>

Ichida article'ning o'zining header, footer, section elementlari bo'lishi mumkin — xuddi to'liq sahifadagidek.

<aside> — yon panel

<aside> asosiy kontent bilan bilvosita bog'liq bo'lgan ma'lumotni o'z ichiga oladi. Yon panel, "o'xshash maqolalar" bloki, reklama, iqtibos.

<aside>
  <h3>Qiziqarli maqolalar</h3>
  <ul>
    <li><a href="#">Verstkani qanday o'rganish kerak</a></li>
    <li><a href="#">CSS Grid vs Flexbox</a></li>
  </ul>
</aside>

<footer> — pastki qism (footer)

<footer> — yakuniy qism: mualliflik huquqi, aloqa, ijtimoiy tarmoqlarga havolalar, sayt xaritasi.

<footer>
  <p>© 2026, O'quv markazi. Barcha huquqlar himoyalangan.</p>
  <nav>
    <a href="/privacy">Maxfiylik siyosati</a>
    <a href="/terms">Foydalanish shartlari</a>
  </nav>
</footer>

Semantik sahifaning vizual sxemasi

Odatiy semantik sahifa shunday ko'rinadi:

Semantik teglarning ichma-ichligi

Semantik teglarni bir-biriga joylashtirish mumkin (va kerak). Qaysi kombinatsiyalar mantiqiy ekanini tushunish muhim:

Konstruksiya	Ma'nosi	Baho
<article> > <section>	Maqolada bir nechta bo'lim bor	✓
<section> > <article>	Bo'limda bir nechta maqola bor	✓
<header> > <nav>	Shapka ichidagi navigatsiya	✓
<article> > <article>	Masalan, maqolaga izohlar	✓
<main> > <main>	Noto'g'ri — main faqat bitta bo'lishi mumkin	✗
<nav> > <nav>	Navigatsiya ichida navigatsiya — ma'nosiz	✗
<footer> > <header>	Footer ichida sarlavha bo'lishi mumkin	✓

Nega <div> — bu yomon?

Keling, darhol aniqlik kiritamiz: <div> — yovuzlik emas. Bu semantik ma'nosiz universal konteyner. Va boshqa hech qanday teg mos kelmaydigan joyda undan foydalanish normal holat.

Muammo <div>ni semantik teglarni e'tiborsiz qoldirib, hamma joyda ishlatganda paydo bo'ladi. Bu «div-versta» yoki «div-kasalligi» deb ataladi.

Mana o'ylamasdan divlar bilan versta qilishning yomon tomonlari:

• Ma'noning yo'qolishi. Brauzer ichida nima borligini bilmaydi — shapka, maqola yoki reklama.
• Yomon SEO. Qidiruv tizimlari sahifa tuzilishini yomonroq tushunadi.
• Qulaylik muammolari. Skrinriderlar sahifa bo'ylab harakatlana olmaydi.
• Iflos kod. Ko'plab klasslar bilan to'la <div>larning ko'pligi dasturchilarni chalg'itadi.

Qoida oddiy: agar mos semantik teg bo'lsa — undan foydalaning. Agar bo'lmasa — <div>dan foydalaning.

Masalan, rasmlar galereyasi uchun maxsus teg yo'q. Uni div bilan o'rash mumkin. Navigatsiya uchun esa <nav> bor — undan foydalanamiz.

Amaliyot: blog verstkasi

Endi esa — eng qizig'i. Keling, o'rgangan barcha semantik teglardan foydalanib, kichik blog versta qilamiz.

Vazifa: shapka, navigatsiya, maqolalar ro'yxati, yon panel va footerga ega blog sahifasi. Har bir maqola — o'zicha yetarli <article>.

Avval o'zingiz yozib ko'ring, keyin quyidagi kod bilan solishtiring:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening blogim</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: system-ui, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f8f8f8;
        }
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background: #2d2d2d;
            color: white;
            padding: 20px 0;
        }
        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
        }
        nav a:hover { text-decoration: underline; }
        .content-wrapper {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 30px;
            margin: 30px 0;
        }
        article {
            background: white;
            padding: 24px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        article h2 { margin-bottom: 8px; }
        article time {
            color: #666;
            font-size: 0.9em;
        }
        article .read-more {
            display: inline-block;
            margin-top: 12px;
            color: #e65100;
            font-weight: 600;
            text-decoration: none;
        }
        aside {
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            align-self: start;
        }
        aside section { margin-bottom: 24px; }
        aside h3 { margin-bottom: 8px; font-size: 1.1em; }
        aside ul { list-style: none; }
        aside li { margin-bottom: 6px; }
        aside a { color: #e65100; text-decoration: none; }
        aside a:hover { text-decoration: underline; }
        footer {
            background: #2d2d2d;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
        }
        @media (max-width: 768px) {
            .content-wrapper {
                grid-template-columns: 1fr;
            }
            header .container {
                flex-direction: column;
                gap: 12px;
            }
            nav a { margin: 0 10px; }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>Mening blogim</h1>
            <nav>
                <a href="/">Bosh sahifa</a>
                <a href="/blog">Blog</a>
                <a href="/about">Men haqimda</a>
                <a href="/contacts">Aloqa</a>
            </nav>
        </div>
    </header>

    <main>
        <div class="container content-wrapper">
            <div class="articles">
                <article>
                    <header>
                        <h2>HTML va CSS'ni qanday o'rganish kerak</h2>
                        <time datetime="2026-06-20">2026-yil 20-iyun</time>
                    </header>
                    <p>Veb-dasturlashni o'rganish asoslardan boshlanadi. HTML — bu tuzilma, CSS — uslub. Ushbu maqolada men nimadan boshlash kerakligi va yangi boshlovchi nimalarga e'tibor berishi haqida gapirib beraman...</p>
                    <a href="#" class="read-more">Batafsil o'qish →</a>
                </article>

                <article>
                    <header>
                        <h2>CSS Grid: to'liq qo'llanma</h2>
                        <time datetime="2026-06-15">2026-yil 15-iyun</time>
                    </header>
                    <p>CSS Grid — bu minimal miqdordagi kod bilan murakkab maketlar yaratish imkonini beruvchi kuchli joylashtirish tizimi. Keling, asosiy tushunchalarni ko'rib chiqamiz...</p>
                    <a href="#" class="read-more">Batafsil o'qish →</a>
                </article>

                <article>
                    <header>
                        <h2>Nega semantik versta muhim</h2>
                        <time datetime="2026-06-10">2026-yil 10-iyun</time>
                    </header>
                    <p>Semantik teglar HTML5'da paydo bo'ldi va versta yondashuvini butunlay o'zgartirdi. Endi biz shunchaki "ko'z bilan" versta qilmaymiz, balki har bir elementga ma'no beramiz...</p>
                    <a href="#" class="read-more">Batafsil o'qish →</a>
                </article>
            </div>

            <aside>
                <section>
                    <h3>Ruknlar</h3>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">Vositalar</a></li>
                    </ul>
                </section>
                <section>
                    <h3>So'nggi izohlar</h3>
                    <ul>
                        <li>Anna: «Ajoyib maqola!»</li>
                        <li>Pyotr: «Rahmat, juda foydali bo'ldi»</li>
                        <li>Mariya: «Davomini kutyapman»</li>
                    </ul>
                </section>
            </aside>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>© 2026 Mening blogim. Barcha huquqlar himoyalangan.</p>
        </div>
    </footer>
</body>
</html>

Blog kodini tahlil qilish

Keling, qaysi semantik teglardan foydalanganimizni ko'rib chiqamiz:

Teg	Qayerda ishlatiladi	Nima uchun
<header>	Sayt shapkasi + har bir maqola ichida	Sayt nomini / maqola sarlavhasini sana bilan o'z ichiga oladi
<nav>	Shapka ichida	Sayt bo'ylab navigatsiya
<main>	Asosiy kontent	Sahifaning barcha noyob mazmuni
<article>	Uchta maqola bloki	Har bir maqola — mustaqil material
<aside>	Yon panel	Qo'shimcha ma'lumot: ruknlar, izohlar
<section>	Aside ichida	Har bir blok (ruknlar, izohlar) — alohida bo'lim
<footer>	Sayt footeri	Mualliflik huquqi va yakuniy ma'lumot
<time>	Maqolalar headeri ichida	Mashinada o'qiladigan sana

Biz ko'rib chiqmagan semantik teglar

HTML5'da boshqa semantik teglar ham bor. Mustaqil o'rganish uchun qisqacha ro'yxat:

Teg	Tavsif
<figure>	Illyustratsiya, diagramma, foto. Ichida <figcaption> — izoh bo'lishi mumkin.
<figcaption>	<figure>ga izoh.
<mark>	Ajratib ko'rsatilgan matn (marker bilan bo'lgani kabi).
<details>	Qo'shimcha ma'lumot bilan ochiladigan blok.
<summary>	<details> uchun sarlavha.
<address>	Aloqa ma'lumotlari (email, telefon, manzil).
<blockquote>	Manba ko'rsatilgan uzun iqtibos (cite atributi).
<q>	Matn ichidagi qisqa iqtibos.
<abbr>	Izohlash uchun title atributiga ega qisqartma.

<figure>
    <img src="diagram.png" alt="Semantik versta sxemasi">
    <figcaption>1-rasm — Semantik sahifaning odatiy tuzilishi</figcaption>
</figure>

<p>Muhim fragmentlarni <mark>ajratib ko'rsatish</mark> uchun mark tegidan foydalaning.</p>

<details>
    <summary>Ochish uchun bosing</summary>
    <p>Va bu yerda — yashirin kontent!</p>
</details>

<address>
    Bizning email: <a href="mailto:info@example.com">info@example.com</a>
</address>

Tekshirish uchun cheklist

Sahifani versta qilib bo'lgach, cheklist bo'yicha yurib chiqing. Agar hammasi «ha» bo'lsa — barakalla:

• Sahifada aynan bitta <main> bormi? ☐
• Shapka <header> ichiga o'ralganmi? ☐
• Footer — <footer> ichidami? ☐
• Navigatsiya — <nav> ichidami? ☐
• Maqolalar — <article> ichidami? ☐
• Yon panel — <aside> ichidami? ☐
• Maqolalar ichidagi bo'limlar — <section> ichidami? ☐
• Sarlavhalar tartib bilan keladimi: <h1>, keyin <h2>, <h3> (o'tkazib yubormaymizmi)? ☐
• Barcha rasmlarda alt bormi? ☐
• Sahifa CSS'siz tushunarlimi? ☐

Tez-tez uchraydigan xatolar

Keling, yangi boshlovchilar (va nafaqat ular) tez-tez yo'l qo'yadigan xatolarni ko'rib chiqamiz:

1-xato: <header> faqat sayt shapkasi uchun

Ko'pchilik <header> faqat bitta — butun sahifa uchun bo'lishi mumkin deb o'ylaydi. Aslida <header>ni <article>, <section>, <aside> ichida ishlatish mumkin (va kerak).

2-xato: barcha havolalar uchun <nav>

Har bir havolalar guruhini <nav> ichiga o'rash shart emas. Masalan, footerdagi maxfiylik siyosatiga havolalar — bu navigatsiya emas, balki qo'shimcha ma'lumot. <nav>ni asosiy navigatsiya bloklari uchun ishlating.

3-xato: sarlavhasiz <section>

Texnik jihatdan <section> sarlavhasiz bo'lishi mumkin, lekin semantik jihatdan bu g'alati. Nomi yo'q bo'lim — bu qanday bo'lim? Har doim sarlavha qo'shishga harakat qiling.

4-xato: bo'shliqlar uchun <br>dan foydalanish

<br> — bu qator ko'chirish. Uni bloklar orasida bo'shliq yaratish uchun ishlatmang. Buning uchun CSS'da margin va padding bor. <br> — she'rlar, manzillar, kod qatorlari uchun.

5-xato: <h1>ni e'tiborsiz qoldirish

Har bir sahifada aynan bitta <h1> — asosiy sarlavha bo'lishi kerak. Usiz qidiruv tizimlari sahifa nima haqida ekanini yomonroq tushunadi.

Xulosa

Semantik versta — bu shunchaki moda tendensiyasi emas. Bu veb-dasturlash sifatining standartidir. U kodingizni quyidagicha qiladi:

• Tushunarli — boshqa dasturchilar uchun
• Qulay — imkoniyati cheklangan odamlar uchun
• Optimallashtirilgan — qidiruv tizimlari uchun
• Kelajakka tayyor — yangi texnologiyalar semantikaga tayanadi

Kichikdan boshlang: <div class="header"> o'rniga <header> yozing. <div class="nav"> o'rniga — <nav>. Vaqt o'tishi bilan bu odatga aylanadi va siz semantikasiz qanday yashaganingizga hayron bo'lasiz.

Endi esa — topshiriq: hamma joyi divlar bilan verstka qilingan istalgan eski loyihangizni oling va uni semantik teglardan foydalanib qayta yozing. Kod qanday tozaroq, tushunarliroq va professionalroq bo'lib qolishini ko'rasiz.

---