header/main/footer, article/section/aside farqlari va figure/figcaption — semantik struktura, test va debugging mashqlari bilan.
HTML5 — sahifa strukturasini <div> o'rniga ma'noli teglar bilan tasvirlash imkonini beruvchi semantik elementlarni kiritdi.
index.htmlHTML<body><header><h1>Sayt nomi</h1><nav>...</nav></header><main><h2>Asosiy kontent</h2></main><footer><p>© 2026 Kompaniya</p></footer></body>
index.htmlHTML<article><h2>Maqola sarlavhasi</h2><p>Maqola matni — mustaqil, o'zicha ma'noga ega kontent.</p></article><section><h2>Xizmatlarimiz</h2><p>Bu bo'lim mavzuga oid guruhlangan kontent.</p></section><aside><h3>Bog'liq maqolalar</h3></aside>
index.htmlHTML<figure><img src="chart.png" alt="2026-yil savdo statistikasi"><figcaption>1-rasm: 2026-yil bo'yicha savdo o'sishi</figcaption></figure>
Task: header, nav, main (ichida bir nechta article), aside va footerdan iborat to'liq blog sahifasi strukturasini yarating.
Task: Rasm, uning izohi va bog'liq statistika jadvalidan iborat "infografika" bo'limini figure/figcaption bilan yarating.
index.htmlHTML<div class="header">...</div><div class="nav">...</div><div class="main-content">...</div><div class="footer">...</div>
Your Task: Bu struktura funksional jihatdan ishlaydi, lekin semantik jihatdan nima yetishmayapti?
<details> <summary>Solution</summary> Barcha `<div>`lar semantik ma'noga ega emas — ekran o'quvchi va qidiruv tizimlari sahifa strukturasini "tushunolmaydi". To'g'ri versiya: ```html <header>...</header> <nav>...</nav> <main>...</main> <footer>...</footer> ``` </details>Semantik HTML5 elementlari (header, main, footer, article, section, aside, figure) — <div> bilan bir xil ko'rinsa ham, qidiruv tizimlari va ekran o'quvchilarga qo'shimcha ma'no beradi.
<main> — sahifada faqat bitta marta, asosiy kontent uchun<article> — mustaqil kontent, <section> — mavzu guruhi<aside> — yon/qo'shimcha kontent<figure>/<figcaption> — izohli media guruhlashindex.htmlHTML<header>...</header><nav>...</nav><main><article>...</article><section>...</section></main><aside>...</aside><footer>...</footer>
Mavzu bo‘yicha tushunchalaringizni interaktiv test orqali sinovdan o‘tkazing va natijalarni bilib oling.
Darslik ichidagi interaktiv muharrirda berilgan barcha amaliy topshiriqlarni bajaring va avto-tekshiruvdan o‘ting.
Test Sinovi
Hali topshirilmagan (kamida 75% kerak)
Amaliy Laboratoriya
Laboratoriya muharririda testlarni topshiring
Dars sifati va mazmunini yaxshilash uchun o‘z haqqoniy bahoingizni qoldiring.
Mavzuni to‘liq o‘zlashtirish uchun test sinovi, amaliy kodlash va bog‘liq darslar
O‘z bilimingizni interaktiv test savollari orqali tekshiring va darhol xatolarni tahlil qiling.
Nazariyani real kod yozish bilan mustahkamlang, avtomatik testlardan o‘ting va XP to‘plang.
Kurs bo‘yicha keyingi va bog‘liq mavzular: