IlmHamroh
JavaScript Full-stack/4-qism. HTML34/86-dars9 daqiqa
Mundarija (26)

HTML sahifa landmarklari: header, nav, main, aside, footer va search

Qisqacha: Landmark teglar sahifani katta hududlarga bo'ladi: tepa qism (header), menyu (nav), asosiy kontent (main), yon ma'lumot (aside), pastki qism (footer) va qidiruv (search). Ekran o'quvchi foydalanuvchisi ular orasida bitta tugma bilan sakraydi — xuddi savdo markazidagi qavat xaritasidan kerakli do'konni topgandek. main sahifada bitta bo'ladi, bir nechta nav esa har biri o'z nomi bilan.

Bu darsda

  • Oltita landmark tegni va ularning vazifasini bilasiz.
  • Choyxona sahifasini landmarklar bilan to'liq tuzasiz.
  • header va footer kontekstga qarab qachon landmark bo'lishini tushunasiz.
  • Bir nechta nav ni aria-label bilan nomlaysiz.
  • Landmark xatolarini validator xabarlaridan taniysiz.

Oldin bilishingiz kerak: Semantik HTML nima va nega kerak.

1. Nega bu kerak?

Savdo markaziga kirdingiz. Kirish joyida qavatlar xaritasi: "1-qavat — oziq-ovqat, 2-qavat — kiyim, kassalar — chiqish oldida". Siz butun markazni aylanib chiqmaysiz — xaritaga qaraysiz va kerakli joyga borasiz.

Veb-sahifa ham shunday hududlarga bo'linadi: tepada logotip va menyu, o'rtada asosiy kontent, yonda qo'shimcha ma'lumot, pastda kontaktlar. Ko'radigan odam buni bir qarashda tushunadi. Ekran o'quvchi foydalanuvchisi uchun esa hududlarni HTML aytishi kerak.

O'tgan darsda ko'rdik: brauzer teglardan rol oladi. Ba'zi teglarning roli — landmark ("mo'ljal", "belgi"): sahifaning katta hududi. Ekran o'quvchida maxsus tugma bor — masalan, NVDA dasturida D — u keyingi landmark'ga sakratadi. Foydalanuvchi "asosiy kontent" ga to'g'ridan-to'g'ri o'tadi va har safar menyuni tinglab o'tirmaydi.

2. Landmark teglar

2.1 Butun sahifa tuzilmasi

Choyxona sahifasining landmarklar bilan to'liq tuzilishi:

html
<body>
  <header>
    <a href="./">
      <img src="assets/images/logo.svg"
           alt="Choyxona «Bahor» — bosh sahifa"
           width="160" height="40">
    </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="aloqa/">Aloqa</a></li>
      </ul>
    </nav>
  </header>

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

  <aside>
    <h2>Bu hafta</h2>
    <p>5-oktabr — osh bayrami!</p>
  </aside>

  <footer>
    <p><small>&copy; 2026 Choyxona «Bahor»</small></p>
  </footer>
</body>

Ekranda hech narsa o'zgarmadi — bu teglarning o'z ko'rinishi yo'q (xuddi div kabi). O'zgarish — accessibility daraxtida: endi sahifada beshta aniq hudud bor.

Ko'p sahifali sayt darsida navigatsiya uchun oddiy ul yozgan edik va "to'g'ri tuzilmani landmarklar darsida ko'ramiz" degan edik. Mana u: nav ichida ul.

2.2 Har bir teg

Teg Hudud Nima kiradi
header Sahifa boshi Logotip, sayt nomi, asosiy menyu, qidiruv
nav Navigatsiya Asosiy menyu, "non ushoqlari", sahifalar raqami
main Asosiy kontent Sahifaning o'ziga xos mazmuni
aside Yon ma'lumot "Bu ham qiziq", muallif haqida, reklama
footer Sahifa oxiri Mualliflik, kontaktlar, qo'shimcha havolalar
search Qidiruv Qidiruv formasi

Keling, har biriga batafsilroq qaraymiz.

3. main — asosiy kontent

