HTML sarlavhalar va paragraflar (h1–h6, p)

HTML hujjat skeletida foydalanuvchi ko’radigan mazmun <body> ichida yozilishini o’rgandik. Endi shu mazmunni sarlavhalar va paragraflar yordamida tartibli tuzamiz. Yaxshi tuzilgan matnni ko’z bilan ko’rish, ekran o’quvchi bilan tinglash va qidiruv tizimi orqali tushunish oson.

Bu dars yakunida siz:

<h1> dan <h6> gacha bo’lgan sarlavha darajalarini farqlaysiz;
sahifa uchun mantiqiy sarlavha iyerarxiyasini tuzasiz;
oddiy matnni <p> elementlari bilan paragraflarga ajratasiz;
yangi qator, yangi paragraf va oddiy bo’sh joy orasidagi farqni bilasiz.

Sarlavha matnning xaritasidir

Sarlavha o’quvchiga keyingi matn nima haqida ekanini oldindan bildiradi. HTML oltita sarlavha darajasini beradi:

<h1>Sahifaning asosiy mavzusi</h1>
<h2>Asosiy bo'lim</h2>
<h3>Bo'lim ichidagi mavzu</h3>
<h4>Yanada kichik bo'lim</h4>
<h5>Beshinchi daraja</h5>
<h6>Oltinchi daraja</h6>

Raqam sarlavhaning tashqi o’lchamini emas, mantiqiy darajasini bildiradi. <h1> eng yuqori daraja, <h2> uning asosiy bo’limlari, <h3> esa shu bo’limlar ichidagi kichik mavzular uchun ishlatiladi.

Mantiqiy iyerarxiya qanday quriladi?

Sahifani kitob mundarijasiga o’xshating. Bitta aniq mavzu, uning bo’limlari va bo’lim ichidagi kichik mavzular bo’ladi:

<h1>O'zbekiston bo'ylab sayohat</h1>

<h2>Toshkent</h2>
<p>Poytaxtdagi diqqatga sazovor joylar haqida.</p>

<h3>Chorsu bozori</h3>
<p>Bozor tarixi va u yerda ko'rish mumkin bo'lgan mahsulotlar.</p>

<h3>Amir Temur xiyoboni</h3>
<p>Shahar markazidagi mashhur xiyobon haqida.</p>

<h2>Samarqand</h2>
<p>Tarixiy obidalar va sayohat tavsiyalari.</p>

Bu tuzilmada Toshkent va Samarqand bir xil darajadagi bo’limlar. Chorsu bozori esa faqat Toshkent bo’limiga tegishli kichik mavzu bo’lgani uchun <h3> bilan yozilgan.

Odatdagi kontent sahifasida bitta aniq <h1> ishlatish tavsiya etiladi. Keyingi sarlavhalarni tartibli tanlang va faqat tashqi ko’rinish uchun darajani almashtirmang.

Paragraf — bog’langan fikrlar guruhi

Oddiy matn <p> (paragraph) elementi bilan yoziladi:

<p>HTML sahifaning tuzilishini belgilaydi.</p>
<p>CSS esa elementlarning ko'rinishini boshqaradi.</p>

Har bir paragraf bitta asosiy fikrni ifodalashi kerak. Fikr o’zgarsa, yangi <p> boshlash matnni o’qishni osonlashtiradi. Brauzer paragraflar orasiga standart tashqi bo’shliq qo’yadi.

Quyidagi misolda sarlavha va paragraflar birgalikda qanday iyerarxiya hosil qilishini ko’ring:

Kod

<h1>Frontend dasturchi bo'lish yo'li</h1>
<p>Frontend dasturchi foydalanuvchi ko'radigan va boshqaradigan interfeysni yaratadi.</p>

<h2>Avval HTML</h2>
<p>HTML sahifadagi mazmun va uning mantiqiy tuzilishini belgilaydi.</p>

<h2>Keyin CSS</h2>
<p>CSS rang, shrift, masofa va elementlarning joylashuvini boshqaradi.</p>

<h3>Amaliy tavsiya</h3>
<p>Har yangi mavzudan keyin kichik sahifa yaratib ko'ring.</p>

Natija

Natijada sarlavhalar matnni bo’limlarga ajratadi, paragraflar esa har bir bo’limdagi fikrni tushuntiradi. Brauzerning standart o’lchamlari keyinchalik CSS bilan o’zgarishi mumkin, lekin HTML iyerarxiyasi o’zgarmaydi.

HTML ketma-ket bo’sh joylarni qisqartiradi

Kod ichida bir nechta bo’sh joy yoki yangi qator yozsangiz ham, brauzer ularni odatda bitta bo’sh joy sifatida ko’rsatadi:

<p>Bu        jumlada     ko'p bo'sh joy bor.</p>

Brauzerdagi natija esa taxminan shunday bo’ladi:

Bu jumlada ko'p bo'sh joy bor.

Matn orasini ochish uchun ketma-ket bo’sh joy qo’shish to’g’ri usul emas. Ko’rinishdagi masofalar keyinchalik CSS bilan boshqariladi.

Yangi paragraf va yangi qator farqi

Yangi fikr uchun yangi <p> ishlating. Bir paragraf ichida majburiy qator uzilishi kerak bo’lsa, <br> elementidan foydalanish mumkin:

<p>
  Toshkent shahri<br>
  Amir Temur ko'chasi, 1-uy
</p>

<br> manzil, she’r satri yoki aniq qator uzilishi mazmunning bir qismi bo’lgan holatlarda mos keladi. Oddiy matnni paragraflarga ajratish yoki elementlar orasida masofa yaratish uchun ko’p <br> ishlatmang.

Nega to’g’ri sarlavhalar muhim?

To’g’ri iyerarxiya uch guruhga yordam beradi:

o’quvchi sahifani tez ko’zdan kechirib, kerakli bo’limni topadi;
ekran o’quvchi foydalanuvchisi sarlavhalar bo’yicha sakrab yuradi;
qidiruv tizimi sahifaning asosiy va yordamchi mavzularini tushunadi.

Shuning uchun sarlavhani faqat dizayn elementi emas, hujjat navigatsiyasining bir qismi deb qarash kerak.

Amaliy mashq

Mening o'quv rejam nomli sahifa mazmunini yozing. Bitta <h1>, kamida ikkita <h2>, bitta <h3> va har sarlavhadan keyin tushuntiruvchi <p> ishlating. Kodga qarab turib, sarlavhalardan mundarija tuzish mumkinligini tekshiring.

Qisqacha xulosa

<h1>–<h6> sarlavhaning mantiqiy darajasini bildiradi.
Odatdagi sahifada bitta aniq <h1> ishlatish yaxshi amaliyotdir.
<h2> asosiy bo’lim, <h3> esa uning ichidagi kichik bo’lim bo’lishi mumkin.
<p> bog’langan fikrlarni alohida paragrafga ajratadi.
Ketma-ket bo’sh joylar matnni joylashtirish vositasi emas.
<br> faqat qator uzilishi mazmunan kerak bo’lganda ishlatiladi.

Keyingi darsda HTML matn formatlash orqali paragraf ichidagi muhim, urg’uli va maxsus matnlarni semantik belgilaymiz.