IlmHamroh
JavaScript Full-stack/4-qism. HTML63/86-dars15 daqiqa
Mundarija (36)

HTML head anatomiyasi: teglar tartibi, meta viewport va base

Qisqacha: head ichida faqat sakkizta element bo'ladi: meta, title, link, style, script, base, noscript va template. Tartib muhim: avval meta charset, keyin meta viewport, keyin title, so'ng CSS va skriptlar, oxirida qolgan meta teglar. <meta name="viewport" content="width=device-width, initial-scale=1"> telefonga "sahifani ekran eniga moslab chiz" deydi — usiz sahifa mayda ko'rinadi. Zoom'ni esa hech qachon o'chirmang.

Bu darsda

  • head ichiga qaysi elementlar yozilishini va ularning to'g'ri tartibini bilasiz.
  • head ga tushib qolgan ortiqcha element nimani buzishini tushuntira olasiz.
  • Viewport qatorining har bir qismi nima qilishini va nega zoom'ni o'chirmaslik kerakligini bilasiz.
  • Har sahifa uchun aniq va foydali title yoza olasiz.
  • base elementining xavfli tomonlarini taniysiz.

Oldin bilishingiz kerak: Hujjat skeleti: DOCTYPE, html, head, body, Brauzer HTML'ni qanday tahlil qiladi, Fokus va tahrir atributlari.

1. Nega bu kerak?

Hujjat skeleti darsida «Bahor» sahifasining head qismi uch qatordan iborat edi: kodlash, viewport va sarlavha. Real saytda esa head 20–40 qatorgacha o'sadi: CSS fayllar, ikonkalar, Google uchun tavsif, Telegram'dagi ko'rinish, skriptlar.

Istalgan katta saytni oching va Ctrl + U bosing. Sahifaning boshida uzun head ni ko'rasiz. Unda tartib bormi yoki qatorlar tasodifiy joylashganmi?

Tartib bor — va u muhim. Brauzer head ni yuqoridan pastga o'qiydi. Ba'zi qatorlar juda erta kerak, ba'zilari keyinroq ham bo'laveradi. Bitta ortiqcha teg esa head ni "sindirib", Google uchun yozilgan qatorlarni ko'rinmas qilib qo'yadi. Bu darsda head ni to'liq ochib chiqamiz.

2. head ichida nima bo'lishi mumkin

2.1 Sakkizta element

head ichiga faqat sahifa haqidagi ma'lumot yoziladi. Buning uchun standart sakkizta elementga ruxsat beradi:

Element Vazifasi Batafsil
meta Turli ma'lumot: kodlash, viewport, tavsif Shu dars va SEO meta teglar
title Sahifa nomi Shu dars
link Tashqi fayl bilan bog'lanish: CSS, ikonka CSS nima, Favicon
style Shu yerning o'zida yozilgan CSS CSS qismi

Qolgan to'rttasi:

Element Vazifasi Batafsil
script JavaScript ulash Skriptlarni ulash
base Nisbiy manzillar uchun asos Shu dars
noscript JavaScript o'chiq bo'lsa ishlaydigan qism Skriptlarni ulash
template Keyinroq ishlatiladigan qolip template va slot

p, div, img, h1 kabi ko'rinadigan elementlar head ga yozilmaydi.

2.2 Ortiqcha element head ni "sindiradi"

Oddiy tuyulgan xato. Kimdir analitika uchun kichik rasm (piksel) qo'shdi va uni head ga yozib qo'ydi:

html
<!-- ❌ -->
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Menyu — Choyxona «Bahor»</title>
    <img src="https://example.com/piksel.gif" alt="">
    <link rel="canonical" href="https://example.com/menyu/">
  </head>
  <body>
    <h1>Menyu</h1>
  </body>
</html>