main — sahifaning o'ziga xos mazmuni: shu sahifani boshqalardan ajratib turadigan narsa. Logotip, menyu va pastki qism har sahifada takrorlanadi — ular main ga kirmaydi. Menyu sahifasida main ichida — menyu, aloqa sahifasida — kontaktlar.

Qoidalar:

  • Sahifada bitta ko'rinadigan main.
  • main boshqa landmark ichida bo'lmaydi: header, footer, nav, aside yoki article ichida — xato.
  • h1 odatda main ning boshida turadi.

Ikkita main — Nu HTML Checker xatosi:

text
Error: A document must not include more than one visible “main” element.

Tarjimasi: "Hujjatda bittadan ortiq ko'rinadigan main elementi bo'lmasligi kerak."

body ning bevosita ichidagi header — butun sahifaning boshi. Accessibility daraxtida u banner roli oladi. footer esa — contentinfo ("kontent haqida ma'lumot"): mualliflik, kontaktlar, maxfiylik siyosati havolalari.

Iqtibos darsida ko'rgan address ko'pincha aynan footer ichida turadi — sayt egasining kontaktlari.

4.2 Maqola ichidagi header

header va footer faqat butun sahifa uchun emas. Ular har qanday mustaqil blokning boshi va oxiri bo'lishi mumkin — masalan, keyingi darsda ko'radigan article ichida:

html
<article>
  <header>
    <h2>Osh bayrami qanday o'tdi</h2>
    <p>Muallif: Malika,
    <time datetime="2026-10-06">6-oktabr</time></p>
  </header>
  <p>Kecha ertalab 500 dan ortiq mehmon keldi...</p>
  <footer>
    <p>Teglar: tadbir, osh</p>
  </footer>
</article>

Bu yerdagi header — maqolaning boshi, landmark emas. Brauzer buni o'zi aniqlaydi: header article (yoki main, section, aside) ichida bo'lsa, u banner rolini olmaydi.

Diqqat: header — sarlavha emas. Nomi o'xshash, lekin header — hudud (ichida sarlavha, logotip, menyu bo'lishi mumkin), sarlavha esa h1–h6. <header>Choyxona</header> — h1 ning o'rnini bosmaydi.

5. nav — faqat asosiy navigatsiya

nav — sahifadagi asosiy navigatsiya bloklari: sayt menyusi, "non ushoqlari" (Bosh sahifa → Menyu → Issiq taomlar), sahifalar raqamlari.

Har bir havolalar guruhi nav bo'lishi shart emas. Sahifa pastidagi "Maxfiylik siyosati · Foydalanish shartlari" — footer ichidagi oddiy ro'yxat yetarli. Matn ichidagi havolalar esa umuman nav emas.

5.1 Bir nechta nav — har biriga nom

Sahifada ikkita nav bo'lsa (tepada asosiy menyu, pastda qisqa menyu), ekran o'quvchi ikkalasini "navigatsiya" deb aytadi — foydalanuvchi qaysi biri ekanini bilmaydi. Har biriga nom bering:

html
<nav aria-label="Asosiy menyu">...</nav>
...
<nav aria-label="Pastki menyu">...</nav>

aria-label — elementga ko'rinmas nom beradi. SVG darsida uni ikonkali tugmada ishlatgan edik. Endi ekran o'quvchi "Asosiy menyu, navigatsiya" deydi.

html-validate nomsiz takroriy landmarklarni xato deydi:

text
Landmarks must have a non-empty and unique accessible name (aria-label or aria-labelledby)

Tarjimasi: "Landmarklar bo'sh bo'lmagan va takrorlanmas nomga ega bo'lishi kerak (aria-label yoki aria-labelledby)."

Nomga "navigatsiya" so'zini qo'shmang: "Asosiy menyu navigatsiyasi" — ekran o'quvchi "navigatsiya" ni o'zi qo'shadi.

6. aside — yon ma'lumot

aside — asosiy kontentga bog'liq, lekin undan ajratsa bo'ladigan ma'lumot. Olib tashlansa, asosiy mazmun buzilmaydi:

  • Blog maqolasi yonidagi "Muallif haqida".
  • "Bu ham qiziq" havolalari.
  • E'lon, reklama bloki.
  • Maqola ichidagi "Bilasizmi?" qutisi.

