IlmHamroh
JavaScript Full-stack/4-qism. HTML38/86-dars17 daqiqa
Mundarija (27)

Semantik HTML amaliyoti: blog va bosh sahifa skeletini noldan qurish

Qisqacha: Semantik sahifa skeleti besh qadamda quriladi: reja, landmarklar, sarlavha daraxti, bloklar (article, section yoki div) va validator bilan tekshirish. Kod faqat to'rtinchi qadamda yoziladi — undan oldin o'ylaysiz. Bu darsda shu tartibda «Bahor» choyxonasining blog maqolasi va bosh sahifasini noldan quramiz.

Bu darsda

  • Sahifa rejasini oddiy ro'yxatdan semantik teglarga "tarjima" qilasiz.
  • Blog maqolasi sahifasining to'liq skeletini qadamma-qadam qurasiz.
  • Bosh sahifa (landing) skeletini qisman mustaqil tuzasiz.
  • Sarlavha daraxtini kod yozishdan oldin chizasiz va keyin vosita bilan solishtirasiz.
  • Tayyor sahifani html-validate, Nu Checker va DevTools bilan uch tomondan tekshirasiz.

Oldin bilishingiz kerak: Brauzer HTML'ni qanday tahlil qiladi, HTML'ni formatlash va validatsiya qilish, Sahifa landmarklari, article, section yoki div.

1. Nega bu kerak?

Oxirgi beshta darsda semantikani bo'lakma-bo'lak o'rgandik: semantik HTML nima, landmarklar, article va section farqi, kontent modeli va parser "tuzatishlari". Har birini alohida misolda ko'rdik.

Real ishda esa hech kim "endi faqat landmark qo'yaman" demaydi. Dizayner sahifa maketini beradi va aytadi: "Shu sahifani yasab bering". Bo'laklarni bir vaqtda, to'g'ri tartibda ishlatish — alohida ko'nikma.

Oshpazlikdagi kabi: ziravorlarni birma-bir tatib ko'rish bir narsa, butun qozon osh damlash — boshqa. Bugun qozon damlaymiz. Bu dars — semantika modulining yakuniy mini-loyihasi.

Dars oxirida choyxona saytida ikkita tayyor sahifa bo'ladi: blog/osh-sirlari.html (maqola) va yangilangan index.html (bosh sahifa).

2. Ish tartibi: besh qadam

Qadam Nima qilasiz Qaysi darsga tayanadi
1. Reja Sahifadagi qismlarni so'z bilan yozasiz —
2. Landmarklar Katta hududlarni belgilaysiz Landmarklar
3. Sarlavha daraxti h1–h3 ni oldindan chizasiz Sarlavhalar
4. Bloklar article, section, div va boshqalar article, section yoki div
5. Tekshirish Validator, linter, DevTools Validatsiya

E'tibor bering: birinchi uch qadamda bitta ham teg yozilmaydi. Avval o'ylash, keyin yozish. Teglarni o'ylamasdan yozsangiz, yarim yo'lda "bu section emas, article ekan" deb qayta qurishga to'g'ri keladi.

