HTML nima: veb-sahifaning tili va u nima emas

Qisqacha: HTML — veb-sahifadagi har bir bo'lakka "bu nima" ekanini aytadigan til: bu sarlavha, bu paragraf, bu rasm, bu havola. U hisob-kitob qilmaydi, shuning uchun dasturlash tili emas, balki belgilash tili. Sahifaning ko'rinishi CSS'da, xatti-harakati esa JavaScript'da yoziladi.

Bu darsda

• HTML nima ekanini va uning nomi nimani anglatishini tushuntira olasiz.
• Belgilash tili bilan dasturlash tili farqini misol bilan ayta olasiz.
• HTML, CSS va JavaScript'ning vazifalarini ajrata olasiz.
• "HTML5" va "HTML Living Standard" nima ekanini bilasiz.
• Boshlovchilarning HTML haqidagi 4 ta noto'g'ri tasavvurini taniysiz.

Oldin bilishingiz kerak: HTML'dan pikselgacha: Critical Rendering Path, Veb standartlari va brauzer mosligi.

1. Nega bu kerak?

Telefoningizda istalgan saytni oching: Uzum Market, kun.uz yoki IlmHamroh. Sahifada sarlavha, matn, rasm, tugma bor. Brauzer bularni qayerdan biladi?

HTML'dan pikselgacha darsida ko'rgan edik: server brauzerga oddiy matnli fayl yuboradi. Brauzer uni o'qib, DOM daraxtini quradi, keyin ekranga chizadi. O'sha matnli fayl — HTML fayl.

Ya'ni siz ko'rgan har bir veb-sahifaning poydevorida HTML turadi. Uzum'dagi mahsulot kartasi ham, Telegram Web'dagi xabar ham, shu dars ham. HTML'ni bilmasdan veb-dasturchi bo'lib bo'lmaydi.

Yaxshi xabar: HTML — kursdagi eng yumshoq boshlanish. Unda formulalar ham, murakkab mantiq ham yo'q. Keling, avval u nima ekanini aniq tushunib olamiz.

2. HTML nima?

2.1 Nomi nimani anglatadi

HTML — HyperText Markup Language so'zlarining qisqartmasi. Har bir so'zni alohida ko'ramiz:

Demak, HTML — gipermatnni belgilash tili. Bo'sh joyni to'ldiring: HTML qisqartmasidagi M harfi qaysi inglizcha so'zdan olingan?

2.2 Belgilash nima degani?

Bozordagi do'konni tasavvur qiling. Sotuvchi har bir mahsulotga yorliq yopishtiradi: "non", "sut", "narxi 5 000 so'm". Yorliq mahsulotni o'zgartirmaydi. U faqat nima ekanini aytadi.

HTML ham aynan shunday qiladi. Matnning har bir bo'lagiga yorliq yopishtiradi: "bu — sarlavha", "bu — oddiy paragraf". Inglizcha bu yorliqlar teg (tag) deyiladi. So'zma-so'z tarjimasi ham "yorliq".

Mana eng kichik HTML parchasi:

<h1>Choyxona «Bahor»</h1>
<p>Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.</p>

Burchakli qavslar ichidagi h1 va p — teglar. h1 "bu eng asosiy sarlavha" deydi. p esa "bu paragraf" deydi. Brauzer buni shunday ko'rsatadi:

Choyxona «Bahor»                          ← katta, qalin harflar
Har kuni soat 7:00 dan 23:00 gacha ochiqmiz.   ← oddiy matn

Teglarning yozilish qoidalarini Teg, element va atribut darsida batafsil ko'ramiz. Hozircha bitta fikr yetarli: HTML matnga ma'no belgilarini qo'yadi.

Tekshirib ko'ring: Do'kondagi yorliq o'xshatishida "yorliq" HTML'dagi nimaga mos keladi?

3. HTML nima emas

3.1 HTML dasturlash tili emas

Pseudokod darsida har qanday algoritm uch "g'isht"dan qurilishini ko'rgan edik: ketma-ketlik, shart va takrorlash. Dasturlash tilida uchalasi ham bor.

HTML'da esa shart ham, takrorlash ham yo'q. "Agar foydalanuvchi 18 yoshdan katta bo'lsa, buni ko'rsat" deb yoza olmaysiz. HTML hatto hisoblay ham olmaydi. Sinab ko'ramiz:

<p>2 + 2</p>

Brauzerda:

2 + 2

Brauzer 4 ni chiqarmadi. U "2 + 2" ni oddiy matn deb ko'rsatdi. Chunki HTML faqat belgilaydi, hisoblamaydi.

Shuning uchun HTML belgilash tili (markup language) deyiladi. Dasturlash tili (programming language) esa mantiqni bajaradi. Bizning kursda bu JavaScript bo'ladi.

