Sahifa tuzilishi va semantik HTML

Oldingi darslarda sarlavha, matn, rasm, ro'yxat, jadval va formalarni yozishni o'rgandik. Endi ularni haqiqiy saytdagidek tartibga solamiz: tepada sayt nomi va menyu, o'rtada asosiy mazmun, yonda qo'shimcha ma'lumot, pastda esa aloqa qismi. Har bir qismga uning vazifasini aytib turadigan «ma'noli» teg beramiz — buni semantik HTML deyiladi.

div va span — universal qutilar

Ba'zan bir nechta elementni bitta guruhga yig'ish yoki matnning bir bo'lagini alohida belgilash kerak bo'ladi. Buning uchun HTML'da ikkita «universal» teg bor. Ularning o'zida hech qanday ma'no ham, bezak ham yo'q — ular shunchaki quti.

• <div> (inglizcha division — «bo'lim») — blok quti. Har doim yangi qatordan boshlanadi va mumkin qadar butun kenglikni egallaydi. Ichiga istalgan narsani — sarlavha, matn, rasm, hatto boshqa div'larni ham solish mumkin.
• <span> (inglizcha «qamrov») — qator ichidagi (inglizcha inline) quti. Matn oqimini buzmaydi: faqat o'z mazmunicha joy egallaydi va gap ichida qoladi. Odatda bir-ikki so'zni ajratib, keyin CSS bilan bezash uchun ishlatiladi.

Quyidagi misolda qutilarning chegarasi ko'rinsin deb ularga uzuq chiziq chizdik. Bu ishni <style> ichidagi CSS qiladi — uni hozircha tushunish shart emas, CSS'ni keyingi darsda boshlaymiz.

<style>
  div  { border: 2px dashed teal; padding: 4px; margin: 6px 0; }
  span { border: 2px dashed crimson; }
</style>

<div>Birinchi div</div>
<div>Ikkinchi div — u ham yangi qatordan boshlanadi.</div>
<p>Bu xatboshi ichida <span>span</span> bor.
U <span>gap ichida</span> qoladi va faqat o'z so'zlaricha
joy egallaydi.</p>

Ko'rdingizmi? Ikkala div ham chetdan chetgacha cho'zildi va har biri alohida qatorga tushdi. spanlar esa matn qatoridan chiqmadi.

Blok va qator ichidagi elementlar

Bu farq faqat div va span'ga tegishli emas — 3-darsdan beri ishlatib kelayotgan har bir teg shu ikki turdan biriga kiradi:

Elementning bu xususiyatini CSS bilan o'zgartirish ham mumkin — bu haqda quti modeli darsida gaplashamiz.

«div sho'rva» muammosi

div'ning o'zi yomon emas. Lekin butun sahifani faqat div'lardan qursangiz, kod mana bunday bo'lib qoladi:

<div>
  <div>Mening blogim</div>
  <div>
    <a href="index.html">Bosh sahifa</a>
    <a href="maqolalar.html">Maqolalar</a>
  </div>
</div>
<div>
  <div>
    <div>Toshkentda kuz</div>
    <div>Bugun bog'lar sariq rangga burkandi...</div>
  </div>
  <div>
    <div>Men haqimda</div>
    <div>Dasturlashni o'rganyapman.</div>
  </div>
</div>
<div>© 2026 Mening blogim</div>

Qaysi div — menyu? Qaysi biri — asosiy maqola, qaysi biri — yon panel? Bilish uchun har bir qatorni o'qib chiqishga to'g'ri keladi. Dasturchilar buni hazil bilan «div sho'rva» (inglizcha div soup) deyishadi: hammasi aralash, hech narsa ajralib turmaydi. Eng yomoni — brauzer, qidiruv tizimlari va ko'zi ojiz odamlar ishlatadigan dasturlar ham bu yerda nima qayerdaligini bilmaydi.

Semantik teglar

Semantik (inglizcha semantic — «ma'noga oid») teg — nomining o'zi ichidagi mazmun nima ekanini aytib turadigan teg. Ko'rinishidan ular div'dan farq qilmaydi (hammasi blok elementlar), lekin har biri o'z vazifasini e'lon qiladi. Sahifani qismlarga bo'lish uchun quyidagi teglar bor:

Odatiy sahifada ular taxminan mana bunday joylashadi:

section, article yoki div?

Bu uchtasini adashtirish oson. Ikkilanib qolsangiz, o'zingizga shu savollarni bering:

1. Bu qismni olib, boshqa saytga qo'ysa ham tushunarli bo'ladimi (yangilik, post, kartochka)? → <article>
2. Bu — katta sahifaning sarlavhali bir bo'limimi («Narxlar», «Biz haqimizda»)? → <section>
3. Hech qanday alohida ma'nosi yo'q, faqat bezash yoki joylashtirish uchun guruhlash kerakmi? → <div>. Bu aynan uning vazifasi.

Yana bir nechta foydali teg

• <figure> va <figcaption> — rasm (yoki sxema, kod parchasi) va uning izohini bitta guruhga birlashtiradi. Ular bilan 4-darsda tanishgan edik.
• <time> — sana yoki vaqt. datetime atributiga kompyuter tushunadigan ko'rinishda yoziladi: <time datetime="2026-10-19">19-oktabr</time>.
• <address> — muallif yoki tashkilotning aloqa ma'lumotlari: email, telefon, manzil.

<style> body { font-family: sans-serif; } </style>

<article>
  <h2>Chimyonga sayohat</h2>
  <p>Sana: <time datetime="2026-10-12">12-oktabr, 2026</time></p>
  <figure>
    <img src="../assets/rasmlar/tog.svg" width="260"
         alt="Quyosh botayotgan tog' cho'qqilari">
    <figcaption>Kechki tog' manzarasi.</figcaption>
  </figure>
  <p>Dam olish kunlari do'stlar bilan Chimyonga chiqdik.</p>
  <footer>
    <address>
      Muallif: <a href="mailto:aziz@example.com">Aziz Rahimov</a>
    </address>
  </footer>
</article>

E'tibor bering: bu yerdagi <footer> butun sahifaning emas, faqat maqolaning pastki qismi. header va footer sahifada bir necha marta (masalan, har bir article ichida) ishlatilishi mumkin — ular o'zlari turgan qismning boshi va oxirini bildiradi. address ichidagi matnni brauzer odatda kursivda ko'rsatadi.

To'liq sahifa skeleti

Endi hammasini bitta sahifaga yig'amiz. Har bir qism ko'rinib turishi uchun CSS bilan uzuq chegara va teg nomini chiqardik. <style> qismini hozircha shunchaki o'tkazib yuboring — asosiy narsa undan keyingi HTML.

<style>
  /* Bu CSS faqat qismlarni ko'rsatish uchun */
  body { font-family: sans-serif; font-size: 14px; }
  header, nav, main, article, aside, footer {
    border: 2px dashed #7a8aa6; border-radius: 6px;
    padding: 4px 10px; margin: 6px 0;
  }
  header::before  { content: "header"; }
  nav::before     { content: "nav"; }
  main::before    { content: "main"; }
  article::before { content: "article"; }
  aside::before   { content: "aside"; }
  footer::before  { content: "footer"; }
  *::before { color: #0a7c77; font: bold 11px monospace;
              margin-right: 6px; }
  .orta { display: flex; gap: 8px; }
  main  { flex: 3; }
  aside { flex: 1; }
  h1, h2, p { margin: 4px 0; font-size: 16px; }
</style>

<header>
  <h1>Mening blogim</h1>
  <nav>
    <a href="index.html">Bosh sahifa</a> |
    <a href="maqolalar.html">Maqolalar</a> |
    <a href="aloqa.html">Aloqa</a>
  </nav>
</header>
<div class="orta">
  <main>
    <article>
      <h2>Toshkentda kuz</h2>
      <p>Bugun bog'lar sariq rangga burkandi.</p>
    </article>
    <article>
      <h2>Birinchi saytim</h2>
      <p>HTML o'rganishni boshladim.</p>
    </article>
  </main>
  <aside>
    <h2>Men haqimda</h2>
    <p>Dasturlashni o'rganyapman.</p>
  </aside>
</div>
<footer>© 2026 Mening blogim</footer>

Tuzilishni ko'rib chiqaylik: header ichida sayt nomi va menyu (nav); main ichida ikkita maqola (article); aside — asosiy mazmun yonida; footer — eng pastda. <div class="orta"> esa faqat main va aside'ni yonma-yon qo'yish uchun kerak bo'lgan oddiy quti. Mana div'ning to'g'ri ishlatilishi: alohida ma'no yo'q, faqat joylashuv.

Kompyuteringizdagi index.html faylida (2-darsda yaratgan edik) bu skelet to'liq holda shunday ko'rinadi:

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening blogim</title>
</head>
<body>
    <header>
        <h1>Mening blogim</h1>
        <nav>
            <a href="index.html">Bosh sahifa</a>
            <a href="maqolalar.html">Maqolalar</a>
            <a href="aloqa.html">Aloqa</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>Maqola sarlavhasi</h2>
            <p>Maqola matni...</p>
        </article>
    </main>

    <aside>
        <h2>Men haqimda</h2>
        <p>Qisqacha ma'lumot.</p>
    </aside>

    <footer>
        <p>© 2026 Mening blogim</p>
    </footer>
</body>
</html>

Shu skeletni eslab qoling — deyarli har qanday sayt aynan shu asosda quriladi.

Semantika nega muhim?

«Ekranda baribir farqi yo'q-ku, nega qiynalaman?» degan savol tug'ilishi tabiiy. Gap shundaki, sahifani faqat ko'z bilan ko'rishmaydi.

1. Hamma uchun qulaylik

Ko'zi ojiz yoki yaxshi ko'rmaydigan odamlar internetdan ekran o'quvchi (inglizcha screen reader) dasturlar yordamida foydalanadi: NVDA, VoiceOver, TalkBack. Bunday dastur sahifani ovoz chiqarib o'qiydi va semantik teglar bo'yicha tez yurishga imkon beradi: «menyuga o'tish», «asosiy mazmunga o'tish», «keyingi sarlavha». div'lardan qurilgan sahifada bunday belgilar yo'q — odam hammasini boshidan oxirigacha tinglashga majbur. Saytni har kim, jumladan nogironligi bor odamlar ham bemalol ishlata olishi qulaylik (inglizcha accessibility, qisqacha a11y) deyiladi.

2. Qidiruv tizimlari

Google kabi qidiruv tizimlarining robotlari ham sahifani «o'qiydi». Semantik teglar ularga asosiy mazmun qayerda (main, article), sahifa nomi qaysi (h1), menyu qayerda ekanini aytadi. Natijada sahifangiz qidiruvda to'g'riroq topiladi. Saytni qidiruvda yaxshiroq ko'rsatish uchun qilinadigan ishlar SEO (inglizcha Search Engine Optimization — «qidiruv tizimlari uchun moslashtirish») deyiladi.

3. Tushunarli kod

Semantik kodni ochgan jamoadoshingiz (yoki uch oydan keyin o'zingiz) uni darhol tushunadi: <nav> — menyu, <footer> — pastki qism. CSS va JavaScript'da kerakli qismni topish ham osonlashadi.

Bir nechta muhim qoida

• Sahifada faqat bitta <main> bo'ladi. Unga har sahifada takrorlanadigan qismlar (menyu, yon panel, pastki qism) kirmaydi — faqat shu sahifaning o'ziga xos mazmuni.
• <h1> — sahifa nomi, odatda bitta. Keyin bo'limlar — h2, ularning ichidagi kichik bo'limlar — h3. Darajalarni sakrab o'tmang: h2 dan keyin to'g'ridan-to'g'ri h4 kelmasin.
• Sarlavha tegini harf kattaligiga qarab tanlamang. «Menga kichikroq sarlavha kerak» deb h4 yozish xato: o'lchamni CSS beradi, teg esa ma'noni bildiradi.

To'g'ri tuzilgan sarlavhalar kitob mundarijasiga o'xshaydi:

h1  Mening blogim
    h2  Toshkentda kuz
        h3  Bog'lar
        h3  Ob-havo
    h2  Birinchi saytim

Qulaylik asoslari: to'rtta oddiy odat

Saytingiz hamma uchun qulay bo'lishi uchun murakkab bilim shart emas. Boshlash uchun shu to'rtta odatni shakllantiring:

1. <html lang="uz"> — sahifa tilini ko'rsating. Ekran o'quvchi matnni qaysi til talaffuzida o'qishni shundan biladi.
2. Har bir rasmga alt yozing (4-dars) — rasmda nima borligini qisqa ayting: alt="Registon maydoni kechqurun". Rasm yuklanmasa, o'rnida shu matn chiqadi. Rasm faqat bezak bo'lsa, alt="" (bo'sh) qoldiring — ekran o'quvchi uni o'tkazib yuboradi.
3. Har bir kiritish maydoniga <label> bering. Formalar darsida ko'rgandik: yorliq bosilganda maydon faollashadi, ekran o'quvchi esa maydon nima uchunligini aytadi.
4. Tugma — <button>, havola — <a>. div'ni tugmaga o'xshatib bezash mumkin, lekin u tugma bo'lib qolmaydi: unga Tab bilan o'tib bo'lmaydi, Enter ishlamaydi, ekran o'quvchi uni «tugma» deb aytmaydi.

Oxirgi qoidani o'zingiz tekshiring. Natija oynasidagi bo'sh joyni bir marta bosing, keyin Tab tugmasini bir necha marta bosing. Ramka (fokus) qaysi elementlarga tushyapti?

<style>
  body { font-family: sans-serif; }
  .soxta { display: inline-block; background: #1f4fa8; color: white;
           padding: 6px 12px; border-radius: 4px; cursor: pointer; }
</style>

<p>Shu yerni bosing, keyin <b>Tab</b> tugmasini bosib boring:</p>
<button>Haqiqiy tugma</button>
<div class="soxta">Soxta tugma (div)</div>
<button>Yana bir haqiqiy tugma</button>

Fokus faqat haqiqiy tugmalarga tushadi, «soxta» tugma esa o'tkazib yuboriladi. Sichqoncha ishlatmaydigan odam unga hech qachon yeta olmaydi.

Kodingizni tekshiring: HTML validator

Yopilmay qolgan teg, ikki marta ishlatilgan id yoki alt'siz rasm — bunday xatolarni brauzer ko'pincha «kechirib» yuboradi, shuning uchun ular ko'zga tashlanmaydi. Ularni topishning qulay usuli — W3C tashkilotining bepul HTML validatori (tekshiruvchisi):

1. validator.w3.org saytini oching va Validate by Direct Input (kodni to'g'ridan-to'g'ri kiritish) bo'limini tanlang.
2. index.html faylingizdagi butun kodni nusxalab, maydonga qo'ying.
3. Check tugmasini bosing. Error — tuzatish kerak bo'lgan xatolar, Warning — maslahatlar.

Xabarlar ingliz tilida, lekin har birida qator raqami va muammoli teg ko'rsatiladi. Masalan, «An img element must have an alt attribute» — «img elementida alt atributi bo'lishi shart» degani.

class va id — CSS va JavaScript uchun «ilgaklar»

Sahifada bir xil teglar ko'p bo'ladi: o'nlab p, bir nechta article. Ulardan aynan keraklisini topib bezash (CSS) yoki boshqarish (JavaScript) uchun elementlarga nom beriladi. Buning uchun ikkita atribut bor:

• class (inglizcha «sinf», «toifa») — guruh nomi. Bir xil klassni istalgancha elementga berish mumkin: masalan, barcha mahsulot kartalari class="karta". Bitta elementda bir nechta klass ham bo'lishi mumkin — ular bo'sh joy bilan ajratiladi: class="karta muhim".
• id (inglizcha identifier — «identifikator») — shaxsiy nom, xuddi pasport raqami kabi. Bitta id sahifada faqat bitta elementda bo'lishi kerak: id="aloqa". Unga havola ham qilish mumkin: <a href="#aloqa"> bosilganda sahifa shu elementgacha aylanadi.

<style>
  body   { font-family: sans-serif; }
  .karta { border: 1px solid #c8d0de; border-radius: 8px;
           padding: 2px 12px; margin: 8px 0; }
  .muhim { background: #fff4d6; }
  #aloqa { color: #0a7c77; font-weight: bold; padding: 40px 0; }
</style>

<nav><a href="#aloqa">Aloqa bo'limiga o'tish ↓</a></nav>
<article class="karta"><h3>HTML</h3><p>Tuzilish.</p></article>
<article class="karta muhim"><h3>CSS</h3><p>Ko'rinish.</p></article>
<article class="karta"><h3>JavaScript</h3><p>Harakat.</p></article>
<footer id="aloqa">Aloqa: salom@example.com</footer>

Uchala kartaga bir xil chegara berildi, chunki ularning klassi bir xil. O'rtadagisida qo'shimcha muhim klassi bor — shuning uchun fon rangi boshqacha. Yuqoridagi havolani bosing: natija oynasi id="aloqa" bo'lgan elementgacha aylanadi. CSS'da klass nuqta bilan (.karta), id esa panjara belgisi bilan (#aloqa) yoziladi — buni keyingi darsda batafsil o'rganamiz.

Nom berish qoidalari

• Kichik lotin harflari, raqamlar va chiziqcha ishlating: asosiy-menyu, karta-2. Bo'sh joy qo'ymang — class'da bo'sh joy nomlarni bir-biridan ajratadi.
• Nomni raqam bilan boshlamang: 1-karta emas, karta-1.
• Nom ko'rinishni emas, ma'noni aytsin: ogohlantirish — yaxshi, qizil-matn — yomonroq. Ertaga rangni ko'kka o'zgartirsangiz, nom «yolg'on» bo'lib qoladi.
• Katta-kichik harf farq qiladi: Karta va karta — ikki xil nom. Hammasini kichik harfda yozish odatini qiling.

Mashqlar

<style>
  body { font-family: sans-serif; }
  header, nav, main, article, footer {
    border: 2px dashed teal; padding: 2px 8px; margin: 4px 0;
  }
</style>

<div>                  <!-- sahifa boshi -->
  <h1>Oshxona retseptlari</h1>
  <div>                <!-- menyu -->
    <a href="index.html">Bosh sahifa</a>
    <a href="retseptlar.html">Retseptlar</a>
  </div>
</div>
<div>                  <!-- asosiy mazmun -->
  <div>                <!-- alohida retsept -->
    <h2>Palov</h2>
    <p>Guruch, sabzi, go'sht va ziravorlar.</p>
  </div>
  <div>                <!-- alohida retsept -->
    <h2>Manti</h2>
    <p>Xamir, qiyma va piyoz.</p>
  </div>
</div>
<div>                  <!-- sahifa oxiri -->
  <p>© 2026 Oshxona retseptlari</p>
</div>

<style>
  body { font-family: sans-serif; }
  header, nav, main, article, footer {
    border: 2px dashed teal; padding: 2px 8px; margin: 4px 0;
  }
</style>

<header>
  <h1>Oshxona retseptlari</h1>
  <nav>
    <a href="index.html">Bosh sahifa</a>
    <a href="retseptlar.html">Retseptlar</a>
  </nav>
</header>
<main>
  <article>
    <h2>Palov</h2>
    <p>Guruch, sabzi, go'sht va ziravorlar.</p>
  </article>
  <article>
    <h2>Manti</h2>
    <p>Xamir, qiyma va piyoz.</p>
  </article>
</main>
<footer>
  <p>© 2026 Oshxona retseptlari</p>
</footer>

<style>
  body { font-family: sans-serif; }
  .tugma { display: inline-block; background: #0a7c77;
           color: white; border: none; padding: 8px 14px;
           border-radius: 6px; font-size: 15px; }
</style>

<h1>Toshkent atrofidagi tog'lar</h1>
<h4>Chimyon</h4>
<img src="../assets/rasmlar/tog.svg" width="240">
<p>Chimyon — Toshkent yaqinidagi mashhur dam olish maskani.</p>
<div class="tugma">Batafsil</div>

<style>
  body { font-family: sans-serif; }
  .tugma { display: inline-block; background: #0a7c77;
           color: white; border: none; padding: 8px 14px;
           border-radius: 6px; font-size: 15px; }
</style>

<h1>Toshkent atrofidagi tog'lar</h1>
<h2>Chimyon</h2>
<img src="../assets/rasmlar/tog.svg" width="240"
     alt="Quyosh botayotgan tog' cho'qqilari">
<p>Chimyon — Toshkent yaqinidagi mashhur dam olish maskani.</p>
<button class="tugma">Batafsil</button>

<body>
    <header>
        <h1>Aziza Karimova</h1>
        <p>Boshlovchi veb-dasturchi</p>
        <nav>
            <a href="#men-haqimda">Men haqimda</a>
            <a href="#loyihalar">Loyihalar</a>
            <a href="#aloqa">Aloqa</a>
        </nav>
    </header>
    <main>
        <section id="men-haqimda">
            <h2>Men haqimda</h2>
            <p>Men Samarqanddanman va veb-dasturlashni o'rganyapman.</p>
        </section>
        <section id="loyihalar">
            <h2>Loyihalar</h2>
            <article>
                <h3>Oshxona retseptlari</h3>
                <p>Semantik teglar bilan qurilgan birinchi sahifam.</p>
            </article>
        </section>
        <section id="aloqa">
            <h2>Aloqa</h2>
            <address>
                <a href="mailto:aziza@example.com">aziza@example.com</a>
            </address>
        </section>
    </main>
    <footer>
        <p>© 2026 Aziza Karimova</p>
    </footer>
</body>

O'zingizni sinang