3. 1-loyiha: blog maqolasi (to'liq yechilgan misol)

3.1 Qadam 1 — reja

Oshpaz Rustam aka choyxona blogiga "Toshkent oshining 3 siri" maqolasini yozdi. Dizayner sahifani shunday chizdi:

  • Tepada: choyxona nomi (bosilsa — bosh sahifa) va menyu: Bosh sahifa, Menyu, Blog, Aloqa.
  • O'rtada: maqola nomi, muallif va sana, kirish so'zi. Keyin uchta bo'lim: ikkinchisida qadamlar ro'yxati va rasm, uchinchisida oshpazning iqtibosi. Maqola oxirida teglar va o'quvchilar izohlari.
  • O'ngda: "Bu ham qiziq" — boshqa maqolalarga havolalar.
  • Pastda: manzil, telefon va mualliflik belgisi.

Rejani qog'ozga to'rtburchaklar bilan chizish ham foydali. Dizaynerlar bunday sxemani wireframe ("sim karkas") deydi — rangsiz, rasmsiz, faqat bloklar.

Diqqat: Rejadagi "o'ngda" so'zi — ko'rinish haqida. Blokni ekranning o'ng tomoniga CSS qo'yadi. HTML'da esa faqat tartib bor: kodda nima oldin yozilsa, ekran o'quvchi ham, telefon ekrani ham uni oldin ko'rsatadi. Shuning uchun "Bu ham qiziq" kodda maqoladan keyin keladi.

3.2 Qadam 2 — landmarklar

Rejaning har bir katta qismiga landmark tanlaymiz:

Rejadagi qism Teg Nega
Nom va menyu header, ichida nav Sahifa boshi va asosiy navigatsiya
Maqola va izohlar main Aynan shu sahifaning mazmuni
"Bu ham qiziq" aside Bog'liq, lekin olib tashlansa maqola buzilmaydi
Manzil, mualliflik footer Sahifa haqida ma'lumot

Birinchi kod — bo'sh "suyak":

html
<body>
  <header>
    <!-- nom va asosiy menyu -->
  </header>
  <main>
    <!-- maqola -->
  </main>
  <aside>
    <!-- Bu ham qiziq -->
  </aside>
  <footer>
    <!-- manzil va mualliflik -->
  </footer>
</body>

Emmet darsidagi qisqartma buni bir soniyada yozadi: header+main+aside+footer va Tab.

Tekshirib ko'ring: Nega aside ni main ning ichiga emas, yoniga qo'ydik?

Javob

"Bu ham qiziq" bloki butun blogga tegishli, aynan shu maqolaning mazmuni emas. Ertaga boshqa maqolada ham xuddi shu blok turadi. Agar blok faqat shu maqolaga tegishli bo'lsa (masalan, maqola ichidagi "Bilasizmi?" qutisi), u article ichida bo'lardi. Ikkala joylashuv ham to'g'ri HTML — tanlov ma'noga qarab qilinadi.

3.3 Qadam 3 — sarlavha daraxti

Kod yozishdan oldin sahifaning "mundarijasi"ni chizamiz:

text
h1  Toshkent oshining 3 siri
├─ h2  1. Qozon va olov
├─ h2  2. Zirvak
├─ h2  3. Guruch tanlash
├─ h2  Izohlar
│  ├─ h3  Malika
│  └─ h3  Jasur
└─ h2  Bu ham qiziq

Eng muhim qaror — h1 nima bo'ladi? Choyxona nomimi yoki maqola nomimi?

Javob: maqola nomi. h1 — sahifaning mavzusi. Choyxona nomi har bir sahifada takrorlanadi — u oddiy havola bo'ladi. Google qidiruvida ham odam maqola nomini qidiradi, choyxona nomini emas. Bosh sahifada esa mavzu choyxonaning o'zi — u yerda h1 choyxona nomi bo'ladi (4-bo'limda).

"Bu ham qiziq" maqoladan tashqarida bo'lsa ham h2. Daraja teglarning ichma-ichligiga emas, mundarijadagi o'rniga qarab tanlanadi (outline afsonasini eslang).

Bo'sh joyni to'ldiring: blog maqolasi sahifasida h1 sifatida nima yoziladi — choyxona nomimi yoki maqola nomimi?

3.4 Qadam 4 — bloklar

Endi main ichidagi har bir blokka teg tanlaymiz. Avval "nol-savol": aniqroq teg bormi? Keyin algoritm: article → section → div.

Blok Teg Nega
Butun maqola article Telegram'ga alohida post qilsa ham tushunarli
Nom, muallif, sana header (maqola ichida) Maqolaning boshi, landmark emas
Uchta "sir" section + h2 Sarlavhali mavzuviy qismlar
Zirvak bosqichlari ol Tartib muhim — ro'yxatlar
Rasm va izohi figure + figcaption figure
Oshpaz so'zi blockquote Iqtibos
Sana time Mashina o'qiy oladigan sana
Teglar footer (maqola ichida) Maqolaning oxiri
Izohlar section, har izoh — article Bog'liq mustaqil kontent