Brauzer HTML'ni qanday tahlil qiladi darsidagi qoidani eslang. Tahlilchi (parser) head ichida img ni uchratgach, "demak, head tugadi" deb qaror qiladi. U head ni shu joyda yopadi va body ni boshlaydi. img dan keyingi hamma narsa — link rel="canonical" ham — endi body ichida.

Elements panelida buni aniq ko'rasiz. W3C validatori esa bir nechta xato beradi, jumladan:

text
Error: Stray end tag “head”.

Tarjimasi: "Ortiqcha (egasiz) head yopuvchi tegi." Ya'ni </head> ga yetib kelganda, head allaqachon yopilgan bo'ladi.

Eng yomoni — Google. Google'ning rasmiy hujjati aytadi: head da noto'g'ri element uchrasa, Google head ni shu joyda tugadi deb hisoblaydi va qolgan qatorlarni o'qimaydi. canonical kabi muhim qatorlar e'tiborsiz qoladi. Ularni keyingi darsda ko'ramiz.

Tuzatish: ko'rinadigan elementlarni — rasm, div, matnni — faqat body ga yozing.

Tekshirib ko'ring: head ichida title dan oldin <p>Salom</p> qatori qolib ketdi. title qayerga tushadi va validator nima deydi?

Javob

Tahlilchi p ni ko'rib, head ni yopadi va body ni boshlaydi. title body ichiga tushadi. Brauzer yorliqdagi nomni baribir ko'rsatishi mumkin, lekin kod noto'g'ri. Validator head da majburiy title yo'qligi va title ning noto'g'ri joyda turgani haqida xato beradi. Tuzatish — p ni body ga ko'chirish.

3. To'g'ri tartib

3.1 Tavsiya etilgan tartib

