AXV

HTML5 semantik elementlari

header, nav, main, section, article, aside, footer arxitekturasi

8-sinfWeb Full-stack3-hafta · 7-dars

Bugungi dars rejasi

01. Semantika nima?

HTML4 «div sho'rvasi» muammosi va HTML5 inqilobi.

02. 7 ta tayanch teg

header, nav, main, section, article, aside, footer vazifalari.

03. SEO va a11y

Qidiruv tizimlari va screen readerlar uchun toza arxitektura.

01

HTML5 va Semantika tushunchasi

«Div sho'rvasi»dan professional kodlashga o'tish

HTML4 «Div sho'rvasi» vs HTML5 Semantika

Eski HTML4 (Nosemantik) <div id='header'> <div id='nav'> <div id='content'> <div id='footer'> Zamonaviy HTML5 (Semantik) <header> <nav> <main> (<article>, <section>) <footer>

Nosemantik va Semantik elementlar

Nosemantik teglar

Hech qanday ma'no anglatmaydi, faqat konteyner yoki stillash uchun xizmat qiladi:

  • <div> — blokli konteyner
  • <span> — satr ichidagi konteyner
Faqat CSS dizayni uchun ishlatiladi

Semantik teglar

Brauzerga ham, dasturchiga ham blokning mohiyatini aniq bildirib turadi:

  • <header>, <nav>, <main>
  • <section>, <article>, <aside>
  • <footer>
Google qidiruvi va ekran o'quvchilar uchun qulay

Semantik kodlash raqamlarda

0
Dunyodagi yetakchi saytlar HTML5 semantikasidan foydalanadi
0
Qidiruv robotlari sahifani tezroq tahlil qiladi
0
Zamonaviy barcha brauzerlar to'liq qo'llab-quvvatlaydi
To'g'ri semantika — professional front-end dasturchining eng birinchi belgisi!
02

Asosiy semantik teglar anatomiyasi

7 ta asosiy blok va ularning aniq vazifalari

Veb-sahifaning semantik skeleti

<header> — Logotip, sarlavha va shior <nav> — Asosiy menyu havolalari <main> — Sahifaning yagona asosiy qismi <section> — Mavzuli bo'lim <article> — Mustaqil yangilik yoki post <aside> Yon panel (sidebar) Reklama / Muallif <footer> — Mualliflik huquqi (Copyright) va aloqa ma'lumotlari

<article> yoki <section>?

O'zicha to'liq ma'noga ega

Ushbu blokni boshqa saytga yoki gazeta sahifasiga ko'chirib o'tkazsangiz ham o'z mustaqil ma'nosini yo'qotmaydi.

Qayerda ishlatiladi?

Blog posti, yangilik xabari, mahsulot kartochkasi, foydalanuvchi sharhi yoki forumdagi izoh.

Mavzuni birlashtiruvchi qism

Sahifaning ma'lum bir mantiqiy bobini yoki bo'limini ifodalaydi. Odatda o'zining <h2> sarlavhasiga ega bo'ladi.

Qayerda ishlatiladi?

«Biz haqimizda», «Xizmatlar», «Aloqa bo'limi» yoki bitta maqola ichidagi alohida fasllar.

<main> va <aside> qat'iy qoidalari

<main> — Faqat 1 ta!

Sahifada takrorlanmaydigan asosiy kontent. Qat'iy qoida: butun bitta HTML sahifasida faqat bitta <main> bo'lishi mumkin.

header, nav yoki footer ichiga aslo qo'yilmaydi!

<aside> — Qo'shimcha ma'lumot

Asosiy mavzuga bevosita aloqador bo'lmagan yon bloklar: qidiruv paneli, o'xshash maqolalar, reklama yoki muallif xabari.

Sidebar yoki chekka panel sifatida ishlatiladi
03

Amaliy struktura va kodlash

To'liq semantik blog sahifasini qadam-baqadam yig'ish

<article> tegi ichki anatomiyasi

<header> — Maqola sarlavhasi va metama'lumot <h3>HTML5 sirlari</h3> | Sana: 2026-10-04 | Muallif: Sardor <p>Maqolaning asosiy matni va tahlillari...</p> Barcha yangilik yoki o'quv materiali shu yerda yoziladi <footer> — Maqola teglari: #html5 #web | Manbalar</footer>

Semantik sahifa qurish bosqichlari

1-qadam: Karkasni belgilash

Sahifaning yuqori qismini <header> va <nav> bilan, pastki qismini <footer> bilan ajrating.

2-qadam: Asosiy mazmunni o'rash

Barcha noyob ma'lumotlarni yagona <main> bloki ichiga joylashtiring.

3-qadam: Bo'limlar va maqolalar

Main ichida mavzularni <section>, mustaqil postlarni <article> va yondosh axborotni <aside> ga bo'ling.

Google Bot va Screen Reader qanday ko'radi?

Google / Yandex Bot <article> va <h1> ni darhol indekslaydi Semantik Daraxt <header> -> Kirish <main> -> Asosiy maqola <footer> -> Muallif Screen Reader Foydalanuvchi bir tugma bilan <main> ga o'tadi

Dasturchining ikki oltin qoidasi

<main> ichma-ich bo'lmasin

Bosganda qoidani ko'ring

Qoida

Har bir HTML hujjatida faqat bitta <main> bo'ladi. U hech qachon header yoki footer ichiga yozilmaydi.

Qachon <div> ishlatish kerak?

Bosganda qoidani ko'ring

Qoida

Faqat CSS dizayni, flexbox/grid joylashuv yoki chiroyli ramka berish uchun <div> ishlatish to'g'ri hisoblanadi.

To'liq semantik shablon kodi

<header>
  <h1>IT Blog</h1>
  <nav><a href="#">Bosh sahifa</a> | <a href="#">Aloqa</a></nav>
</header>
<main>
  <section>
    <h2>So'nggi postlar</h2>
    <article>
      <h3>HTML5 sirlari</h3>
      <p>Semantika veb-saytni yanada qulay qiladi...</p>
    </article>
  </section>
  <aside><h3>Muallif haqida</h3></aside>
</main>
<footer><p>© 2026 Barcha huquqlar himoyalangan.</p></footer>

O'zingizni sinab ko'ring

Bitta HTML sahifasida nechta <main> tegi bo'lishi mumkin?

To'g'ri! <main> sahifaning yagona, takrorlanmas asosiy qismi bo'lib, har bir sahifada qat'iy ravishda faqat bitta bo'lishi shart.
Amaliy topshiriq · 20 daqiqa

Semantik blog sahifasini yarating

  1. Sayt nomini <header> va menyuni <nav> ichiga joylang.
  2. Sahifada bitta <main> oching.
  3. Main ichida 2 ta yangilik maqolasini <article> shaklida yozing.
  4. Yon tomonga muallif haqida <aside> bloki qo'shing.
  5. Sahifa pastiga <footer> qo'yib, mualliflik huquqini belgilang.

Bugungi dars xulosasi

Biz o'rgandik:

  • HTML5 semantika tushunchasi
  • 7 ta asosiy semantik element
  • <article> va <section> farqi
  • SEO va ekran o'quvchilar uchun afzalliklari

Keyingi darsda:

8-dars: HTML5 multimedia va interaktiv elementlar: <video>, <audio>, <details>, <progress> va <figure> bilan ishlash.