Matn teglari — h1-h6, p, span, strong, em, br, hr

~15 daq · HTML · HTML Asoslari

Matn — HTML ning asosi

Har qanday veb sahifada eng ko'p uchraydigan narsa — matn. Sarlavhalar, paragraflar, ta'kidlangan so'zlar, ajratuvchi chiziqlar. HTML da matnni to'g'ri belgilash muhim — nafaqat ko'rinish uchun, balki qidiruv tizimlari va screen readerlar uchun ham.

Sarlavhalar — h1 dan h6 gacha

h — heading (sarlavha). Oltita darajasi bor: h1 eng katta, h6 eng kichik.

<h1>Birinchi daraja — asosiy sarlavha</h1>
<h2>Ikkinchi daraja — bo'lim sarlavhasi</h2>
<h3>Uchinchi daraja — kichik bo'lim</h3>
<h4>To'rtinchi daraja</h4>
<h5>Beshinchi daraja</h5>
<h6>Oltinchi daraja — eng kichik</h6>

Brauzerda shunday ko'rinadi:

Birinchi daraja — asosiy sarlavha      ← eng katta, qalin
  Ikkinchi daraja — bo'lim sarlavhasi
    Uchinchi daraja — kichik bo'lim
      To'rtinchi daraja
        Beshinchi daraja
          Oltinchi daraja              ← eng kichik

Sarlavhalarni to'g'ri ishlatish

Sarlavhalar — sahifaning tuzilmasi. Kitobdagi mundarija kabi.

<!-- To'g'ri — ierarxiya saqlanadi -->
<h1>HTML kursi</h1>
  <h2>1-bo'lim: Asoslar</h2>
    <h3>Teglar nima?</h3>
    <h3>Atributlar</h3>
  <h2>2-bo'lim: Matn</h2>
    <h3>Sarlavhalar</h3>
    <h3>Paragraflar</h3>

<!-- Noto'g'ri — darajalar o'tkazib yuborilgan -->
<h1>Sarlavha</h1>
<h3>Kichik sarlavha</h3>  <!-- h2 o'tkazib yuborildi! -->

⚠️ Qoida: Bir sahifada faqat bitta h1 bo'lishi kerak — bu sahifaning asosiy mavzusi. h2, h3 va boshqalar ko'p bo'lishi mumkin.

💡 SEO: Qidiruv tizimlari sarlavhalarni o'qib sahifaning mavzusini tushunadi. h1 — eng muhim signal.

Paragraf — <p>

p — paragraph. Matn bloklari uchun asosiy teg.

<p>Bu birinchi paragraf. Bir nechta gap bo'lishi mumkin.</p>

<p>Bu ikkinchi paragraf. Brauzer ular orasiga avtomatik bo'sh joy qo'yadi.</p>

Brauzerda har bir <p> yangi qatordan boshlanadi va atrofida bo'sh joy bo'ladi.

Muhim: HTML bo'sh joylarni e'tiborsiz qoldiradi

<p>Bu    ko'p     bo'shliqli     matn.</p>

Brauzerda: Bu ko'p bo'shliqli matn. — faqat bitta bo'sh joy qoladi.

<p>
  Bu
  ko'p
  qatorli
  matn.
</p>

Brauzerda: Bu ko'p qatorli matn. — hammasi bir qatorda.

HTML da yangi qator va ko'p bo'sh joy ko'rinmaydi. Buning uchun maxsus teglar kerak.

Yangi qator — <br>

br — break (uzish). Paragraf ichida yangi qatorga o'tish uchun.

<p>
  Birinchi qator<br />
  Ikkinchi qator<br />
  Uchinchi qator
</p>

Brauzerda:

Birinchi qator
Ikkinchi qator
Uchinchi qator

<br> — yolg'iz teg, yopuvchisi yo'q. <br /> yoki <br> — ikkalasi ham to'g'ri.

Qachon <br> ishlatish kerak?

<!-- To'g'ri — manzil, she'r, qo'shiq matni -->
<address>
  Toshkent shahri,<br />
  Chilonzor tumani,<br />
  Bunyodkor ko'chasi 12
</address>

<p>
  Bahor keldi, qushlar sayradi,<br />
  Gullar ochildi, bog' yashnadi.
</p>

<!-- Noto'g'ri — paragraflar orasiga bo'sh joy qo'shish uchun -->
<p>Birinchi paragraf.</p>
<br />
<br />
<p>Ikkinchi paragraf.</p>

⚠️ Paragraflar orasiga bo'sh joy qo'shish uchun <br> ishlatmang — buning uchun CSS margin ishlatiladi.

Ajratuvchi chiziq — <hr>

hr — horizontal rule (gorizontal chiziq). Kontent bo'limlarini ajratish uchun.

<h2>Birinchi bo'lim</h2>
<p>Bu bo'limning matni.</p>

<hr />

