HTML iqtibos, qisqartma, vaqt va ma'lumot teglari: blockquote, q, abbr, time

Qisqacha: Bu teglar matnni odam uchun emas, mashina uchun ham tushunarli qiladi. Uzun iqtibos blockquote ga, qisqasi q ga yoziladi. Qisqartma abbr bilan, atamaning ta'rifi dfn bilan belgilanadi. Sana va vaqt time ichida datetime atributi bilan kompyuter tushunadigan shaklda beriladi. Kontakt ma'lumoti esa address ga yoziladi.

Bu darsda

• blockquote va q bilan iqtiboslarni to'g'ri belgilaysiz.
• cite elementi va cite atributining farqini bilasiz.
• abbr va dfn bilan qisqartma va atamalarni tushuntirasiz.
• time ga to'g'ri datetime formatini yozasiz.
• data va address qachon kerakligini tushunasiz.

Oldin bilishingiz kerak: Urg'u va ahamiyat teglari.

1. Nega bu kerak?

Choyxona saytida "Tadbirlar" sahifasi bor: "Osh bayrami — 5-oktabr, ertalab 7 da". Odam buni darhol tushunadi. Kompyuter esa yo'q.

Google bu sanani qidiruvda "tadbir" sifatida ko'rsata olmaydi. Telefon uni taqvimga qo'sha olmaydi. Chunki "5-oktabr" — shunchaki harflar. Qaysi yil? Qaysi vaqt mintaqasi?

O'tgan darsda matndagi so'zlarga ma'no berdik: muhim, urg'u, eskirgan. Bu darsdagi teglar yana bir qadam oldinga boradi: ular odam o'qiydigan matnning yoniga kompyuter o'qiydigan aniq qiymatni qo'shadi. Iqtibos kimniki, qisqartma nimani anglatadi, sana aynan qachon.

2. Iqtiboslar: blockquote va q

2.1 blockquote — uzun iqtibos

Iqtibos — birovning so'zlarini aynan keltirish. Uzun, alohida blok bo'lib turadigan iqtibos blockquote ga yoziladi:

<p>Mijozlarimiz nima deydi:</p>
<blockquote>
  <p>Toshkentda bunday oshni boshqa hech qayerda yemaganman.
  Har juma oilam bilan kelaman.</p>
</blockquote>
<p>— Malika, Chilonzor</p>

Brauzer blockquote ni chap va o'ng tomondan biroz ichkariga surib ko'rsatadi. Ichida bir yoki bir nechta paragraf bo'lishi mumkin.

E'tibor bering: muallifning ismi ("— Malika") blockquote tashqarisida. HTML standarti shunday talab qiladi: blockquote ichida faqat iqtibosning o'zi bo'ladi. Muallifni iqtibos ichiga yozsangiz, u Malikaning so'zlarining bir qismi bo'lib qoladi. Iqtibos va muallifni chiroyli bog'lashning yana bir usulini figure va figcaption darsida ko'ramiz.

2.2 cite atributi — manba manzili

Iqtibos internetdagi sahifadan olingan bo'lsa, uning manzilini cite atributiga yozish mumkin:

<blockquote cite="https://example.com/choyxona-haqida">
  <p>«Bahor» choyxonasi tumandagi eng eski oshxonalardan biri.</p>
</blockquote>

Brauzer cite manzilini ekranda ko'rsatmaydi. U qidiruv tizimlari va boshqa dasturlar uchun. Foydalanuvchi manbani ko'rishi kerak bo'lsa, uni oddiy havola bilan matnda ham ko'rsating.

2.3 q — qisqa iqtibos gap ichida

Gap ichidagi qisqa iqtibos uchun q:

<p>Oshpazimiz aytganidek, <q>yaxshi osh sabrni yaxshi ko'radi</q>.</p>

Brauzerda:

Oshpazimiz aytganidek, "yaxshi osh sabrni yaxshi ko'radi".

Qo'shtirnoqlarni brauzer o'zi qo'shdi. Shuning uchun q ichiga o'zingiz qo'shtirnoq yozmang — aks holda ular ikki marta chiqadi. Qo'shtirnoq shakli sahifa tiliga va CSS'ga bog'liq.

Tekshirib ko'ring: Mijozning uch paragraflik sharhini keltirmoqchisiz. q mi yoki blockquote mi?

3. cite elementi — asar nomi

Chalkashtirmang: cite atributi (manzil) va cite elementi — boshqa-boshqa narsalar.

cite elementi — ijodiy asar nomi: kitob, film, qo'shiq, maqola, gazeta, o'yin, rasm.

