# HTML teglar ma'lumotnomasi

> Eng ko'p ishlatiladigan HTML teglar, atributlar, semantik elementlar, jadval va forma qismlarining qisqa o'zbekcha ma'lumotnomasi.

Manba: https://learncode.uz/html-css/html-malumotnoma/
Sana: 2026-05-19

Bu sahifa teglarni yodlash uchun emas, kerakli elementni tez topish uchun
tuzilgan. Biror tegni tanlashda avval: “Mazmunning vazifasi nima?” deb so'rang.
Chuqur izoh va jonli natija uchun jadvaldagi tegishli darsga o'ting.

## Hujjat skeleti

| Element | Vazifasi |
|---|---|
| `<!doctype html>` | Zamonaviy HTML hujjatini e'lon qiladi |
| `<html lang="uz">` | Hujjat ildizi va asosiy tilini belgilaydi |
| `<head>` | Sahifa haqidagi ko'rinmaydigan metadata |
| `<meta charset="utf-8">` | Matn kodlashini belgilaydi |
| `<meta name="viewport" ...>` | Mobil viewportni qurilma kengligiga moslaydi |
| `<title>` | Brauzer yorlig'i va sahifa nomi |
| `<body>` | Foydalanuvchi ko'radigan mazmun |

To'liq tuzilma [HTML hujjat tuzilishi](https://learncode.uz/html-css/html-tuzilishi) darsida
tushuntirilgan.

## Matn va guruhlash

| Element | Qachon ishlatiladi |
|---|---|
| `<h1>`–`<h6>` | Sarlavha iyerarxiyasi |
| `<p>` | Alohida paragraf |
| `<strong>` | Muhimlik |
| `<em>` | Ma'nodagi urg'u |
| `<mark>` | Kontekstda ajratilgan qism |
| `<small>` | Yordamchi yoki huquqiy mayda yozuv |
| `<code>` | Kod bo'lagi |
| `<pre>` | Bo'shliqlari saqlanadigan oldindan formatlangan matn |
| `<blockquote>` | Katta iqtibos |
| `<br>` | Mazmuniy satr uzilishi, masalan manzil yoki she'r |
| `<hr>` | Mavzu almashganini bildiruvchi ajratish |
| `<div>` | Mos semantik element bo'lmagan blok konteyner |
| `<span>` | Mos semantik element bo'lmagan inline konteyner |

`b` va `i` faqat umumiy bezak teglarining o'rnini bosmaydi. Ularning ham
maxsus semantik holatlari bor; muhimlik uchun `strong`, urg'u uchun `em`
tanlang.

## Havola va media

| Element | Muhim atributlar |
|---|---|
| `<a>` | `href`, zarur bo'lsa `target`, `rel` |
| `<img>` | `src`, `alt`, `width`, `height` |
| `<figure>` | Mustaqil rasm, diagramma yoki kod birligi |
| `<figcaption>` | Figure izohi |

Tashqi havolani yangi oynada ochsangiz, `target="_blank"` bilan birga
`rel="noopener noreferrer"` yozing. Mazmunli rasmga aniq `alt`, faqat bezak
rasmiga esa `alt=""` bering.

## Ro'yxatlar

| Element | Vazifasi |
|---|---|
| `<ul>` | Tartibi muhim bo'lmagan bandlar |
| `<ol>` | Ketma-ketligi muhim bandlar |
| `<li>` | `ul` yoki `ol` ichidagi band |
| `<dl>` | Atama va izohlar ro'yxati |
| `<dt>` | Atama |
| `<dd>` | Atamaning izohi |

## Semantik sahifa qismlari

| Element | Vazifasi |
|---|---|
| `<header>` | Sahifa yoki bo'lim kirish qismi |
| `<nav>` | Asosiy navigatsiya havolalari |
| `<main>` | Sahifadagi yagona asosiy mazmun |
| `<article>` | Mustaqil tarqatilishi mumkin bo'lgan mazmun |
| `<section>` | Odatda sarlavhali mavzuviy bo'lim |
| `<aside>` | Asosiy mazmunga yordamchi qism |
| `<footer>` | Sahifa yoki bo'lim yakuniy ma'lumoti |

Bir sahifada odatda bitta ko'rinadigan `main` bo'ladi. `section` faqat tashqi
ko'rinish uchun o'ram emas; uning mavzusi va odatda sarlavhasi bo'lishi kerak.

## Jadval elementlari

| Element | Vazifasi |
|---|---|
| `<table>` | Qator-ustun munosabatidagi ma'lumot |
| `<caption>` | Jadval nomi |
| `<thead>` | Sarlavha qatorlari guruhi |
| `<tbody>` | Asosiy ma'lumot qatorlari |
| `<tfoot>` | Yakuniy yoki jami qatorlar |
| `<tr>` | Jadval qatori |
| `<th scope="col">` | Ustun sarlavhasi |
| `<th scope="row">` | Qator sarlavhasi |
| `<td>` | Oddiy ma'lumot katagi |

Jadvalni sahifa layouti uchun emas, faqat haqiqiy jadval ma'lumoti uchun
ishlating.

## Forma elementlari

| Element | Muhim atributlar yoki vazifa |
|---|---|
| `<form>` | `action`, `method` bilan boshqaruvlarni o'raydi |
| `<label>` | `for` qiymati input `id`si bilan bog'lanadi |
| `<input>` | `type`, `id`, `name`, `autocomplete` |
| `<textarea>` | Ko'p qatorli matn |
| `<select>` | Variantlar ro'yxati |
| `<option>` | Select ichidagi variant va uning `value`si |
| `<button>` | `submit`, `button` yoki `reset` turi |
| `<fieldset>` | Bog'liq boshqaruvlar guruhi |
| `<legend>` | Fieldset guruhining nomi |

Frontenddagi `required`, `minlength` yoki `type="email"` foydalanuvchiga tez
yordam beradi, ammo server validatsiyasining o'rnini bosmaydi.

## Ko'p ishlatiladigan global atributlar

| Atribut | Vazifasi |
|---|---|
| `id` | Sahifadagi noyob identifikator |
| `class` | CSS yoki JavaScript uchun qayta ishlatiladigan guruh |
| `lang` | Element mazmunining tili |
| `title` | Qo'shimcha maslahat; asosiy label o'rnini bosmaydi |
| `hidden` | Elementni ko'rinish va accessibility tree'dan yashiradi |
| `data-*` | Dastur uchun maxsus ma'lumot saqlaydi |
| `aria-*` | Zarur holatda accessibility semantikasini to'ldiradi |

> **ARIA birinchi tanlov emas**
>
> Avval kerakli xatti-harakat va semantikaga ega tabiiy HTML elementini tanlang.
> Masalan, bosiladigan `div role="button"` o'rniga haqiqiy `button` klaviatura,
> fokus va brauzer xatti-harakatini tayyor beradi.

## Tez tekshiruv

- Teglar to'g'ri ichma-ich yozilganmi va yopilganmi?
- `id` qiymatlari noyobmi?
- Havola manzili va forma maydonlarining `name` qiymati bormi?
- Rasm `alt`, `width` va `height` bilan berilganmi?
- Sarlavhalar mantiqiy iyerarxiya hosil qilganmi?
- Forma boshqaruvlarida ko'rinadigan label bormi?
- Semantik element mazmun vazifasiga mosmi?

Keyingi sahifada [HTML quiz](https://learncode.uz/html-css/html-quiz) orqali elementni ta'rifdan
emas, amaliy vaziyatdan kelib chiqib tanlay olishingizni tekshirasiz.