<h2>Ikkinchi bo'lim</h2>
<p>Bu bo'limning matni.</p>

Brauzerda to'liq kenglikdagi gorizontal chiziq ko'rinadi.

<hr> — yolg'iz teg, semantik ma'nosi bor: "bu yerda mavzu o'zgardi".

Qalin matn — <strong> va <b>

Ikkalasi ham matnni qalin qiladi, lekin ma'nosi farq qiladi.

<p>Bu <strong>juda muhim</strong> ma'lumot.</p>
<p>Bu <b>qalin</b> matn.</p>

Brauzerda ikkalasi bir xil ko'rinadi: juda muhim va qalin.

Farqi

• <strong> — semantik: "bu matn muhim, e'tibor bering". Screen reader uni boshqacha o'qiydi.
• <b> — faqat vizual: "bu matnni qalin qil". Hech qanday semantik ma'no yo'q.

<!-- To'g'ri ishlatish -->
<p><strong>Diqqat:</strong> Parolni hech kimga bermang.</p>
<p>Kitob nomi: <b>Clean Code</b></p>

💡 Ko'pincha <strong> ishlatish yaxshiroq — u semantik ma'no beradi.

Kursiv matn — <em> va <i>

Ikkalasi ham matnni kursiv qiladi.

<p>Bu <em>ta'kidlangan</em> so'z.</p>
<p>Bu <i>kursiv</i> matn.</p>

Farqi

• <em> — emphasis (ta'kid): "bu so'zni ta'kidlab o'qing". Screen reader uni boshqacha intonatsiya bilan o'qiydi.
• <i> — faqat vizual kursiv. Texnik atamalar, chet el so'zlari, kitob nomlari uchun.

<!-- To'g'ri ishlatish -->
<p>Men <em>hech qachon</em> bu ishni qilmayman.</p>
<p><i>Lorem ipsum</i> — maket matni sifatida ishlatiladi.</p>
<p>Kitob: <i>The Pragmatic Programmer</i></p>

Kichik matn — <small>

Qo'shimcha ma'lumot, mualliflik huquqi, izohlar uchun:

<p>Narx: 99 000 so'm <small>(QQS kiritilgan)</small></p>
<p><small>© 2026 DevDocs. Barcha huquqlar himoyalangan.</small></p>

O'chirilgan va qo'shilgan matn — <del> va <ins>

<p>Narx: <del>150 000</del> <ins>99 000</ins> so'm</p>

Brauzerda: Narx: 150 000 99 000 so'm

• <del> — o'chirilgan matn (ustidan chiziq)
• <ins> — qo'shilgan matn (ostidan chiziq)

Yuqori va pastki indeks — <sup> va <sub>

<!-- Yuqori indeks — daraja, izoh raqami -->
<p>2<sup>10</sup> = 1024</p>
<p>E = mc<sup>2</sup></p>

<!-- Pastki indeks — kimyoviy formulalar -->
<p>Suv formulasi: H<sub>2</sub>O</p>
<p>CO<sub>2</sub> — karbonat angidrid</p>

<span> — inline konteyner

<span> — o'zi hech qanday ko'rinish bermaydi. Matnning bir qismini CSS yoki JavaScript uchun belgilash uchun ishlatiladi.

<p>Narx: <span class="price">99 000</span> so'm</p>
<p>Holat: <span id="status">Faol</span></p>

<span> — inline element (qator ichida). <div> esa blok element (yangi qatordan boshlanadi). Buni keyingi darslarda batafsil ko'ramiz.

Amaliy misol — Maqola

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Matn Teglari</title>
  </head>
  <body>

    <h1>JavaScript nima?</h1>

    <p>
      <strong>JavaScript</strong> — veb brauzerlar uchun yaratilgan
      dasturlash tili. Hozirda u nafaqat brauzerda, balki server
      tomonida ham (<em>Node.js</em> orqali) ishlatiladi.
    </p>

    <h2>Tarixi</h2>

    <p>
      JavaScript 1995-yilda <b>Brendan Eich</b> tomonidan atigi
      <strong>10 kunda</strong> yaratilgan. Dastlab u
      <i>Mocha</i>, keyin <i>LiveScript</i>, nihoyat
      <i>JavaScript</i> deb nomlandi.
    </p>

    <hr />

    <h2>Versiyalar</h2>

    <p>
      Hozirgi standart — <strong>ES2024</strong>
      <small>(ECMAScript 2024)</small>. Har yili yangi versiya chiqadi.
    </p>

    <p>
      Matematik misol: (a + b)<sup>2</sup> = a<sup>2</sup> +
      2ab + b<sup>2</sup>
    </p>

    <hr />

    <p>
      <small>© 2026 DevDocs — O'zbek tilida dasturlash</small>
    </p>

  </body>
</html>

Xulosa

Keyingi dars

4-dars: Ro'yxatlar — ul, ol, li, dl, dt, dd