<p>Choyxonamiz haqida <cite>Chilonzor hayoti</cite> gazetasida
maqola chiqdi.</p>
<p>Oshpazimizning sevimli kitobi — <cite>O'tkan kunlar</cite>.</p>

Brauzer cite ni kursivda ko'rsatadi.

Diqqat: cite — odam ismi uchun emas. <cite>Malika</cite> — xato. Standart buni aniq aytadi: cite faqat asar nomini belgilaydi. Odam ismi — oddiy matn.

4. Qisqartma va atamalar: abbr va dfn

4.1 abbr — qisqartma

abbr (abbreviation — qisqartma) — qisqartmani belgilaydi. title atributiga uning to'liq shakli yoziladi:

<p>Narxlarga <abbr title="Qo'shilgan qiymat solig'i">QQS</abbr>
kiritilgan.</p>

Kompyuterda sichqonchani "QQS" ustiga olib borsangiz, to'liq nomi chiqadi. Ko'p brauzerlar abbr ostiga nuqtali chiziq ham chizadi.

Lekin title ning jiddiy kamchiligi bor. Telefonda sichqoncha yo'q — yozuv umuman ko'rinmaydi. Klaviatura bilan ishlaydigan foydalanuvchi ham uni ko'ra olmaydi. Teg, element va atribut darsida title bilan tanishgan edik — u "qo'shimcha", asosiy ma'lumot uchun ishonchsiz.

Shuning uchun eng yaxshi usul — qisqartmani birinchi uchraganida matnning o'zida ochish:

<p>Narxlarga qo'shilgan qiymat solig'i
(<abbr>QQS</abbr>) kiritilgan. QQS stavkasi — 12%.</p>

Endi to'liq nom hammaga ko'rinadi: telefonda ham, kompyuterda ham. Keyingi uchrashuvlarda qisqa "QQS" yetarli.

4.2 dfn — atamaning ta'rifi