Sezdingizmi, jadvalda div umuman yo'q. Har bir blok uchun aniqroq teg topildi. Bu normal holat: div faqat CSS uchun kerak bo'ladi, CSS esa hali yo'q.

Tepa qism — header va menyu:

html
<header>
  <a href="../">Choyxona «Bahor»</a>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="../">Bosh sahifa</a></li>
      <li><a href="../menyu/">Menyu</a></li>
      <li><a href="./">Blog</a></li>
      <li><a href="../aloqa/">Aloqa</a></li>
    </ul>
  </nav>
</header>

Sahifa blog/ papkasida turibdi, shuning uchun bosh sahifaga yo'l ../ bilan boshlanadi (Ko'p sahifali sayt darsidagi qoida). ./ — shu papkaning index.html i, ya'ni blogning bosh sahifasi.

"Blog" havolasida aria-current="page" yo'q. Nega? Bu atribut "foydalanuvchi aynan shu sahifada" degani. Biz esa blogning ro'yxat sahifasida emas, bitta maqolada turibmiz.

Endi hammasini birlashtiramiz. blog/osh-sirlari.html ning to'liq kodi:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Toshkent oshining 3 siri — Choyxona «Bahor» blogi</title>
  </head>
  <body>
    <header>
      <a href="../">Choyxona «Bahor»</a>
      <nav aria-label="Asosiy menyu">
        <ul>
          <li><a href="../">Bosh sahifa</a></li>
          <li><a href="../menyu/">Menyu</a></li>
          <li><a href="./">Blog</a></li>
          <li><a href="../aloqa/">Aloqa</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <header>
          <h1>Toshkent oshining 3 siri</h1>
          <p>Rustam aka,
          <time datetime="2026-09-27">27-sentyabr, 2026</time></p>
        </header>

        <p>Osh — har bir o'zbek xonadonining faxri. Bosh oshpazimiz
        25 yillik tajribasidan uchta sirni ochadi.</p>

        <section>
          <h2>1. Qozon va olov</h2>
          <p>Qalin devorli cho'yan qozon issiqlikni tekis
          tarqatadi.</p>
        </section>

        <section>
          <h2>2. Zirvak</h2>
          <p>Zirvak — oshning asosi. U uch bosqichda tayyorlanadi:</p>
          <ol>
            <li>Yog'ni qizdirish.</li>
            <li>Piyoz va go'shtni qovurish.</li>
            <li>Sabzini solib, dimlash.</li>
          </ol>
          <figure>
            <img src="../assets/images/zirvak.jpg"
                 alt="Qozonda qizarib pishayotgan go'sht va sabzi"
                 width="1200" height="800" loading="lazy">
            <figcaption>Zirvak tayyor bo'lishiga 10 daqiqa qoldi.
            </figcaption>
          </figure>
        </section>

        <section>
          <h2>3. Guruch tanlash</h2>
          <p>Devzira guruchi oshga o'ziga xos ta'm beradi.</p>
          <blockquote>
            <p>Guruchni yetti suvda yuvmasangiz, osh yopishqoq
            bo'ladi.</p>
          </blockquote>
        </section>

        <footer>
          <p>Teglar: retsept, osh.</p>
        </footer>

        <section>
          <h2>Izohlar</h2>
          <article>
            <h3>Malika</h3>
            <p>Zirvak haqidagi maslahat juda foydali bo'ldi!</p>
          </article>
          <article>
            <h3>Jasur</h3>
            <p>Devzira topilmasa, qaysi guruch olsa bo'ladi?</p>
          </article>
        </section>
      </article>
    </main>

    <aside>
      <h2>Bu ham qiziq</h2>
      <ul>
        <li><a href="lagmon-xamiri.html">Lag'mon xamiri qanday
        cho'ziladi</a></li>
        <li><a href="kok-choy.html">Ko'k choyni to'g'ri
        damlash</a></li>
      </ul>
    </aside>

    <footer>
      <address>Chilonzor, Toshkent ·
        <a href="tel:+998900000000">
        +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>
      </address>
      <p><small>&copy; 2026 Choyxona «Bahor»</small></p>
    </footer>
  </body>
</html>

