HTML teglar ma'lumotnomasi

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 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

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 orqali elementni ta’rifdan emas, amaliy vaziyatdan kelib chiqib tanlay olishingizni tekshirasiz.