Sarlavha darajalari

Nega

Odamlar sahifani ko‘zdan kechirish va asosiy kontentni tushunib olish uchun sarlavhalar tuzilmasidan foydalanadi. Bu ko‘ra oladigan foydalanuvchilar uchun ham, ekran o‘quvchi dastur foydalanuvchilari uchun ham to‘g‘ri.

Nima

Sarlavhalar <h1>dan <h6>gacha bo‘lgan teglar bilan belgilanadi. Foydalanuvchilar sahifalaringizga sarlavhalari orqali ko‘z yugurtiradi.

Hujjat tuzilmasini va turli bo‘limlar orasidagi bog‘liqlikni ko‘rsatish uchun sarlavhalardan foydalanish muhim. Asosiy sarlavhalar uchun <h1> sarlavhalari, keyin <h2> sarlavhalari, so‘ngra kamroq muhim <h3> va hokazo ishlatilishi kerak.

Qanday

Keling, sarlavha darajalarining yaxshi va yomon misollarini ko‘rib chiqamiz.

Yaxshi hujjat mundarijasi: The Strait Times

1. Web Developer brauzer kengaytmasini yuklab oling. U Chrome, Firefox va Opera uchun mavjud.
2. The Straits Times saytini oching.
3. Web Developer’ni oching. Information yorlig‘i ostida View Document Outline bandini bosing.
4. Hujjat mundarijasini ko‘zdan kechiring.

Endi hujjat mundarijasi qanday bo‘lishi mumkinligi haqida tasavvurga egasiz.

Yomon hujjat mundarijasi: The New York Times

1. The New York Times saytini oching.
2. Web Developer’ni oching. Information yorlig‘i ostida View Document Outline bandini bosing.
3. Hujjat mundarijasini ko‘zdan kechiring.

Muammolar

Bu hujjat tuzilmasi chalkash. Unda ko‘plab muammolar bor:

• Asosiy sarlavha <h1> yo‘q.
• Dastlabki uchta <h2> vizual kontekstsiz chalkash.
• <h3> sarlavhalari yuqoridagi <h2>ga bog‘liq emas: Tramp haqidagi sarlavha DealBook Policy Project’ga aloqador emas.
• <h3> bir nechta sarlavhani birlashtirgan.
• <h3> ma’lumotni takrorlaydi.

Vizual ierarxiyaga nazar tashlang.

Eng ko‘zga tashlanadigan sarlavha — Trump Acquitted. Keyingi sarlavha — 7 Republicans Break With Former President in Vote on 2nd Impeachment. Vizual jihatdan keyingi uchta sarlavha aniq bir darajadagi kichik sarlavhalardir, garchi Most Bipartisan … Analysis …dan kattaroq bo‘lsa ham

Yechimlar

Keling, har bir muammoni birma-bir hal qilamiz.

Asosiy sarlavha yo‘q

Asosiy sarlavhani belgilash uchun kamida to‘rtta muqobil variant bor:

1. Logotipni asosiy sarlavha sifatida ishlatish. The Straits Times aynan shunday qilgan.
2. Trump Acquitted sarlavhasini asosiy sarlavha sifatida ishlatish.
3. Trump Acquitted sarlavhasini 7 Republicans Break With Former President in Vote on 2nd Impeachment bilan birgalikda asosiy sarlavha sifatida ishlatish. Ikki sarlavha vizual jihatdan alohida bo‘lsa-da, semantik nuqtai nazardan ularni bitta sarlavha deb hisoblash mumkin. Ikkalasi ham keyingi kontentni tavsiflaydi.
4. Front page (Bosh sahifa) degan yashirin sarlavha qo‘shish.

Bu yerda to‘g‘ri yoki noto‘g‘ri javob yo‘q. Gazetaning bosh sahifasi uchun logotipni asosiy sarlavha sifatida ishlatish mantiqan to‘g‘ri. Rasm uchun muqobil matn bo‘lishini unutmang.

Chalkash h2 sarlavhalar

Bu uchta sarlavha vizual kontekstsiz chalkash:

• Listen to 'The Daily'
• Opinion: Listen to 'Sway'
• DealBook D.C. Policy Project

Buni kamida ikki usulda hal qilishimiz mumkin:

1. Yashirin sarlavha qo‘shish.
2. Sarlavhalar darajasini h2 dan h3 ga o‘zgartirish.
3. Sarlavhalarni ro‘yxatga aylantirish.

Ba’zan faqat ekran o‘quvchi dasturlar uchun kontent qo‘shish mantiqan to‘g‘ri bo‘ladi. Bu aynan shunday holat. Keng tarqalgan amaliyot — .sr-only CSS klassidan foydalanish, bu yerda sr — screen reader (ekran o‘quvchi dastur) degani:

<h2 class="sr-only>Briefings</h2>

va uni ekrandan tashqariga chiqarish uchun quyidagi stilni qo‘shish:

Faqat ekran o‘quvchi dasturlar uchun mavjud bo‘lgan .sr-only CSS klassi:

Shundan so‘ng Briefings bo‘limidagi sarlavhalar darajasini h2 dan h3 ga o‘zgartirish mantiqan to‘g‘ri bo‘ladi. Lekin ular haqiqatan ham sarlavhami? Ular keyingi kontentni taqdim etadimi? Aytaylik, yo‘q. Agar bunga kelishsak, uchta havolani ro‘yxatga aylantirishimiz mumkin.

Tramp haqidagi <h3>

Ko‘zga tashlanadigan Trump Acquitted sarlavhasi ham, undan keyingi 7 Republicans … sarlavhasi ham bitta maqolaga ishora qiladi. Shuning uchun ular bitta sarlavhaning qismi bo‘lishi mumkin. Yana takrorlaymiz, bu yerda to‘g‘ri yoki noto‘g‘ri javob yo‘q. Buni h2 ga o‘zgartirishimiz yoki ushbu <section> uchun yashirin sarlavha qo‘shishimiz mumkin:

<h2 class="sr-only">Headlines</h2>

Headlines sarlavhasi hujjat mundarijasida Briefings bilan birgalikda yaxshi ishlaydi.

Takrorlanuvchi ma’lumot

7 Republicans … sarlavhasi ikki marta takrorlangan. Buning sababi — bir h3 boshqa h3 ichiga joylashtirilgan. Keling, uni olib tashlaymiz va yangi hujjat mundarijamizni ko‘rish uchun Web Developer’ga o‘tamiz.

Ancha yaxshi.

Bu sahifada ko‘plab sarlavhalarni o‘qidingiz. Hujjat mundarijasini tekshiring. U yaxshimi?