dfn (definition — ta'rif) — atama aynan ta'riflanayotgan joyni belgilaydi:

<p><dfn>Nahorgi osh</dfn> — to'y yoki marosim kuni tongda
mehmonlarga tortiladigan osh.</p>

dfn ichida ta'riflanayotgan atama, uning atrofidagi gap esa — ta'rifning o'zi. Brauzer dfn ni kursivda ko'rsatadi.

Qoida: atama sahifada bir necha marta uchrashi mumkin, lekin dfn faqat bir marta — ta'rif berilgan joyda. Xuddi darslikda yangi atama birinchi marta qalin yoziladigan joy kabi.

Qisqartmaning ta'rifi bo'lsa, ikkalasini birga ishlatish mumkin:

<p><dfn><abbr>API</abbr></dfn> — dasturlar bir-biri bilan
gaplashadigan "eshik".</p>

5. time — sana va vaqtni kompyuterga tushuntirish

5.1 Asosiy g'oya

time — odam o'qiydigan sanani ko'rsatadi, datetime atributida esa uning aniq, kompyuter o'qiydigan shakli turadi:

<p>Osh bayrami
<time datetime="2026-10-05T07:00">5-oktabr, ertalab 7 da</time>
bo'lib o'tadi.</p>

Foydalanuvchi "5-oktabr, ertalab 7 da" ni ko'radi. Google, taqvim ilovalari va JavaScript esa 2026-10-05T07:00 ni o'qiydi. Unda yil ham, soat ham aniq.

5.2 datetime formatlari

Format xalqaro standartga asoslangan: katta birlikdan kichigiga — yil, oy, kun, soat.

Bir nechta tushuntirish:

• T — sana va vaqt orasidagi ajratgich (inglizcha "time").
• +05:00 — vaqt mintaqasi. O'zbekiston vaqti xalqaro vaqtdan (UTC) 5 soat oldinda. Chet ellik mehmon ham to'g'ri vaqtni ko'rishi uchun kerak.
• PT2H30M — davomiylik: P (period) va T dan keyin 2H (2 soat), 30M (30 daqiqa). Kunlar uchun P3D — 3 kun.

Agar time ichidagi matn allaqachon to'g'ri formatda bo'lsa, datetime shart emas: <time>2026-10-05</time>. Lekin o'zbekcha "5-oktabr" — to'g'ri format emas, shuning uchun datetime kerak.

Bo'sh joyni to'ldiring: 2026-yil 1-noyabr sanasi datetime da qanday yoziladi?

Tekshirib ko'ring: <time datetime="5-oktabr">5-oktabr</time> — nima xato?

6. data — har qanday qiymat uchun

data — time ning umumiy "akasi". U sanadan boshqa har qanday qiymatga kompyuter tushunadigan shaklni biriktiradi. Qiymat majburiy value atributiga yoziladi:

<p>Bugungi taklif:
<data value="35000">o'ttiz besh ming so'm</data>.</p>
<p>Mahsulot: <data value="4780012345678">Qora choy «Bahor»</data></p>

Birinchisida odam "o'ttiz besh ming so'm" ni o'qiydi, dastur esa 35000 sonini oladi. Ikkinchisida — mahsulotning shtrix-kodi. JavaScript bunday qiymatlar bo'yicha saralash va hisoblashni oson qiladi.

data ni kundalik sahifalarda kam uchratasiz. U ko'proq onlayn do'konlar va katta ma'lumotli sahifalarda kerak bo'ladi.

7. address — kontakt ma'lumoti

address — sahifa yoki maqola egasi bilan bog'lanish ma'lumoti: manzil, telefon, email, ijtimoiy tarmoq.

<address>
  Choyxona «Bahor»<br>
  Chilonzor tumani, 7-mavze, 15-uy, Toshkent<br>
  Tel.: +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00
</address>

O'tgan darsda ko'rgan br va   bu yerda juda o'rinli. Brauzer address ni kursivda ko'rsatadi.

Eng keng tarqalgan xato — nomidan chalg'ish. address — "har qanday manzil" emas. Masalan, yetkazib berish manzillari ro'yxati yoki maqoladagi "Navoiy ko'chasida yangi bino qurildi" — address emas, oddiy matn. address faqat sahifa (yoki maqola) muallifi bilan bog'lanish uchun.

Odatda address sahifaning eng pastki qismida turadi. Bu qismning to'g'ri tegini Sahifa landmarklari darsida ko'ramiz. Telefon raqamini bosiladigan havola qilishni esa Maxsus havolalar darsida o'rganamiz.

8. Hammasi bitta sahifada

"Tadbirlar" sahifasining bir qismi:

<h2>Osh bayrami</h2>
<p>Har yili kuzda <dfn>osh bayrami</dfn> — mehmonlar
uchun bepul nahorgi osh — o'tkazamiz.</p>
<p>Sana: <time datetime="2026-10-05T07:00+05:00">5-oktabr,
ertalab 7:00</time>. Davomiyligi:
<time datetime="PT3H">3 soat</time>.</p>

<blockquote>
  <p>O'tgan yili 500 dan ortiq mehmon keldi.</p>
</blockquote>
<p>— <cite>Chilonzor hayoti</cite>, 2025-yil oktabr</p>

Har bir teg o'z ishini qiladi: atama ta'rifi, aniq vaqt, davomiylik, iqtibos va manba nomi.

9. Ko'p uchraydigan xatolar

9.1 datetime noto'g'ri formatda

<time datetime="27-sentyabr">27-sentyabr</time>

Nu HTML Checker (validatsiya darsida ko'rgan vosita):

Error: Bad value “27-sentyabr” for attribute “datetime” on element “time”: The literal did not satisfy the time-datetime format.

Tarjimasi: "time elementidagi datetime atributi uchun '27-sentyabr' — yaroqsiz qiymat: yozuv sana-vaqt formatiga mos kelmadi." Tuzatish: datetime="2026-09-27".

9.2 data da value yo'q

<data>35000</data>

Error: Element “data” is missing required attribute “value”.

Tarjimasi: "data elementida majburiy value atributi yo'q." data ning butun ma'nosi — value da. Tuzatish: <data value="35000">35 000 so'm</data>.

9.3 q ichida qo'lda qo'shtirnoq

<p>Oshpaz: <q>"Sabr qiling"</q></p>

Brauzerda qo'shtirnoq ikki marta chiqadi: ""Sabr qiling"". Tuzatish: qo'lda yozilgan qo'shtirnoqlarni olib tashlang — q ularni o'zi qo'shadi.

9.4 Muallif blockquote ichida yoki cite da ism

<blockquote>
  <p>Eng mazali osh!</p>
  <p>— Jasur</p>
</blockquote>

"— Jasur" iqtibosning bir qismiga aylandi — go'yo Jasur ham shu gapda bor. Tuzatish: muallifni blockquote dan keyin yozing. Ismni cite ga o'rash ham xato — cite faqat asar nomi uchun.

10. Mashqlar

1-mashq (oson): Tegni tanlang

1. Kitob nomi "Mehrobdan chayon" →
2. Gap ichidagi qisqa iqtibos →
3. "IT" qisqartmasi →
4. "27-sentyabr, 19:00" →

2-mashq (o'rta): Beshta xatoni tuzating

<p><cite>Malika</cite> shunday yozdi:</p>
<blockquote>Choy juda mazali! — Malika</blockquote>
<p>Oshpaz: <q>"Osh — sabr"</q></p>
<p>Ochilish: <time datetime="1-oktabr">1-oktabr</time></p>
<address>Yetkazib berish: Yunusobod, Sergeli, Chilonzor</address>

<p>Malika shunday yozdi:</p>
<blockquote>
  <p>Choy juda mazali!</p>
</blockquote>
<p>Oshpaz: <q>Osh — sabr</q></p>
<p>Ochilish: <time datetime="2026-10-01">1-oktabr</time></p>
<p>Yetkazib berish: Yunusobod, Sergeli, Chilonzor</p>

3-mashq (qiyin): "Tadbirlar" sahifasi

choyxona/tadbirlar.html ni yarating (to'liq skelet bilan). Unda:

1. h1 "Tadbirlar" va ikkita tadbir (h2): "Osh bayrami" va "Choy kechasi".
2. Har bir tadbirning sanasi va boshlanish vaqti time bilan, Toshkent vaqt mintaqasi ko'rsatilgan.
3. "Choy kechasi" ning davomiyligi — 2 soat 30 daqiqa, time bilan.
4. Bitta qisqartma — to'liq nomi bilan matnda ochilgan.
5. Sahifa pastida choyxonaning kontaktlari address da.
6. Faylni npx html-validate bilan tekshiring.

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Tadbirlar — Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Tadbirlar</h1>

    <h2>Osh bayrami</h2>
    <p>Sana: <time datetime="2026-10-05T07:00+05:00">5-oktabr,
    ertalab 7:00</time>.</p>

    <h2>Choy kechasi</h2>
    <p>Sana: <time datetime="2026-10-12T19:00+05:00">12-oktabr,
    kechqurun 19:00</time>. Davomiyligi:
    <time datetime="PT2H30M">2 soat 30 daqiqa</time>.</p>
    <p>Chipta narxiga qo'shilgan qiymat solig'i
    (<abbr>QQS</abbr>) kiritilgan.</p>

    <address>
      Choyxona «Bahor»<br>
      Chilonzor tumani, 7-mavze, 15-uy, Toshkent<br>
      Tel.: +998&nbsp;90&nbsp;000&nbsp;00&nbsp;00
    </address>
  </body>
</html>

11. Real ishda

• Qidiruvdagi tadbirlar va yangiliklar. Google yangilik sanasini va tadbir vaqtini tushunishi uchun sahifadagi aniq sanalarga tayanadi. Buning kuchli usulini — strukturalangan ma'lumotni — JSON-LD va schema.org darsida ko'ramiz. time — uning oddiy boshlanishi.
• "3 daqiqa oldin" yozuvlari. Telegram Web, GitHub kabi saytlar "3 daqiqa oldin" deb yozadi. Ichida esa <time datetime="..."> turadi. JavaScript aniq vaqtni datetime dan o'qib, "necha daqiqa o'tdi"ni hisoblaydi.
• Blog va yangilik saytlari iqtiboslarni blockquote bilan belgilaydi — ularni CSS bilan chiroyli bezash oson.
• Accessibility. Qisqartmani matnda ochish — accessibility bo'yicha tavsiyalardan biri: hamma, ayniqsa sohadan uzoq odamlar, qisqartmani tushunishi kerak.

Xulosa

• blockquote — uzun iqtibos (muallif tashqarida), q — qisqa iqtibos (qo'shtirnoqni brauzer qo'yadi).
• cite atributi — manba manzili, cite elementi — asar nomi (odam ismi emas).
• abbr — qisqartma; to'liq nomni birinchi uchraganda matnda oching, title ga ishonmang.
• dfn — atama ta'riflanayotgan yagona joy.
• time datetime — kompyuter o'qiydigan sana/vaqt: 2026-10-05T07:00+05:00, davomiylik PT2H30M.
• data value — har qanday qiymatning mashina shakli; address — sahifa egasining kontakti.

Keyingi dars: Kod va texnik matnni ko'rsatish — sahifada dastur kodi, klaviatura tugmalari va dastur chiqishini to'g'ri ko'rsatish.

Manbalar

• MDN: <blockquote>, <q>, <cite>, <abbr>, <dfn>, <time>, <data>, <address> — developer.mozilla.org
• WHATWG HTML: "Text-level semantics" va "Dates and times" — html.spec.whatwg.org