Bir nechta detal:

  • Rasmda width, height va loading="lazy" — rasm unumdorligi darsidan. Rasm maqolaning o'rtasida, birinchi ekranda ko'rinmaydi — shuning uchun "dangasa" yuklash to'g'ri.
  • Telefon raqamida &nbsp; — raqam ikki qatorga bo'linib ketmasin (bo'sh joylar darsi). html-validate buni tel-non-breaking qoidasi bilan talab qiladi.
  • Izohlar maqola footer idan keyin keldi. footer — "maqolaning oxiri" degani, lekin u oxirgi element bo'lishi shart emas. Izohlar maqolaga tegishli, shuning uchun article ichida qoldi.

3.5 Qadam 5 — tekshirish

Sahifa brauzerda ochiladi — lekin parser darsida ko'rdik: bu to'g'rilik belgisi emas. Uch tomondan tekshiramiz.

1. html-validate. choyxona papkasida validatsiya darsidagi .htmlvalidate.json bor (heading-level qoidasi bilan). Terminalda:

bash
npx html-validate blog/osh-sirlari.html

Buyruq Windows, macOS va Linux'da bir xil. PowerShell skript xatosini bersa — npx.cmd yozing. Xato bo'lmasa, vosita hech narsa yozmaydi. Jimlik — yaxshi xabar.

2. Nu HTML Checker. validator.w3.org/nu sahifasida "File Upload" ni tanlang va faylni yuklang. Show qatoridagi outline belgisini ham yoqing. Natija:

text
The document validates according to the specified schema(s).

Pastda "Heading-level outline" bo'limi chiqadi — sahifangizning sarlavhalar daraxti. Uni 3.3-qadamda chizgan daraxtingiz bilan solishtiring. Bir xil bo'lishi kerak.

3. DevTools. Sahifani Live Server'da oching, F12 → Elements → Accessibility yorlig'i → Enable full-page accessibility tree (semantik HTML darsida yoqqan edik). Daraxtda shu rollarni topasiz:

text
banner
  navigation "Asosiy menyu"
main
  article
complementary
contentinfo

banner — sahifa header i, complementary — aside, contentinfo — sahifa footer i. Maqola ichidagi header va footer landmark sifatida chiqmaydi — landmarklar darsida aytganimizdek.

3.6 Vosita tutmaydigan narsalar: nazorat ro'yxati

Validator grammatikani tekshiradi, ma'noni emas. Oxirida sahifani o'zingiz shu ro'yxat bo'yicha ko'zdan kechiring:

# Savol Blogda
1 h1 sahifa mavzusimi? Ha — maqola nomi
2 Deyarli hamma kontent biror landmark ichidami? Ha
3 Har bir section ning sarlavhasi bormi? Ha
4 Bir nechta nav bo'lsa, har biri nomlanganmi? Bitta, nomlangan
5 aria-current faqat joriy sahifa havolasidami? Hech qayerda — to'g'ri
6 Har rasmning alt i ma'noli? Ha
7 Kod tartibi — o'qish tartibimi? Ha
8 div faqat CSS uchunmi? div yo'q

Bu ro'yxatni saqlab qo'ying — har bir yangi sahifada kerak bo'ladi.

4. 2-loyiha: bosh sahifa (qisman yechilgan misol)

Endi navbat sizda. Bu safar qarorlarning bir qismini o'zingiz qabul qilasiz.

4.1 Reja

  • Tepada — xuddi blogdagidek nom va menyu. Faqat bu safar "Bosh sahifa" — joriy sahifa.
  • Choyxona nomi katta harflarda, ostida shior: "1998-yildan beri Chilonzorda".
  • "Bugungi menyu": uchta taom narxi bilan va "To'liq menyu" havolasi.
  • "Nega aynan biz?": uchta afzallik.
  • "Yaqin tadbirlar": ikkita tadbir — har birining nomi, sanasi va qisqa matni.
  • "Mijozlar sharhlari": ikkita sharh.
  • Pastda — qisqa menyu (Tadbirlar, Biz haqimizda), manzil, telefon va mualliflik.

4.2 Qarorlarni o'zingiz qabul qiling

