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 idsi bilan bog’lanadi |
<input> |
type, id, name, autocomplete |
<textarea> |
Ko’p qatorli matn |
<select> |
Variantlar ro’yxati |
<option> |
Select ichidagi variant va uning valuesi |
<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?
idqiymatlari noyobmi?- Havola manzili va forma maydonlarining
nameqiymati bormi? - Rasm
alt,widthvaheightbilan 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.