Maslahat: Dasturchilar orasida "HTML dasturlash tilimi?" degan hazil-bahs bor. To'g'ri javob: HTML — til, lekin dasturlash tili emas. Bu uni kamsitmaydi. HTML'siz birorta sayt ishlamaydi.

3.2 HTML dizayn vositasi ham emas

HTML sarlavhani katta qilib ko'rsatadi. Lekin bu uning asosiy ishi emas. Brauzer sarlavhaga o'zining oddiy uslubini beradi, xolos.

Rang, shrift, joylashuv, animatsiya — bularning hammasi CSS degan boshqa tilning ishi. HTML'ni faqat "katta ko'rinsin" deb tanlash — boshlovchilarning eng ko'p qiladigan xatosi. Bu haqda 5-bo'limda gaplashamiz.

4. Uch til — uch vazifa: HTML, CSS va JavaScript

Har qanday veb-sahifa uch til bilan quriladi. Ular bir-birini almashtirmaydi — har biri o'z ishini qiladi.

Uy qurilishini tasavvur qiling:

• HTML — uyning devorlari va xonalari. Qayerda oshxona, qayerda yotoqxona.
• CSS — bo'yoq, gilam, mebel. Uy qanday ko'rinishi.
• JavaScript — elektr va suv. Tugma bosilsa chiroq yonadi, jo'mrak burilsa suv keladi.

Bitta tugmaning uch qatlamini ko'ring. Hozir bu kodlarni tushunish shart emas — faqat har til alohida yozilishini ko'ring:

<button>Buyurtma berish</button>

button { background: green; color: white; }

const tugma = document.querySelector("button");
tugma.onclick = () => alert("Osh savatga qo'shildi!");

CSS'ni CSS nima darsida, JavaScript'ni esa JavaScript nima darsida boshlaymiz. Hozirgi qism — faqat HTML.

Tekshirib ko'ring: Quyidagi vazifalarni qaysi til bajaradi?

1. Sahifadagi matnni qizil rangga bo'yash.
2. "Bu — manzil, bu — telefon raqami" deb belgilash.
3. Tugma bosilganda narxni hisoblash.

5. Nega ma'no shunchalik muhim?

Sahifangizni faqat odamlar o'qimaydi. Uni ko'zi yo'q "o'quvchilar" ham o'qiydi:

• Google qidiruv roboti. U rangni ko'rmaydi, faqat teglarni o'qiydi. h1 ichidagi matnni sahifaning asosiy mavzusi deb tushunadi.
• Ekran o'quvchi (screen reader) — ko'zi ojiz odamlar uchun sahifani ovoz chiqarib o'qiydigan dastur. U "sarlavha, 1-daraja: Choyxona Bahor" deb e'lon qiladi.
• Brauzer tarjimoni va Telegram'dagi havola ko'rinishi (preview) ham teglarga qarab ishlaydi.

Agar sarlavhani oddiy katta matn qilib yozsangiz, odam farqni sezmaydi. Lekin Google va ekran o'quvchi uni sarlavha deb tanimaydi. Shuning uchun HTML'da har doim ma'noga qarab teg tanlanadi, ko'rinishga qarab emas.

Bu g'oyani Semantik HTML va Accessibility nima darslarida chuqurlashtiramiz.

6. Qisqa tarix: HTML qayerdan keldi

HTML'ni 1989–1991 yillarda ingliz olimi Tim Berners-Li (Tim Berners-Lee) o'ylab topdi. U Shveytsariyadagi CERN ilmiy markazida ishlardi. Maqsad oddiy edi: olimlar bir-birining hujjatlarini havola orqali ocha olsin.

Veb standartlari darsida WHATWG va W3C nima ekanini ko'rgan edik. Bugun HTML qoidalarini WHATWG yozadi.

6.1 "HTML5" va "Living Standard"

2019-yildan beri HTML'ning versiya raqami yo'q. U HTML Living Standard ("tirik standart") deb ataladi. Ya'ni til doimiy yangilanib boradi, "HTML6" chiqishini kutish kerak emas.

Lekin "HTML5" so'zi hali ham hamma joyda uchraydi: vakansiyalarda, kitoblarda, rezyumelarda. Bugun u oddiygina "zamonaviy HTML" degan ma'noni beradi. Ishga e'londa "HTML5 bilish" deyilsa — shu kursda o'rganadigan HTML nazarda tutilgan.

Maslahat: HTML bo'yicha eng ishonchli manba — MDN (developer.mozilla.org). Hujjat o'qish darsida u bilan tanishgansiz. Standartning o'zi esa html.spec.whatwg.org manzilida. U juda katta va rasmiy — undan faqat aniq savolga javob kerak bo'lganda foydalaning.

Tekshirib ko'ring: Do'stingiz "Men eski HTML4 ni o'rganyapman, keyin HTML5 ga o'taman" dedi. Unga nima deysiz?

7. Ko'p uchraydigan xatolar