Ekranda u ko'pincha yon ustun bo'ladi — lekin bu CSS qarori. HTML faqat ma'noni aytadi: "bu qo'shimcha".

7. search — qidiruv hududi

search — qidiruv formasi uchun yangi landmark teg (2023-yilda barcha asosiy brauzerlarga qo'shildi):

html
<search>
  <form action="menyu/">
    <input type="search" name="q" aria-label="Menyudan qidirish">
    <button type="submit">Qidirish</button>
  </form>
</search>

Formalarni hali o'rganmadik — ularni Forma qanday ishlaydi darsidan boshlaymiz. Hozircha bilish kifoya: qidiruv bloki search ichiga olinadi va ekran o'quvchi uni alohida hudud sifatida topadi.

8. Landmarklarni tekshirish

  • DevTools accessibility daraxti (o'tgan dars): banner, navigation, main, complementary, contentinfo, search rollarini ko'rasiz.
  • "Landmarks" kengaytmasi — Chrome va Firefox uchun bepul kengaytma: sahifadagi hamma landmarklarni ro'yxat qilib ko'rsatadi va ular orasida sakrashga imkon beradi. Kengaytmalar darsidagi qoidani eslang: muallif va reytingni tekshiring.
  • Qoida: sahifaning deyarli hamma kontenti biror landmark ichida bo'lsin. Landmarkdan tashqarida qolgan matnni ekran o'quvchi foydalanuvchisi o'tkazib yuborishi mumkin. Accessibility auditi vositalari buni alohida tekshiradi.

Bo'sh joyni to'ldiring: sahifada nechta ko'rinadigan main bo'lishi mumkin?

Tekshirib ko'ring: Blog sahifasida: tepada sayt menyusi, o'rtada maqola, o'ngda "Eng ko'p o'qilganlar" ro'yxati, pastda mualliflik yozuvi. Har bir qism qaysi landmark?

Javob

Sayt menyusi — header ichida nav. Maqola — main ichida (va maqolaning o'zi — article, keyingi darsda). "Eng ko'p o'qilganlar" — aside. Mualliflik — footer.

9. Ko'p uchraydigan xatolar

9.1 main boshqa landmark ichida

html
<header>
  <main>...</main>
</header>
text
Error: The “main” element must not appear as a descendant of the “header” element.

Tarjimasi: "main elementi header elementining avlodi bo'lmasligi kerak." Tuzatish: main — body ning bevosita bolasi, header va footer bilan yonma-yon.

9.2 Har bir havolalar guruhi — nav

Sahifada yettita nav: menyu, ijtimoiy tarmoqlar, teglar, pastki havolalar... Ekran o'quvchi foydalanuvchisi yettita "navigatsiya" ni eshitadi va asosiysini topa olmaydi. Tuzatish: nav — faqat asosiy navigatsiya uchun (odatda 1–3 ta), qolganlari — oddiy ro'yxat.

9.3 Landmarklar o'rniga div lar

html
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>

Klass nomlari to'g'ri, lekin brauzer ularni o'qimaydi — landmarklar yo'q. Tuzatish: header, main, footer teglari. Klasslar kerak bo'lsa, ular ham qolishi mumkin: <header class="sayt-boshi">.

9.4 Kontent landmarklardan tashqarida

main dan keyin body ichida yetim paragraflar va rasmlar. Tuzatish: har bir kontent qismini tegishli landmarkka joylang.

10. Mashqlar

1-mashq (oson): Landmarkni tanlang

  1. Logotip va asosiy menyu turgan sahifa boshi →
  2. Sahifaning o'ziga xos mazmuni →
  3. Mualliflik va kontaktlar →
Yechim
  1. header (ichida nav).
  2. main — sahifada bitta.
  3. footer, ichida ko'pincha address va small.

2-mashq (o'rta): Tuzatish

html
<div class="top">
  <nav><a href="./">Bosh</a> <a href="menyu/">Menyu</a></nav>
</div>
<main>
  <h1>Menyu</h1>
</main>
<main>
  <p>Bu hafta aksiya!</p>
</main>
<div class="bottom">
  <nav><a href="maxfiylik.html">Maxfiylik</a></nav>
</div>
Yechim
html
<header>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./">Bosh sahifa</a></li>
      <li><a href="menyu/">Menyu</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Menyu</h1>
</main>
<aside>
  <p>Bu hafta aksiya!</p>
</aside>
<footer>
  <p><a href="maxfiylik.html">Maxfiylik siyosati</a></p>
</footer>
  1. div.top → header, menyu — nomli nav va ro'yxat.
  2. Ikkinchi main — aslida yon e'lon: aside.
  3. div.bottom → footer. Bitta havola uchun nav shart emas — oddiy paragraf.

3-mashq (qiyin): Butun sayt landmarklarda

  1. Choyxona saytining hamma sahifalarini landmarklar bilan qayta tuzing: header (logotip + nav), main, kerak bo'lsa aside, footer (address bilan).
  2. Pastki qismga ikkinchi nav qo'shing ("Pastki menyu") va ikkala nav ni nomlang.
  3. DevTools accessibility daraxtida hamma landmark rollarini tekshiring.
  4. npx html-validate "**/*.html" — xato 0.
Yechim

Har bir sahifaning skeleti (menyu sahifasi uchun):

html
<body>
  <header>
    <a href="../"><img src="../assets/images/logo.svg"
      alt="Choyxona «Bahor» — bosh sahifa"
      width="160" height="40"></a>
    <nav aria-label="Asosiy menyu">
      <ul>
        <li><a href="../">Bosh sahifa</a></li>
        <li><a href="./" aria-current="page">Menyu</a></li>
        <li><a href="../aloqa/">Aloqa</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Bugungi menyu</h1>
    ...
  </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, 7-mavze, Toshkent</address>
  </footer>
</body>

"**/*.html" — hamma ichki papkalardagi HTML fayllar. Takroriy header/footer kodini har sahifaga nusxalash hozircha normal — bu muammoni freymvorklar hal qiladi (Ko'p sahifali sayt darsida gaplashgan edik).

11. Real ishda

  • Deyarli har bir zamonaviy saytning skeleti — header, nav, main, footer. React va Next.js loyihalarida (kursda o'rganamiz) ular "layout" komponentida bir marta yoziladi va hamma sahifaga qo'shiladi.
  • "Asosiy kontentga o'tish" havolasi — ko'p saytlarda eng birinchi element: klaviatura foydalanuvchisi uni bosib, menyuni o'tkazib main ga o'tadi. Uni Klaviatura va fokus boshqaruvi darsida qo'shamiz.
  • Accessibility auditlari landmarklarni birinchi tekshiradi: main bormi, nav lar nomlanganmi, kontent landmarklardan tashqarida qolganmi.
  • Brauzer o'qish rejimi asosiy matnni ko'pincha main va article dan topadi.

Xulosa

  • Landmarklar: header (banner), nav, main, aside (complementary), footer (contentinfo), search.
  • main — sahifaning o'ziga xos mazmuni, bitta, boshqa landmark ichida emas.
  • header/footer — body ichida bo'lsa sahifa landmarki; article ichida — shunchaki blok boshi va oxiri.
  • header sarlavha emas — sarlavha h1–h6.
  • nav — faqat asosiy navigatsiya; bir nechta bo'lsa, har biriga aria-label.
  • Deyarli hamma kontent biror landmark ichida bo'lsin.

Keyingi dars: article, section yoki div: qanday tanlash — mustaqil kontent, mavzuviy bo'lim va oddiy guruhni farqlash algoritmi.

Manbalar

  • MDN: <header>, <nav>, <main>, <aside>, <footer>, <search> — developer.mozilla.org
  • W3C WAI: "Page Regions" tutorial va "ARIA Landmarks Example" — w3.org/WAI
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML sahifa landmarklari: header, nav, main, aside, footer va search — IlmHamroh