Brauzer head ni birinchi qatordan boshlab o'qiydi va o'qiyotgan zahoti ish boshlaydi. Shuning uchun eng kerakli narsalar tepada turadi:

  1. meta charset — birinchi. Skelet darsida ko'rgandek, u faylning birinchi 1024 baytida bo'lishi shart.
  2. meta viewport — brauzer sahifani qanday kenglikda chizishini darhol bilsin.
  3. title — yorliqda nom erta paydo bo'lsin.
  4. base (agar bo'lsa) — manzilli har qanday elementdan oldin.
  5. Oldindan ulanish va yuklash (preconnect, preload) — Resurs maslahatlari darsida.
  6. CSS — link rel="stylesheet" va style. Brauzer CSS'siz sahifani chizmaydi, shuning uchun uni erta topsin.
  7. Skriptlar — defer yoki type="module" bilan (Skriptlarni ulash).
  8. Qolgan hammasi — tavsif, canonical, Open Graph, ikonkalar. Ular brauzerning chizishiga ta'sir qilmaydi, shuning uchun oxirida.

3.2 «Bahor» sahifasining to'liq head i

Hali hamma qatorni o'rganmadik. Lekin real head qanday ko'rinishini bir marta ko'rib qo'yish foydali:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Menyu va narxlar — Choyxona «Bahor»</title>

    <link rel="stylesheet" href="uslub.css">
    <script src="menyu.js" defer></script>

    <meta name="description"
          content="Choyxona «Bahor» menyusi: osh, lag'mon, kabob.">
    <link rel="canonical" href="https://example.com/menyu/">
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
  </head>
  <body>
    <h1>Menyu va narxlar</h1>
  </body>
</html>

Bo'sh qatorlar guruhlarni ajratadi: birinchi guruh — majburiy uchlik, ikkinchisi — CSS va skript, uchinchisi — qidiruv va ikonka. Bu brauzerga ta'sir qilmaydi, faqat odam o'qishi uchun qulay.

Bo'sh joyni to'ldiring: head ning eng birinchi qatori — <meta ="utf-8">.

Maslahat: Tartib qoidasini buzsangiz, sahifa odatda "sinmaydi" — faqat sekinroq chiziladi yoki biror qator e'tiborsiz qoladi. Shuning uchun bu xatolar ko'zga tashlanmaydi. Tartibni boshidan to'g'ri yozish odatini qiling.

4. meta viewport: telefon uchun bitta qator

4.1 Qatorning tarixi

2007-yilda birinchi iPhone chiqdi. O'sha paytdagi saytlar kompyuterning 1000 pikselga yaqin ekrani uchun yasalgan edi. Telefonning kichik ekranida ular sig'masdi.

Apple aqlli yo'l topdi: Safari sahifani 980 piksel kenglikdagi "xayoliy ekran"da chizadi, keyin uni kichraytirib telefon ekraniga joylaydi. Eski saytlar buzilmadi — faqat mayda ko'rindi. Foydalanuvchi ikki barmog'i bilan kattalashtirib o'qirdi.

Muammo keyinroq chiqdi. Dasturchilar telefonga moslashtirilgan saytlar yasay boshladi. Brauzerga esa "meni kichraytirma, men telefonga tayyorman" deyish kerak edi. Shu maqsadda viewport qatori paydo bo'ldi. Bugun hamma mobil brauzerlar bu odatni saqlagan: viewport qatori bo'lmasa, sahifa 980 piksellik ekranda chiziladi.

4.2 CSS piksel va ekran pikseli

Telefoningiz ekranida, masalan, 1080 ta nuqta (ekran pikseli) bor. Lekin brauzer uchun uning eni taxminan 360–430 CSS piksel. Nega?

Agar sahifa haqiqiy nuqtalar bilan chizilsa, 16 pikselli harf telefonda chumolidek bo'lib qolardi. Shuning uchun brauzer bitta CSS pikselni bir nechta ekran nuqtasi bilan chizadi — odatda 2 yoki 3 ta. Natijada harf kompyuterdagi bilan taxminan bir xil kattalikda ko'rinadi.

Viewport qatoridagi device-width aynan shu CSS piksellardagi enni bildiradi.

4.3 Qatorning qismlari

html
<meta name="viewport" content="width=device-width, initial-scale=1">
Qism Ma'nosi
name="viewport" "Bu — ko'rish oynasi sozlamasi"
width=device-width Sahifa kengligi = qurilma ekranining eni
initial-scale=1 Boshlang'ich masshtab — 100%, kichraytirmasdan

Qismlar vergul bilan ajratiladi. Ikkalasi birga yoziladi: width=device-width sahifani to'g'ri kenglikda chizadi, initial-scale=1 esa ba'zi brauzerlarda telefon yonboshga burilganda masshtab chalkashmasligini ta'minlaydi.

Viewport qatori bor Viewport qatori yo'q
Sahifa kengligi ~390 CSS piksel (telefon eni) 980 CSS piksel
Matn O'qiladigan o'lchamda Mayda, kattalashtirish kerak
Telefonga moslashgan dizayn Ishlaydi Ishlamaydi

4.4 O'zingiz sinab ko'ring

  1. index.html ni Live Server orqali oching va F12 bosing.
  2. Ctrl + Shift + M bilan qurilma rejimini (device mode) yoqing — DevTools darsida ko'rgansiz. Tepadagi ro'yxatdan biror telefonni tanlang.
  3. Console'ga yozing:
js
document.documentElement.clientWidth

Telefon modeliga qarab, 360–430 oralig'idagi son chiqadi. Endi head dan viewport qatorini o'chiring, saqlang va buyruqni qayta yozing. Endi 980 chiqadi — brauzer sahifani "kompyuter ekrani"da chizyapti. Matn ham mayda bo'lib qoladi. Qatorni qaytarib qo'ying!

Bu buyruq sahifaning CSS piksellardagi kengligini ko'rsatadi. JavaScript'ni hali o'rganmadik — uni o'lchov asbobi sifatida ishlating.

4.5 Zoom'ni o'chirmang

Internetda shunday qatorlarni uchratasiz:

html
<!-- ❌ -->
<meta name="viewport"
      content="width=device-width, initial-scale=1,
               maximum-scale=1, user-scalable=no">

maximum-scale=1 va user-scalable=no foydalanuvchiga sahifani kattalashtirishni taqiqlaydi. Ko'zi zaif odam, buvingiz, quyosh ostida telefon ekraniga qarayotgan taksi haydovchisi — hammasi matnni kattalashtira olmay qoladi.

Accessibility standarti WCAG matnni 200% gacha kattalashtirish imkoni bo'lishini talab qiladi. Buni Accessibility nima darsida ko'ramiz. W3C validatori ham ogohlantiradi:

text
Warning: Consider avoiding viewport values that prevent users from resizing documents.

Tarjimasi: "Foydalanuvchiga hujjat o'lchamini o'zgartirishga to'sqinlik qiladigan viewport qiymatlaridan qochishni o'ylab ko'ring." Lighthouse esa buni aniq xato deb belgilaydi.

Nega dasturchilar zoom'ni o'chiradi? Ko'pincha bitta sabab bilan: iPhone'da mayda shriftli maydon bosilganda Safari sahifani avtomatik kattalashtiradi. Buning to'g'ri yechimi — maydon shriftini kamida 16 piksel qilish. Bu CSS ishi, Forma elementlarini stillash darsida ko'ramiz. Zoom'ni o'chirish — muammoni emas, foydalanuvchini "davolash".

4.6 Qo'shimcha qiymatlar

Ikki qiymat kamroq kerak bo'ladi, lekin real loyihalarda uchraydi:

Qiymat Nima qiladi
viewport-fit=cover Sahifa ekranning "burun" (kamera) va yumaloq burchaklari ostigacha chiziladi. CSS bilan xavfsiz chegaralar qo'shiladi
interactive-widget=resizes-content Ekran klaviaturasi ochilganda sahifa balandligi qisqaradi. Hamma brauzerda emas

Ikkalasi ham asosiy qatorga vergul bilan qo'shiladi. Hozircha bular sizga kerak emas — sahifangiz uchun standart qator yetarli.

Tekshirib ko'ring: Mijoz "telefonda saytimiz juda mayda, hamma narsani kattalashtirib o'qish kerak" dedi. Birinchi navbatda head da nimani tekshirasiz?

Javob

Viewport qatorini. Katta ehtimol bilan u yo'q yoki xato yozilgan. Viewport qatorisiz mobil brauzer sahifani 980 piksellik "kompyuter ekrani"da chizadi va uni kichraytirib ko'rsatadi. <meta name="viewport" content="width=device-width, initial-scale=1"> qo'shilsa, sahifa telefon eniga moslab chiziladi.

5. title: yaxshi sarlavha yozish

Skelet darsida title qayerlarda ko'rinishini sanab o'tgan edik: yorliq, xatcho'p, tarix, Google natijasi, Telegram'dagi ko'rinish. Endi uni yaxshi yozish qoidalari.

5.1 To'rtta qoida

  1. Har sahifada boshqacha. Hamma sahifa "Choyxona «Bahor»" deb nomlansa, o'nta ochiq yorliqdan kerakligini topib bo'lmaydi.
  2. Aniq qism — oldinda, sayt nomi — oxirida. Yorliq tor bo'lsa, boshi ko'rinadi, oxiri kesiladi.
  3. Qisqa. Taxminan 50–60 belgi. Google uzunroq sarlavhani kesib qo'yadi — buni keyingi darsda ko'ramiz.
  4. Odam uchun, robot uchun emas. "osh Toshkent osh arzon osh" kabi kalit so'zlarni takrorlash — foydasiz va zararli.

5.2 «Bahor» sahifalari uchun

Sahifa title
Bosh sahifa Choyxona «Bahor» — Chilonzor, Toshkent
Menyu Menyu va narxlar — Choyxona «Bahor»
Bron Stol band qilish — Choyxona «Bahor»
Tadbirlar Choy kechalari va tadbirlar — Choyxona «Bahor»
Topilmadi Sahifa topilmadi — Choyxona «Bahor»

Ajratuvchi sifatida — yoki | ishlatiladi. Qaysi birini tanlashingiz muhim emas — butun saytda bir xil bo'lsin.

Sahifaning title i va h1 i bir-biriga yaqin bo'ladi, lekin aynan bir xil bo'lishi shart emas. Masalan, h1 — "Menyu va narxlar": u sahifa ichida o'qiladi. Yorliqdagi title esa sahifadan tashqarida ham tushunarli bo'lishi kerak. Shuning uchun uning oxirida sayt nomi bor.

Bo'sh joyni to'ldiring: "Bog'lanish" sahifasining title i — Bog'lanish — .

6. base: bitta qator — butun sahifaga ta'sir

6.1 Nima qiladi

base sahifadagi hamma nisbiy manzillar uchun asosni o'zgartiradi:

html
<base href="https://example.com/menyu/">

Endi <img src="osh.jpg"> fayli https://example.com/menyu/osh.jpg manzilidan olinadi. <a href="kabob.html"> esa https://example.com/menyu/kabob.html ga olib boradi. Sahifa aslida qayerda turganining ahamiyati qolmaydi.

base ning target atributi ham bor. <base target="_blank"> sahifadagi hamma havolani yangi yorliqda ochadi.

6.2 Tuzoq: sahifa ichidagi havolalar

«Bahor» menyusi https://example.com/taomlar.html manzilida turibdi. Sahifaning tepasida "Narxlarga o'tish" havolasi bor:

html
<!-- ❌ base bilan birga -->
<base href="https://example.com/menyu/">
...
<a href="#narxlar">Narxlarga o'tish</a>

Havola bosiladi — va mehmon boshqa sahifaga o'tib ketadi: https://example.com/menyu/#narxlar. Chunki #narxlar ham nisbiy manzil va u ham base ga qarab hisoblanadi. Sahifa ichidagi havolalar sinadi.

6.3 Qoidalar va tavsiya

  • base sahifada faqat bitta bo'ladi.
  • U head da, manzilli har qanday link va script dan oldin turadi. Aks holda validator:
text
Error: The “base” element must come before any “link” or “script” elements in the document.

Tarjimasi: "base elementi hujjatdagi har qanday link yoki script elementidan oldin kelishi kerak."

Tavsiya: base ni ishlatmang. Ko'p sahifali sayt tuzilmasi darsidagi nisbiy va absolyut manzillar yetarli. base ni asosan eski saytlarda va ba'zi maxsus vositalarda uchratasiz. Uchratsangiz — sahifa ichidagi havolalarni tekshiring.

Tekshirib ko'ring: Sahifada <base target="_blank"> bor. Mehmon menyudagi "Bron" havolasini bossa, nima bo'ladi?

Javob

Bron sahifasi yangi yorliqda ochiladi. base target="_blank" sahifadagi har bir havolaga ta'sir qiladi. Mehmon uchun bu kutilmagan: yorliqlar ko'payib ketadi, telefonda "Orqaga" tugmasi ishlamaydi. Yangi yorliq faqat kerakli havolalarga alohida target="_blank" bilan beriladi.

Bu elementlarning har biri alohida mavzu. Hozir faqat ular head da nima qilishini bilib qo'ying:

  • link rel="stylesheet" — alohida CSS faylni ulaydi. Eng ko'p ishlatiladigan usul. CSS nima darsida boshlaymiz.
  • style — CSS'ni shu yerning o'zida yozish. Kichik sahifalar va eng muhim stillar uchun.
  • script — JavaScript ulaydi. head da odatda defer bilan turadi, aks holda sahifani to'xtatib qo'yadi — Skriptlarni ulash darsida.
  • noscript — foydalanuvchida JavaScript o'chiq bo'lsa ishlaydi. head ichida unga faqat link, style va meta yozish mumkin.

8. Ko'p uchraydigan xatolar

8.1 head da ko'rinadigan element

Rasm, div yoki shunchaki matn head ni erta yopadi. Validator: Stray end tag “head”. Keyingi qatorlar body ga tushadi va Google ularni o'qimaydi. Tuzatish: ko'rinadigan narsa — faqat body da.

8.2 Viewport'da vergul o'rniga nuqtali vergul

html
<!-- ❌ -->
<meta name="viewport" content="width=device-width; initial-scale=1">

Ko'p brauzer buni kechiradi, lekin Chrome Console'da ogohlantiradi:

text
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.

Tarjimasi: "meta elementi kontentini o'qishda xato: ; — kalit-qiymat juftlari uchun to'g'ri ajratuvchi emas. O'rniga , ishlating." Tuzatish: vergul.

8.3 Zoom o'chirilgan

user-scalable=no yoki maximum-scale=1 — accessibility xatosi. Tuzatish: faqat width=device-width, initial-scale=1 qoldiring.

8.4 Ikkita title

Shablonlarni birlashtirganda title ikki marta yozilib qoladi. Validator:

text
Error: Element “title” not allowed as child of element “head” in this context.

Tarjimasi: "Bu holatda title elementi head ning bolasi bo'lishi mumkin emas." Ya'ni ikkinchi title ga joy yo'q. Tuzatish: bittasini o'chiring.

8.5 base va sahifa ichidagi havolalar

#narxlar kabi havolalar boshqa sahifaga olib ketadi. Tuzatish: base ni olib tashlang yoki havolalarga to'liq manzil yozing.

9. Mashqlar

1-mashq (oson): Tartibga soling

Bu qatorlar aralashib ketgan. Ularni to'g'ri tartibda yozing:

html
<link rel="stylesheet" href="uslub.css">
<title>Tadbirlar — Choyxona «Bahor»</title>
<meta name="description" content="Choy kechalari jadvali.">
<meta charset="utf-8">
<script src="tadbirlar.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Yechim
html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tadbirlar — Choyxona «Bahor»</title>
<link rel="stylesheet" href="uslub.css">
<script src="tadbirlar.js" defer></script>
<meta name="description" content="Choy kechalari jadvali.">

Tartib: kodlash → viewport → nom → CSS → skript → qolganlari. meta charset birinchi 1024 baytda bo'lishi shart, CSS esa chizish uchun kerak — shuning uchun erta. Tavsif chizishga ta'sir qilmaydi, u oxirida.

2-mashq (o'rta): To'rtta xato

Bu head da to'rtta xato bor. Toping, sababini ayting va tuzating:

html
<!-- ❌ to'rtta xato bor -->
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no">
  <title>Choyxona</title>
  <link rel="stylesheet" href="uslub.css">
  <base href="https://example.com/">
  <div class="banner">Chegirma 10%!</div>
  <title>Bron — Choyxona «Bahor»</title>
</head>
Yechim
html
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Bron — Choyxona «Bahor»</title>
  <link rel="stylesheet" href="uslub.css">
</head>
  1. user-scalable=no — zoom taqiqlangan. Uni olib tashladik va initial-scale=1 qo'shdik.
  2. base link dan keyin kelgan — validator xatosi. Bundan tashqari, u keraksiz edi — olib tashladik.
  3. div — ko'rinadigan element head ni erta yopadi. Banner body ga ko'chadi.
  4. Ikkita title. Aniqrog'ini — "Bron — Choyxona «Bahor»" ni qoldirdik.

3-mashq (qiyin): Viewport tajribasi

  1. menyu.html ga to'liq head yozing: kodlash, viewport, aniq title va uslub.css ni ulaydigan link. (uslub.css fayli hali yo'q bo'lsa ham — bo'sh fayl yarating.)
  2. body ga uzun bir paragraf yozing (4–5 gap).
  3. DevTools qurilma rejimida document.documentElement.clientWidth ni viewport qatori bilan va usiz o'lchang. Ikkala sonni yozib oling.
  4. Viewport qatoriga user-scalable=no qo'shib, qurilma rejimida ikki barmoq bilan kattalashtirishni sinab ko'ring (sichqonchada Shift ni bosib turib suring). Nima o'zgardi? Keyin qatorni asliga qaytaring.
Yechim
html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Menyu va narxlar — Choyxona «Bahor»</title>
    <link rel="stylesheet" href="uslub.css">
  </head>
  <body>
    <h1>Menyu va narxlar</h1>
    <p>Bizning oshimiz har kuni ertalab soat 6:00 da damlanadi.
      Guruch — Samarqandning devzira navi. Go'shti — yosh
      qo'zichoqniki. Soat 12:00 gacha kelsangiz, qozonning
      eng mazali joyidan olasiz.</p>
  </body>
</html>

O'lchovlar: viewport qatori bilan — tanlangan telefon eni (masalan, 390). Usiz — 980. Matn ham ikki holatda keskin farq qiladi.

user-scalable=no bilan DevTools'dagi kattalashtirish ishlamasligi mumkin. Ba'zi haqiqiy telefonlar (masalan, iPhone Safari) esa bu taqiqni accessibility uchun o'zi e'tiborsiz qoldiradi. Lekin hamma brauzer bunday qilmaydi — shuning uchun taqiqni umuman yozmaymiz.

10. Real ishda

  • Freymvorklar head ni o'zi yig'adi. Next.js (React asosidagi freymvork, kursda alohida o'rganamiz) va boshqalar head qatorlarini sahifa sozlamalaridan yaratadi. Lekin natijani baribir Ctrl + U bilan tekshirasiz — bu darsdagi qoidalar o'zgarmaydi.
  • Tezlik auditi. Katta saytlarda head tartibi sahifa ochilish tezligiga sezilarli ta'sir qiladi. Buni tekshiradigan maxsus brauzer kengaytmalari ham bor (masalan, capo.js). Resurs maslahatlari darsida chuqurroq ko'ramiz.
  • Mobil birinchi. O'zbekistonda internetdan foydalanuvchilarning katta qismi saytlarni telefonda ochadi. Viewport qatori yo'q sayt ularning ko'zida "eski va buzuq" ko'rinadi. Lighthouse viewport yo'qligini va zoom taqiqini alohida xato qiladi.
  • Intervyuda so'raladi: "meta viewport nima qiladi?", "Nega user-scalable=no yomon?", "head ga nima yoziladi?".

Xulosa

  • head da faqat sakkizta element: meta, title, link, style, script, base, noscript, template.
  • head dagi ko'rinadigan element uni erta yopadi — keyingi qatorlar body ga tushadi va Google ularni o'qimaydi.
  • Tartib: charset → viewport → title → (base) → CSS → skriptlar → qolganlari.
  • width=device-width, initial-scale=1 — sahifani telefon eniga moslab, kichraytirmasdan chizadi; usiz — 980 piksel.
  • Zoom'ni o'chirmang: user-scalable=no va maximum-scale=1 — accessibility xatosi.
  • title — har sahifada boshqacha, aniq qism oldinda; base — ishlatmang, u # havolalarni ham buzadi.

Keyingi dars: Qidiruv tizimlari uchun meta teglar — description, robots, canonical va hreflang bilan sahifaning Google'da qanday ko'rinishini boshqaramiz.

Manbalar

  • MDN: "The head element", "Viewport meta tag", "The base element" — developer.mozilla.org
  • WHATWG HTML: "Document metadata" — html.spec.whatwg.org
  • Google Search Central: "Use valid HTML to specify page metadata" — developers.google.com/search
  • Chrome for Developers: Lighthouse accessibility va viewport auditlari — developer.chrome.com
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML head anatomiyasi: teglar tartibi, meta viewport va base — IlmHamroh