HTML'da brauzer qizil xato chiqarmaydi. Shuning uchun bu yerdagi xatolar — asosan noto'g'ri tasavvurlar. Ular keyinroq ko'p vaqtingizni oladi.

7.1 "HTML'ni 3 kunda o'rganib, tashlab ketaman"

Asosiy teglarni bir necha kunda o'rganasiz, bu rost. Lekin yaxshi HTML — ma'noni to'g'ri tanlash, formalar, accessibility, SEO. Bu qismda 86 ta dars bor va ularning har biri real ishda kerak bo'ladi.

7.2 Ko'rinish uchun teg tanlash

Matn katta bo'lsin deb h1 qo'yish yoki bo'sh joy uchun bir necha bo'sh qator qo'shish — xato. HTML ma'no uchun, ko'rinish — CSS uchun. Eski saytlarda <font> yoki <center> kabi teglarni uchratasiz. Ular eskirgan — Brauzer mosligi darsida ko'ramiz.

7.3 HTML'ni Word'da yozish

Word hujjati (.docx) — oddiy matn emas. Matnli va binar fayllar darsida ko'rganimizdek, uning ichida ko'p yashirin ma'lumot bor. Brauzer bunday faylni sahifa sifatida ocha olmaydi. HTML faqat matn muharririda yoziladi — bizda bu VS Code.

7.4 "HTML5 — alohida til"

Yuqorida ko'rdik: HTML5 — zamonaviy HTML'ning eski nomi. Alohida o'rganiladigan narsa emas.

8. Mashqlar

1-mashq (oson): Qaysi til?

Har bir vazifa uchun HTML, CSS yoki JavaScript deb yozing:

1. Sahifaga "Menyu" degan sarlavha qo'yish.
2. Sarlavhani ko'k rangga bo'yash.
3. "Buyurtma" tugmasi bosilganda savatdagi sonni 1 ga oshirish.
4. Telefon raqamini "bu — telefon" deb belgilash.
5. Sahifani telefonda ikki ustun o'rniga bitta ustunda ko'rsatish.

2-mashq (o'rta): Begona saytning HTML'ini ko'ring

Kompyuterda istalgan saytni oching. F12 ni bosib, DevTools'dagi Elements panelini oching. DevTools darsida buni qilgansiz.

1. Eng yuqoridagi qatorni toping. U qaysi so'z bilan boshlanadi?
2. <h1 bilan boshlanadigan teg bormi? Ichida qanday matn bor?

3-mashq (qiyin): Sahifani qog'ozda belgilang

Choyxona sahifasining matni bor. Teg yozmang — faqat har bir qator yoniga uning vazifasini yozing: sarlavha, kichik sarlavha, paragraf, rasm, havola yoki tugma.

Choyxona «Bahor»
Toshkent, Chilonzor tumani, 7-mavze
[osh tarelkasining surati]
Bugungi menyu
Osh — 35 000 so'm. Kabob — 25 000 so'm.
Buyurtma berish
Instagram sahifamiz

9. Real ishda

• Har bir frontend dasturchi kuniga HTML yozadi. React'da (sayt yasash uchun mashhur kutubxona, kursda alohida o'rganamiz) u JSX deb ataladi, lekin ichida o'sha teglar.
• SEO mutaxassislari sahifa Google'da yuqori chiqishi uchun avvalo HTML'ni tekshiradi: sarlavhalar, tavsiflar, rasm matnlari.
• Accessibility — nogironligi bor odamlar ham saytdan foydalana olishi. Yevropa Ittifoqida 2025-yil iyunidan boshlab ko'p onlayn xizmatlar uchun bu qonuniy talab. Uning asosi — to'g'ri HTML.
• Intervyuda ko'p so'raladi: "HTML dasturlash tilimi?" va "HTML, CSS, JS farqi nima?". Bu darsdan keyin ikkalasiga ham javob bera olasiz.

Xulosa

• HTML — HyperText Markup Language, veb-sahifaning tuzilmasi va ma'nosini belgilaydigan til.
• HTML belgilash tili: unda shart, takrorlash va hisob yo'q, shuning uchun u dasturlash tili emas.
• HTML — "bu nima?", CSS — "qanday ko'rinadi?", JavaScript — "bosilsa nima bo'ladi?".
• Teg ko'rinishga emas, ma'noga qarab tanlanadi: Google va ekran o'quvchi aynan ma'noni o'qiydi.
• Bugungi HTML — WHATWG'ning doimiy yangilanadigan Living Standard'i; "HTML5" — uning ommabop nomi.

Keyingi dars: Birinchi sahifa: yaratish, ochish va ko'rish — o'z HTML faylingizni yaratib, uni brauzerda ochasiz.

Manbalar

• MDN: "HTML basics" va "HTML: HyperText Markup Language" — developer.mozilla.org
• WHATWG: HTML Living Standard — html.spec.whatwg.org
• W3C va WHATWG kelishuvi (2019) — w3.org yangiliklari