Har bir qator uchun teg nomini yozing:

  1. Choyxona nomi va shiorini birlashtiruvchi teg:
  2. "Nega aynan biz?" dagi uchta afzallik (aniqroq teg bor!):
  3. Har bir tadbir kartochkasi:
  4. Sahifada ikkita nav bor. Ularni farqlash uchun atribut:
  5. Bosh sahifadagi "Bosh sahifa" havolasiga qo'shiladigan atribut:

Sarlavha daraxti:

text
h1  Choyxona «Bahor»  (shior — hgroup ichida p)
├─ h2  Bugungi menyu
├─ h2  Nega aynan biz?
├─ h2  Yaqin tadbirlar
│  ├─ h3  Osh bayrami
│  └─ h3  Maqom kechasi
└─ h2  Mijozlar sharhlari
   ├─ h3  Malika
   └─ h3  Jasur

Blogdan farqi: bu yerda h1 — choyxona nomi, chunki bosh sahifaning mavzusi choyxonaning o'zi.

4.3 To'liq kod

Avval o'zingiz yozib ko'ring, keyin solishtiring.

Yechim: index.html
html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Choyxona «Bahor» — Chilonzordagi milliy taomlar</title>
  </head>
  <body>
    <header>
      <a href="./">Choyxona «Bahor»</a>
      <nav aria-label="Asosiy menyu">
        <ul>
          <li><a href="./" aria-current="page">Bosh sahifa</a></li>
          <li><a href="menyu/">Menyu</a></li>
          <li><a href="blog/">Blog</a></li>
          <li><a href="aloqa/">Aloqa</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <hgroup>
        <h1>Choyxona «Bahor»</h1>
        <p>1998-yildan beri Chilonzorda</p>
      </hgroup>

      <section>
        <h2>Bugungi menyu</h2>
        <ul>
          <li><a href="menyu/#osh">Toshkent oshi</a>
            — 35&nbsp;000 so'm</li>
          <li><a href="menyu/#lagmon">Lag'mon</a>
            — 28&nbsp;000 so'm</li>
          <li><a href="menyu/#manti">Manti</a>
            — 30&nbsp;000 so'm</li>
        </ul>
        <p><a href="menyu/">To'liq menyu</a></p>
      </section>

      <section>
        <h2>Nega aynan biz?</h2>
        <ul>
          <li>Osh har kuni ertalab yangi damlanadi.</li>
          <li>Tandir non — bepul, xohlagancha.</li>
          <li>Oilaviy xonalar va bolalar burchagi bor.</li>
        </ul>
      </section>

      <section>
        <h2>Yaqin tadbirlar</h2>
        <article>
          <h3>Osh bayrami</h3>
          <p><time datetime="2026-10-05">5-oktabr</time>, 7:00 da.
          Birinchi 50 mehmonga osh bepul.</p>
          <p><a href="tadbirlar/osh-bayrami.html">Batafsil</a></p>
        </article>
        <article>
          <h3>Maqom kechasi</h3>
          <p><time datetime="2026-10-10">10-oktabr</time>, 19:00 da.
          Jonli ijro.</p>
        </article>
      </section>

      <section>
        <h2>Mijozlar sharhlari</h2>
        <article>
          <h3>Malika</h3>
          <blockquote>
            <p>Eng mazali osh shu yerda!</p>
          </blockquote>
        </article>
        <article>
          <h3>Jasur</h3>
          <blockquote>
            <p>Choyi ham, xizmati ham a'lo.</p>
          </blockquote>
        </article>
      </section>
    </main>

    <footer>
      <nav aria-label="Pastki menyu">
        <ul>
          <li><a href="tadbirlar/">Tadbirlar</a></li>
          <li><a href="biz-haqimizda/">Biz haqimizda</a></li>
        </ul>
      </nav>
      <address>Chilonzor, Toshkent ·
        <a href="tel:+998900000000">
        +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>
      </address>
      <p><small>&copy; 2026 Choyxona «Bahor»</small></p>
    </footer>
  </body>
</html>

