HTML fayl tuzilishi — DOCTYPE, html, head, body

~10 daq · HTML · HTML Asoslari

Har bir HTML fayl bir xil boshlanadi

Yangi HTML fayl yaratsangiz — doim shu tuzilmadan boshlang:

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sahifa nomi</title>
  </head>
  <body>
    <!-- Kontent shu yerda -->
  </body>
</html>

Har bir qatorni tushunamiz.

<!DOCTYPE html>

Bu HTML emas — bu deklaratsiya. Brauzerga "bu HTML5 fayl" deb aytadi.

<!DOCTYPE html>

Eski HTML versiyalarida bu juda uzun edi:

<!-- HTML 4.01 — eskirgan, ishlatmang -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5 da oddiy: <!DOCTYPE html>. Katta-kichik harf farqi yo'q — <!doctype html> ham ishlaydi. Lekin katta harf bilan yozish an'ana.

⚠️ DOCTYPE bo'lmasa brauzer "quirks mode" ga o'tadi — eski, noto'g'ri xulq-atvor. Har doim yozing.

<html> — ildiz element

Barcha HTML kontent <html> ichida bo'ladi. U — daraxtning ildizi.

<html lang="uz">
  ...
</html>

lang atributi — sahifa tilini bildiradi. Bu muhim:

• Screen reader (ko'zi ojizlar uchun) to'g'ri til bilan o'qiydi
• Qidiruv tizimlari sahifa tilini tushunadi
• Brauzer to'g'ri imlo tekshiruvini qo'llaydi

<html lang="uz">   <!-- O'zbek -->
<html lang="en">   <!-- Ingliz -->
<html lang="ru">   <!-- Rus -->
<html lang="ar">   <!-- Arab — o'ngdan chapga -->

<head> — ko'rinmaydigan ma'lumotlar

<head> ichidagi hamma narsa ekranda ko'rinmaydi. Bu — sahifa haqidagi meta-ma'lumotlar, CSS, JavaScript ulanishlari.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sahifa nomi</title>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js" defer></script>
</head>

<meta charset="UTF-8">

Sahifa qanday kodlashda yozilganini bildiradi. UTF-8 — dunyo bo'ylab barcha harflarni qo'llab-quvvatlaydi: lotin, kirill, arab, xitoy, emoji.

<meta charset="UTF-8" />

Bu bo'lmasa — o'zbek harflari (ğ, ş, ö) noto'g'ri ko'rinishi mumkin. Har doim birinchi <meta> sifatida yozing.

<meta name="viewport">

Mobil qurilmalarda sahifa qanday ko'rinishini boshqaradi.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Bu bo'lmasa — mobil brauzer sahifani kichraytirib ko'rsatadi (desktop versiya kabi). Bu bilan — sahifa mobil ekran kengligiga moslashadi.

viewport yo'q:  [kichik, zoom qilingan sahifa]
viewport bor:   [to'liq, o'qilishi qulay sahifa]

<title>

Brauzer tabida va qidiruv natijalarida ko'rinadigan nom.

<title>DevDocs — O'zbek tilida dasturlash</title>

Tab:     [DevDocs — O'zbek tilida dasturlash]
Google:  DevDocs — O'zbek tilida dasturlash
         devdocs.uz

Har bir sahifada unikal va tavsiflovchi title bo'lishi kerak. "Sahifa" yoki "Untitled" — yomon.

<body> — ko'rinadigan kontent

Foydalanuvchi ekranda ko'radigan hamma narsa <body> ichida:

<body>
  <h1>Salom!</h1>
  <p>Bu sahifaning kontenti.</p>
  <img src="rasm.jpg" alt="Rasm" />
  <a href="about.html">Biz haqimizda</a>
</body>

To'liq tuzilma — vizual

<!DOCTYPE html>
┌─────────────────────────────────────┐
│ <html lang="uz">                    │
│                                     │
│   ┌─────────────────────────────┐   │
│   │ <head>                      │   │
│   │   charset, viewport, title  │   │  ← Ko'rinmaydi
│   │   CSS, JS ulanishlari       │   │
│   │ </head>                     │   │
│   └─────────────────────────────┘   │
│                                     │
│   ┌─────────────────────────────┐   │
│   │ <body>                      │   │
│   │   h1, p, img, a, div...     │   │  ← Ko'rinadi
│   │ </body>                     │   │
│   └─────────────────────────────┘   │
│                                     │
│ </html>                             │
└─────────────────────────────────────┘

Izohlar

HTML da izoh (comment) — brauzer ko'rsatmaydi, faqat kod ichida ko'rinadi:

<!-- Bu izoh — brauzerda ko'rinmaydi -->
<p>Bu ko'rinadi</p>

<!--
  Ko'p qatorli izoh
  Vaqtincha o'chirib qo'yish uchun ham ishlatiladi
-->

Amaliy misol

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ali Valiyev — Portfolio</title>
    <meta name="description" content="Ali Valiyev — frontend dasturchi" />
  </head>
  <body>
    <!-- Asosiy sarlavha -->
    <h1>Ali Valiyev</h1>
    <p>Frontend dasturchi</p>

    <!-- Aloqa -->
    <a href="mailto:ali@example.com">ali@example.com</a>
  </body>
</html>

Xulosa

Keyingi dars

3-dars: Matn teglari — h1-h6, p, span, strong, em, br, hr