Series: HTML Basics Lesson 5

Document Architecture — Har Bir HTML Sahifaning Poydevori

HTML hujjatlarni brauzer, search engine, screen reader va boshqa agentlar uchun to'g'ri strukturalashni o'rganing. DOCTYPE, html/head/body struktura, document outline, heading strategiya va til atributlari.

5-dars

DOCUMENT ARCHITECTURE (ENG MUHIM)

🎯 Maqsad:

Har qanday HTML sahifani brauzer, search engine, screen reader va boshqa agentlar uchun to'g'ri semantik skelet bilan yozish.

Bu dars:

  • SEO
  • Accessibility (A11y)
  • Performance
  • Maintainability

barchasining asosiy poydevori.

1. DOCTYPE — "shunchaki yoziladigan narsa" EMAS

Asl vazifasi nima?

<!DOCTYPE html> brauzerga shuni aytadi:

"Bu hujjat standart HTML Living Standard bo'yicha yozilgan."

Agar yo'q bo'lsa yoki noto'g'ri bo'lsa:

  • Brauzer Quirks Mode'ga tushadi
  • CSS box model buziladi
  • Layout boshqa brauzerlarda boshqacha ishlaydi
  • Legacy (IE-era) (eskirgan brauzer qoidalari) yoqiladi

📌 Muhim fakt

<!DOCTYPE>:

  • HTML tag emas
  • DOM'da yo'q
  • SEO uchun bevosita signal emas

Lekin rendering modelini belgilaydi → bu esa SEO va UX'ga bilvosita ta'sir qiladi.

2. html / head / body — "minimal emas", to'g'ri holat

Ko'pchilik o'ylaydi:

<html>
  <head></head>
  <body></body>
</html>

Yetarli deb. Yo'q..

html — hujjatning konteksti

<html lang="uz" dir="ltr">

Bu:

  • Search engine'ga tilni bildiradi
  • Screen reader talaffuzini belgilaydi
  • Brauzer font fallback'ini tanlaydi
  • hyphenation, quotes, date formatting kabi narsalarga ta'sir qiladi

head — SEO, A11y, performance markazi

<head> — metadata dumping joyi emas, balki:

  • Sahifa identifikatori
  • Indexlash qoidalari
  • Rendering strategiyasi

Minimal to'g'ri head:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sahifa sarlavhasi</title>
  <meta name="description" content="Qisqa va mazmunli tavsif">
</head>

📌 Qoida:

  • title → SERP'dagi eng kuchli signal
  • description → ranking emas, CTR signal
  • Charset va viewport kechikib kelsa → rendering muammo

body — faqat kontent

<body> ichida:

  • Faqat foydalanuvchi ko'radigan va o'qiydigan kontent
  • Metadata, config, script strategy — head'da

3. Document Outline — afsona va haqiqat

Oldin nima deyilgan?

HTML5 chiqqanda:

  • section, article avtomatik outline yaratadi
  • Har section o'zining H1'iga ega bo'lishi mumkin

Hozirgi haqiqat (MUHIM):

📌 Brauzerlar va screen reader'lar HTML5 outline algoritmini REAL ishlatmaydi.

Bugungi kunda:

  • Outline = faqat heading hierarchy (h1–h6)
  • section va article faqat semantik konteyner

4. Heading Strategy (SEO + A11y)

"H1 bitta bo'lishi shartmi?"

Texnik javob:

👉 Yo'q, HTML standartida cheklov yo'q

Amaliy javob:

👉 Ha. 99% real loyihada bitta bo'lishi kerak

Nega?

SEO sabablar:

  • H1 — sahifaning asosiy mavzusi
  • Bir nechta H1 → mavzu diffuziyasi
  • Google chalkashmaydi, lekin signal kuchsizlanadi

Accessibility sabablar:

Screen reader foydalanuvchilari:

  • Sahifani H1 orqali tushunadi
  • "Page title" sifatida qabul qiladi

To'g'ri heading ierarxiyasi:

<h1>Asosiy mavzu</h1>

<h2>Bo'lim</h2>
<h3>Ichki bo'lim</h3>

<h2>Keyingi bo'lim</h2>

📌 Qoida:

  • Heading dizayn uchun emas
  • h2 dan keyin birdan h4 — YO'Q
  • Har heading mantiqan bo'ysunuvchi bo'lishi shart

5. lang noto'g'ri bo'lsa nima bo'ladi?

<html lang="en">

Lekin kontent o'zbekcha bo'lsa:

❌ Natijalar:

  • Screen reader inglizcha o'qiydi
  • Talaffuz buziladi
  • Google noto'g'ri til indekslaydi
  • hreflang strategiya buziladi

📌 SEO zarar:

Google sahifani noto'g'ri mintaqaga moslashtiradi.

6. dir noto'g'ri bo'lsa nima bo'ladi?

<html dir="ltr">

Agar arab/ivrit kontent bo'lsa:

  • Text oqimi buziladi
  • UI mantiqsiz ko'rinadi
  • Screen reader navigatsiyasi yomonlashadi

👉 dir:

  • Layout emas
  • Text oqimi va semantika

Yakuniy xulosa (MUHIM)

HTML document architecture — bu dizayn emas.

Bu inson, mashina va accessibility o'rtasidagi kelishuv.

Agar bu dars to'g'ri o'rganilsa:

  • SEO keyinroq osonlashadi
  • A11y "qo'shimcha ish" bo'lmaydi
  • React / Astro / Next'da ham xatolar kam bo'ladi