Qarorlar izohi:

  • hgroup — shior yangi bo'lim sarlavhasi emas, shuning uchun h2 emas, p.
  • Afzalliklar — ul. Maketda ular uchta chiroyli kartochka bo'lishi mumkin, lekin ma'nosi — ro'yxat. Kartochka ko'rinishini keyin CSS beradi.
  • Tadbirlar va sharhlar — article. Har biri alohida ulashilsa ham tushunarli. Har birida h3 — Nu Checker "Article lacks heading" deb ogohlantirmaydi.
  • Taom havolalari menyu/#osh — menyu sahifasidagi aniq taomga olib boradi (fragment havolalar).
  • Ikkinchi nav — footer ichida, o'z nomi bilan.

Tekshiruv: npx html-validate index.html — jim, Nu Checker — "The document validates...".

5. Ko'p uchraydigan xatolar

5.1 Maketga qarab teg tanlash

Maketda "35 000 so'm" katta va qalin — dasturchi uni h2 qiladi. O'ng ustun — avtomatik aside. Tuzatish: har blokka "bu nima?" deb savol bering, "qanday ko'rinadi?" deb emas. Katta narx — strong yoki oddiy p. O'ng ustun — ichidagi mazmunga qarab.

5.2 Logotip har sahifada h1

Sahifa header ida choyxona nomi h1, maqola nomi ham h1. html-validate:

text
13:10  error  Multiple <h1> are not allowed  heading-level

Tarjimasi: "Bir nechta h1 ga ruxsat yo'q." Nu Checker ham ogohlantiradi: "Consider using the “h1” element as a top-level heading only" — "h1 ni faqat eng yuqori darajali sarlavha uchun ishlating". Tuzatish: ichki sahifalarda logotip — oddiy havola, h1 — sahifa mavzusi.

5.3 Yon blokda darajani sakrash

aside da h2 dan keyin to'g'ridan-to'g'ri h4, "chunki kichikroq ko'rinadi". Nu Checker:

text
Error: The heading “h4” (with computed level 4) follows the heading “h2” (with computed level 2), skipping 1 heading level.

Tarjimasi: "4-darajali h4 sarlavhasi 2-darajali h2 dan keyin keldi — bitta daraja o'tkazib yuborildi." Tuzatish: h3. Kichik ko'rinishni keyin CSS beradi.

5.4 Landmarkdan tashqarida qolgan kontent

footer dan keyin body ichida yetim "Yuqoriga" havolasi yoki main dan oldin reklama banneri. Validator jim turadi, lekin ekran o'quvchi foydalanuvchisi landmarklar bo'yicha sakrasa, bu kontentni o'tkazib yuboradi. Tuzatish: har bir bo'lakni mos landmarkka joylang — "Yuqoriga" havolasi footer ichiga.

5.5 Hamma sahifada bir xil title

Har sahifada <title>Choyxona «Bahor»</title>. Brauzer yorliqlarida, tarixda va Google natijalarida hamma sahifa bir xil ko'rinadi. Tuzatish: "Sahifa nomi — Sayt nomi" shakli: "Toshkent oshining 3 siri — Choyxona «Bahor» blogi".

6. Mashqlar

1-mashq (oson): Rejadan tegga

  1. Sahifa pastidagi manzil va mualliflik belgisi →
  2. Maqola ostidagi har bir o'quvchi izohi →
  3. Maqola ichida sarlavhasi bor "Zirvak" bo'limi →
Yechim
  1. footer — sahifa haqida ma'lumot (contentinfo landmarki). Manzil uning ichida address bo'ladi.
  2. article — har bir izoh mustaqil kontent; izohlar bo'limi esa section.
  3. section — maqolaning sarlavhali mavzuviy qismi. Alohida olinsa, "qaysi oshning zirvagi?" degan savol tug'iladi — demak article emas.

2-mashq (o'rta): Aloqa sahifasini tuzating

Bu aloqa/index.html ning body qismi. Uni semantik qilib qayta yozing: landmarklar, to'g'ri sarlavhalar va address. Yo'llar ../ bilan (sahifa aloqa/ papkasida).

html
<div class="tepa">
  <div class="logo"><a href="../">Choyxona «Bahor»</a></div>
  <div class="menyu">
    <a href="../">Bosh sahifa</a>
    <a href="../menyu/">Menyu</a>
    <a href="./">Aloqa</a>
  </div>
</div>
<div class="asosiy">
  <div class="katta">Biz bilan bog'laning</div>
  <div class="blok">
    <h3>Manzil</h3>
    <p>Chilonzor, 7-mavze, Toshkent</p>
  </div>
  <div class="blok">
    <h3>Ish vaqti</h3>
    <p>Har kuni 7:00 dan 23:00 gacha</p>
  </div>
</div>
<div class="past">© 2026 Choyxona «Bahor»</div>
Yechim
html
<header>
  <a href="../">Choyxona «Bahor»</a>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="../">Bosh sahifa</a></li>
      <li><a href="../menyu/">Menyu</a></li>
      <li><a href="./" aria-current="page">Aloqa</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Biz bilan bog'laning</h1>
  <section>
    <h2>Manzil</h2>
    <address>Chilonzor, 7-mavze, Toshkent</address>
  </section>
  <section>
    <h2>Ish vaqti</h2>
    <p>Har kuni 7:00 dan 23:00 gacha</p>
  </section>
</main>
<footer>
  <p><small>&copy; 2026 Choyxona «Bahor»</small></p>
</footer>
  1. div.tepa, div.asosiy, div.past → header, main, footer.
  2. Menyu — nomli nav va ul; joriy sahifa — aria-current="page".
  3. div.katta — aslida sahifa sarlavhasi: h1. Ichki sarlavhalar h3 dan h2 ga tushdi — h1 dan keyin h3 kelishi daraja sakrashi edi.
  4. Manzil — address ichida: bu choyxona egasining kontakti. div.blok lar sarlavhali mavzuviy qismlar — section.

3-mashq (qiyin): Tadbirlar sahifasi — noldan

tadbirlar/index.html sahifasini besh qadam bilan quring. Reja:

  • Tepada — nom va asosiy menyu (joriy sahifa — "Tadbirlar").
  • Sahifa nomi "Tadbirlar" va bir gaplik kirish.
  • "Yaqin tadbirlar" bo'limi: ikkita tadbir (nomi, sanasi time bilan, qisqa matn, "Batafsil" havolasi).
  • "O'tgan tadbirlar" bo'limi: bitta tadbir rasmi va izohi bilan.
  • Yon blok: "Tadbirga yozilish" — telefon raqami.
  • Pastda — manzil va mualliflik.

Topshiriq:

  1. Avval qog'ozga sarlavha daraxtini chizing.
  2. Keyin kodni yozing.
  3. npx html-validate tadbirlar/index.html — jim bo'lsin.
  4. Nu Checker'da outline'ni yoqib, daraxtingiz bilan solishtiring.
Yechim

Sarlavha daraxti:

text
h1  Tadbirlar
├─ h2  Yaqin tadbirlar
│  ├─ h3  Osh bayrami
│  └─ h3  Maqom kechasi
├─ h2  O'tgan tadbirlar
│  └─ h3  Navro'z sayli
└─ h2  Tadbirga yozilish

Kod:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Tadbirlar — Choyxona «Bahor»</title>
  </head>
  <body>
    <header>
      <a href="../">Choyxona «Bahor»</a>
      <nav aria-label="Asosiy menyu">
        <ul>
          <li><a href="../">Bosh sahifa</a></li>
          <li><a href="../menyu/">Menyu</a></li>
          <li><a href="./" aria-current="page">Tadbirlar</a></li>
          <li><a href="../aloqa/">Aloqa</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Tadbirlar</h1>
      <p>Choyxonamizda har oy bayram va kechalar o'tadi.</p>

      <section>
        <h2>Yaqin tadbirlar</h2>
        <article>
          <h3>Osh bayrami</h3>
          <p><time datetime="2026-10-05">5-oktabr</time>, 7:00 da.
          Birinchi 50 mehmonga osh bepul.</p>
          <p><a href="osh-bayrami.html">Batafsil</a></p>
        </article>
        <article>
          <h3>Maqom kechasi</h3>
          <p><time datetime="2026-10-10">10-oktabr</time>, 19:00 da.
          Jonli ijro.</p>
          <p><a href="maqom-kechasi.html">Batafsil</a></p>
        </article>
      </section>

      <section>
        <h2>O'tgan tadbirlar</h2>
        <article>
          <h3>Navro'z sayli</h3>
          <figure>
            <img src="../assets/images/navroz.jpg"
                 alt="Hovlida sumalak qozoni atrofida mehmonlar"
                 width="1200" height="800" loading="lazy">
            <figcaption>
              <time datetime="2026-03-21">21-mart</time>:
              sumalak tun bo'yi pishdi.
            </figcaption>
          </figure>
        </article>
      </section>
    </main>

    <aside>
      <h2>Tadbirga yozilish</h2>
      <p>Qo'ng'iroq qiling:
        <a href="tel:+998900000000">
        +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a></p>
    </aside>

    <footer>
      <address>Chilonzor, Toshkent</address>
      <p><small>&copy; 2026 Choyxona «Bahor»</small></p>
    </footer>
  </body>
</html>

E'tibor bering:

  • Har bir tadbir — article: o'z nomi, sanasi va havolasi bilan alohida tura oladi.
  • "O'tgan tadbirlar" dagi tadbirda ham h3 bor — sarlavhasiz article ogohlantirish berardi.
  • "Tadbirga yozilish" butun saytga tegishli yon ma'lumot — aside. Unda h2, chunki mundarijada u "Yaqin tadbirlar" bilan bir darajada.
  • html-validate jim, Nu Checker "The document validates..." deydi, outline esa chizilgan daraxt bilan bir xil.

7. Real ishda

  • Maketdan kodga. Frontend dasturchining ish kuni ko'pincha aynan shunday boshlanadi: Figma'dagi maket ustida bloklarni belgilash, keyin skelet. Figma — dizaynerlar maket chizadigan dastur, uni kursda keyinroq ko'rasiz. Tajribali dasturchi besh qadamni bir necha daqiqada, xayolan bajaradi.
  • React va Next.js'da (kursda o'rganamiz) sahifa ikki qismga bo'linadi: "layout" — header, nav, footer bir marta yoziladi; "sahifa" — faqat main ichidagi mazmun. Bugungi skelet aynan shu bo'linishning asosi.
  • Accessibility auditi birinchi navbatda landmarklar va sarlavha daraxtini tekshiradi. WCAG standartida bu "Info and Relationships" ("Ma'lumot va munosabatlar") talabi: tuzilma ko'z bilangina emas, kodda ham ko'rinishi kerak.
  • Bloglar va yangilik saytlari (WordPress shablonlari, Medium, kun.uz) — maqola sahifasining tuzilishi deyarli har doim bugungi blog skeleti kabi.
  • Yakuniy loyiha. HTML qismi oxiridagi portfolio sayt ham shu besh qadam bilan quriladi.

Xulosa

  • Skelet besh qadamda quriladi: reja → landmarklar → sarlavha daraxti → bloklar → tekshirish.
  • Birinchi uch qadamda kod yozilmaydi — avval o'ylash.
  • h1 — sahifa mavzusi: maqola sahifasida maqola nomi, bosh sahifada choyxona nomi.
  • Kod tartibi — o'qish tartibi; "o'ngda" yoki "tepada" — CSS ishi.
  • div faqat CSS uchun kerak; aniqroq teg topilsa, u ishlatiladi.
  • Tekshiruv uch qatlamli: html-validate, Nu Checker (outline bilan), DevTools accessibility daraxti — va nazorat ro'yxati.

Keyingi dars: Jadval asoslari — qator va ustunli ma'lumotni table bilan belgilash va nega jadval sahifa joylashuvi uchun emas.

Manbalar

  • MDN: "Document and website structure" — developer.mozilla.org
  • W3C WAI: "Page Structure Tutorial" — w3.org/WAI/tutorials/page-structure
  • W3C Nu HTML Checker — validator.w3.org/nu
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Semantik HTML amaliyoti: blog va bosh sahifa skeletini noldan qurish — IlmHamroh