IlmHamroh
JavaScript Full-stack/4-qism. HTML83/86-dars17 daqiqa
Mundarija (37)

HTML kod uslubi: chekinish, qo'shtirnoq, nomlash va Prettier bilan avtomatlashtirish

Qisqacha: Kod uslubi — jamoadagi hamma HTML'ni bir xil yozishi uchun kelishilgan qoidalar: 2 bo'sh joy chekinish, kichik harfli teglar, atribut qiymati qo'shtirnoqda, boolean atribut qiymatsiz, id va class nomlari kebab-case da. Qoidalarni eslab yurish shart emas: Prettier kodni avtomatik formatlaydi, html-validate esa qolganini tekshiradi.

Bu darsda

  • Google HTML/CSS Style Guide'dagi asosiy HTML qoidalarini bilasiz va nega ular borligini tushuntirasiz.
  • Boolean atribut, bo'sh (void) element va qo'shtirnoqlarni bir xil uslubda yozasiz.
  • id, class va fayllarga izchil nom berasiz, foydali izoh yozasiz.
  • .prettierrc va .htmlvalidate.json fayllarini loyihaga moslab sozlaysiz.
  • Ikkala vositani bitta npm run buyrug'iga birlashtirasiz.

Oldin bilishingiz kerak: HTML'ni formatlash va validatsiya qilish, Brauzer mosligi va progressive enhancement, npm'ga birinchi qadam.

1. Nega bu kerak?

«Bahor» sayti o'sdi. Jasur aka endi yordamchi oldi — Sardor ham sahifalar yozadi. Bir hafta o'tib, loyihada shunday ikki parcha paydo bo'ldi.

Sardorning parchasi:

html
<UL CLASS='Menyu'>
    <LI>Osh</LI>
</UL>

Jasur akaning parchasi:

html
<ul class="menyu">
  <li>Kabob</li>
</ul>

Ikkalasi ham ishlaydi. Brauzer uchun farqi yo'q. Lekin odam uchun farq katta. Har safar faylni ochganda ko'z "bu yerda nega boshqacha?" deb to'xtaydi. class nomi Menyu mi yoki menyu mi — eslab qolish kerak. Kod ko'rib chiqilganda (review) esa ma'no o'rniga uslub haqida bahs boshlanadi.

Yo'l harakati qoidalariga o'xshaydi. O'zbekistonda mashinalar o'ng tomondan yuradi, Angliyada — chapdan. Qaysi biri to'g'ri? Ikkalasi ham. Muhimi — bitta yo'lda hamma bir tomondan yursin.

Kod uslubi ham shunday. "Eng to'g'ri" uslub yo'q. Lekin bitta uslub bo'lishi shart.

2. Uslub qo'llanmasi nima

Kod uslubi qo'llanmasi (style guide) — jamoa kodni qanday yozishini belgilaydigan qoidalar to'plami. Unda xato va to'g'ri emas, balki "bizda qanday qabul qilingan" yoziladi. Bunday kelishilgan qoida konventsiya (convention) deyiladi.

HTML uchun eng mashhur ochiq qo'llanma — Google HTML/CSS Style Guide (google.github.io/styleguide/htmlcssguide.html). Ko'p kompaniyalar o'z qoidalarini shunga asoslanib yozadi. Bu darsda uning asosiy qoidalarini ko'ramiz, keyin ularni vositalarga topshiramiz.

Qoidalarning deyarli hammasi bitta maqsadga xizmat qiladi: kodni ko'z bilan tez o'qish va o'zgarishni oson ko'rish.

3. Asosiy qoidalar

3.1 Chekinish: 2 bo'sh joy

Har bir ichki element otasidan 2 bo'sh joy ichkarida yoziladi. Blok elementlar — ro'yxat, jadval, paragraf, bo'lim — har biri yangi qatordan boshlanadi.

Hammasi bitta qatorda:

html
<ul><li><a href="menyu/">Menyu</a></li><li>Aloqa</li></ul>

Har blok alohida qatorda, bolalari ichkarida:

html
<ul>
  <li><a href="menyu/">Menyu</a></li>
  <li>Aloqa</li>
</ul>

Ikkinchisida tuzilma ko'z bilan ko'rinadi: ul ichida ikkita li. Inline elementlar (a, strong, em) esa matn bilan bitta qatorda qoladi — ular matnning bir qismi.

Nega aynan 2? Chunki HTML'da ichma-ichlik chuqur bo'ladi: body → main → section → ul → li → a. 4 bo'sh joy bilan kod tezda o'ngga "qochib" ketadi. Tab (Tab belgisi) va bo'sh joyni aralashtirmang — turli muharrirda ular har xil kenglikda ko'rinadi. VS Code sozlamalari darsidagi .editorconfig fayli bu tanlovni butun loyiha uchun belgilaydi.

3.2 Kichik harf

Teg va atribut nomlari — faqat kichik harfda. HTML katta-kichik harfni farqlamaydi, <P> ham ishlaydi. Lekin 1990-yillardagi katta harfli uslub bugun eskicha ko'rinadi va o'qishni qiyinlashtiradi.

  • <P CLASS="izoh">
  • <p class="izoh">

Atribut qiymatlari esa boshqa gap. class="Menyu" va class="menyu" — ikki xil nom, chunki CSS ularni farqlaydi. Shuning uchun qiymatlarni ham kichik harfda yozish odat bo'lgan.

DOCTYPE — yagona munozarali joy. <!DOCTYPE html> ham, <!doctype html> ham to'g'ri. Google kichik harfni tavsiya qiladi, Prettier ham kichik harfda yozadi. Bittasini tanlang va hamma sahifada shunday qoldiring.

3.3 Qo'shtirnoq: har doim, va ikkitalik

Atribut qiymati har doim qo'shtirnoqda. Validatsiya darsidagi title=Kechki menyu xatosini eslang: qo'shtirnoqsiz qiymat birinchi bo'sh joyda uziladi.

Qaysi qo'shtirnoq — " yoki '? Google ikkitalik " ni tavsiya qiladi. O'zbek tilida buning yana bir kuchli sababi bor — apostrof:

Birtalik qo'shtirnoq:

html
<img src="sori.jpg" alt='Choyxonadagi so'ri'>

Qiymat so dan keyingi apostrofda tugaydi. Brauzer uchun alt — "Choyxonadagi so", qolgani esa buzuq atributlar.

Ikkitalik qo'shtirnoq:

html
<img src="sori.jpg" alt="Choyxonadagi so'ri">

Bizning matnlarimizda o' va g' har qadamda uchraydi. Ikkitalik qo'shtirnoq bu muammoni butunlay yo'q qiladi.

Tekshirib ko'ring: alt='Bog'dagi stol' — brauzer alt qiymatini nima deb o'qiydi?

Javob

Bog deb. Qiymat birtalik qo'shtirnoq bilan ochilgan, shuning uchun keyingi ' (apostrof) uni yopadi. dagi stol' esa atribut qiymatiga kirmay qoladi. Tuzatish: alt="Bog'dagi stol".

3.4 Boolean atributlar: qiymatsiz

Teg, element va atribut darsida ko'rdik: boolean atributning bor-yo'qligi muhim, qiymati emas. Shuning uchun uni qiymatsiz yozamiz:

  • <input name="ism" required>
  • <input name="ism" required="required">
  • <input name="ism" required="">

Ikki variant ham ishlaydi, lekin ortiqcha. Eng xavflisi esa boshqa.

Mantiqqa zid qiymat:

html
<button type="submit" disabled="false">Yuborish</button>

Mantiqan "o'chirilmagan" deb o'qiladi. Aslida tugma o'chirilgan! Brauzer qiymatga qaramaydi — disabled atributi bor, demak tugma ishlamaydi. html-validate buni ushlaydi:

text
  1:23  error  Attribute "disabled" should omit value          attribute-boolean-style
  1:33  error  Attribute "disabled" has invalid value "false"  attribute-allowed-values

Tarjimasi: birinchisi — "disabled qiymatsiz yozilishi kerak", ikkinchisi — "disabled atributida noto'g'ri qiymat: false". Tugmani yoqish uchun atributni butunlay olib tashlash kerak.

3.5 Bo'sh elementlar: <br> yoki <br />

Bo'sh (void) elementlarni ikki xil yozish mumkin: <img ...> va <img ... />. HTML uchun ikkalasi bir xil — oxiridagi / shunchaki e'tiborsiz qoladi. Bittasini tanlang.

Prettier /> bilan yozadi. Ko'p jamoalar shunga rozi bo'ladi, chunki keyinroq o'rganadigan JSX'da (React'ning HTML'ga o'xshash yozuvi) /> majburiy.

Kurs darslaridagi misollarda biz / siz yozamiz — qisqaroq. Loyihangizda Prettier yoqilgan bo'lsa, u /> qo'yib chiqadi. Ikkalasi ham to'g'ri, faqat bitta loyiha ichida aralashmasin.

Diqqat: /> faqat bo'sh elementlarda zararsiz. <div /> yozsangiz, brauzer uni yopilgan deb emas, ochilgan <div> deb o'qiydi. Undan keyingi hamma narsa shu div ichiga tushib qoladi. html-validate: <div> must not be self-closed — "div o'zini-o'zi yopa olmaydi".

3.6 Atribut tartibi

Brauzer uchun atributlar tartibi ahamiyatsiz. Odam uchun esa eng muhimi birinchi turgani qulay. Ko'p jamoalarda shu tartib qabul qilingan:

  1. class
  2. id, name
  3. data-*
  4. src, for, type, href, value
  5. title, alt
  6. role, aria-*
  7. tabindex
  8. style
html
<a class="nav-havola" href="menyu/" aria-current="page">Menyu</a>

Bu — qat'iy qonun emas, odat. Asosiysi: bitta loyihada bir xil tartib. Prettier atributlar tartibini o'zgartirmaydi. Buni avtomatlashtirish uchun qo'shimcha plagin bor (prettier-plugin-organize-attributes) — hozir shart emas.

3.7 Keraksiz narsalarni yozmaslik

Google qo'llanmasining bir qoidasi — ortiqcha kod yozmaslik:

  • style va script da type kerak emas. <script type="text/javascript" src="app.js">, <script src="app.js">. html-validate: "type" attribute is unnecessary for javascript resources.
  • Entity kerak emas, agar belgini to'g'ridan-to'g'ri yozish mumkin bo'lsa. &laquo;Bahor&raquo; o'rniga «Bahor». Faqat < va & kabi xizmat belgilari — entity bilan (Maxsus belgilar darsi).
  • Inline style atributi — yo'q. Ko'rinish CSS faylida bo'ladi (CSS qismida).

Maslahat: Google qo'llanmasi yopuvchi teglarni ham (masalan, </li>, </p>) tushirib qoldirishni "o'ylab ko'rishni" taklif qiladi — HTML bunga ruxsat beradi. Lekin ko'p jamoalar bunday qilmaydi: yopuvchi teg tuzilmani aniq ko'rsatadi. Bu kursda biz hamma teglarni yopamiz.

Tekshirib ko'ring: <input type="checkbox" checked="false"> — sahifa ochilganda katakcha belgilanganmi?

Javob

Ha, belgilangan. checked — boolean atribut, brauzer faqat uning borligiga qaraydi. "false" qiymati hech narsani o'zgartirmaydi. Belgilanmagan bo'lishi uchun checked ni butunlay olib tashlash kerak.

4. Nomlash va izohlar

4.1 id va class nomlari

Qoidalar:

  • kebab-case: kichik harflar va defis — taom-karta, asosiy-menyu. taomKarta va Taom_Karta — yo'q.
  • Ma'noga qarab, ko'rinishga emas. qizil-matn, chap-blok. aksiya-narxi, yon-panel. Ertaga dizayner rangni yashilga almashtirsa, qizil-matn nomi yolg'onga aylanadi.
  • Apostrofsiz: sori-rasm, so'ri-rasm emas. Apostrof CSS va JavaScript'da qo'shimcha muammo tug'diradi.
  • class — bezash uchun, id — faqat kerak bo'lganda. id sahifada yagona bo'lishi shart. U label for, aria-describedby va #bo'lim havolalari uchun kerak (Sahifa ichidagi havolalar).

Bu qismda nomlarni o'zbekcha yozyapmiz — HTML so'zlari bilan o'zingiz tanlagan nomlarni farqlash oson bo'lsin. Real loyihalarda nomlar ko'pincha inglizcha bo'ladi (menu-card) — bunga Toza kod: nomlash darsida o'tamiz.

4.2 Fayl nomlari

Fayl nomlash va Ko'p sahifali sayt tuzilmasi darslaridagi qoidalar kod uslubining ham bir qismi:

Nega
Menyu.HTML menyu.html Serverda katta-kichik harf farq qiladi
bizning taomlar.html taomlar.html Bo'sh joy URL'da %20 bo'ladi
IMG_2041.jpg osh-tarelka.jpg Nomdan mazmun ko'rinsin

4.3 Izohlar

HTML izohi <!-- ... --> (Teg, element va atribut darsida ko'rgansiz). Yaxshi izoh nima emas, nega ekanini aytadi:

html
<!-- ❌ Kerakmas: kod o'zi aytib turibdi -->
<!-- Bu ro'yxat -->
<ul>
  <li>Osh</li>
</ul>

<!-- ✅ Foydali: sababini aytadi -->
<!-- Narxlar 2026-yil sentabr menyusidan. Oktabrda yangilanadi. -->
<p>Osh — 35 000 so'm</p>

Uch qoida:

  • Vazifani TODO bilan belgilang: <!-- TODO: aloqa sahifasiga xarita qo'shish -->. VS Code'da TODO so'zini qidirib, qolgan ishlarni bir zumda topasiz.
  • O'chirilgan kodni izohda qoldirmang. "Balki kerak bo'lar" deb izohga olingan eski kod faylni axlatga to'ldiradi.
  • Izohga maxfiy narsa yozmang. Izoh brauzerda ko'rinmaydi, lekin View Source (Ctrl + U) bilan hamma o'qiydi. Parol, ichki manzil yoki "bu yerda himoya yo'q" degan gap — hujumchi uchun sovg'a.

Tekshirib ko'ring: Qaysi nom yaxshiroq va nega: class="katta-sariq-tugma" yoki class="bron-tugma"?

Javob

bron-tugma. U tugmaning vazifasini aytadi — stol band qilish. katta-sariq-tugma esa ko'rinishni aytadi. Dizayn o'zgarsa (tugma kichraydi yoki ko'k bo'ladi), bu nom noto'g'ri bo'lib qoladi va hamma joyda uni almashtirish kerak bo'ladi.

5. Avtomatlashtirish: Prettier

Yuqoridagi qoidalarni eslab yurish shart emas. Ularning yarmini Prettier o'zi bajaradi. Validatsiya darsida uni ishga tushirgan edik. Endi uni loyihaga moslab sozlaymiz.

5.1 Prettier nimani o'zi tuzatadi

Buzuq uslubli parcha:

html
<P CLASS='izoh' ID=narx>Osh</P>

npx prettier --write dan keyin:

html
<p class="izoh" id="narx">Osh</p>

Prettier teg va atribut nomlarini kichik harfga o'tkazdi, qo'shtirnoqlarni ikkitalikka almashtirdi, qo'shtirnoqsiz qiymatga qo'shtirnoq qo'ydi. Chekinishni ham o'zi tekislaydi.

Nimani tuzatmaydi: required="required", disabled="false", <div />, keraksiz type, yomon nomlar va atribut tartibi. Bu — linter ishi.

5.2 .prettierrc — loyiha sozlamasi

Loyiha ildizida .prettierrc faylini yarating. Bu — JSON fayl:

json
{
  "printWidth": 80,
  "singleAttributePerLine": true
}
  • printWidth — qator uzunligi chegarasi. Qator undan uzun bo'lsa, Prettier uni bo'ladi. 80 — standart qiymat.
  • singleAttributePerLine — teg bitta qatorga sig'masa, har bir atribut alohida qatorga tushadi.

Uzun input shunday bo'ladi:

html
<input
  id="telefon"
  name="telefon"
  type="tel"
  autocomplete="tel"
  required
/>

Har bir atribut alohida qatorda — birini qo'shsangiz yoki o'chirsangiz, faqat bitta qator o'zgaradi.

Prettier sozlamasi fayli bor ekan, VS Code'dagi Prettier kengaytmasi ham, terminaldagi npx prettier ham uni o'qiydi. Hamma bir xil natija oladi.

Maslahat: Prettier yana bitta fayl o'qiydi: .prettierignore. Unga formatlanmasligi kerak bo'lgan papkalarni yozasiz — masalan, boshqa saytdan yuklab olingan tayyor fayllar.

5.3 G'alati natija: </label va >

Bir kuni Prettier shunday "chiroyli" natija beradi:

html
<label for="ism">Ismingiz</label
><input id="ism" name="ism" type="text" required />

Qavs keyingi qatorga ko'chgan! Bu xato emas. Asl faylda label va input orasida bo'sh joy yo'q edi: </label><input. HTML'da inline elementlar orasidagi bo'sh joy ekranda ko'rinadi (Bo'sh joylar darsi). Prettier bo'sh joy qo'shib, sahifaning ko'rinishini o'zgartirishdan qo'rqadi. Shuning uchun bo'sh joy qo'shmasdan qatorni boshqa joydan bo'ldi.

Tuzatish oddiy: manbada elementlarni alohida qatorga yozing.

html
<label for="ism">Ismingiz</label>
<input id="ism" name="ism" type="text" required />

Endi Prettier ham shunday qoldiradi.

Diqqat: Internetda "htmlWhitespaceSensitivity: ignore qo'ying" degan maslahat uchraydi. U Prettier'ga bo'sh joylarni e'tiborsiz qoldirishga ruxsat beradi. Natijada <strong>Diqqat</strong>, bugun... quyidagiga aylanishi mumkin: Diqqat va vergul orasida bo'sh joy paydo bo'ladi — ekranda "Diqqat ," ko'rinadi. Bu sozlamani faqat nima qilayotganingizni aniq bilganda ishlating.

6. Avtomatlashtirish: html-validate

6.1 Prettier bilan to'qnashuv

Prettier formatlagan faylni html-validate:recommended qoidalari bilan tekshiramiz. Kutilmagan natija:

text
  1:1   error  DOCTYPE should be uppercase                                              doctype-style
  4:27  error  Expected omitted end tag <meta> instead of self-closing element <meta/>  void-style

Tarjimasi: "DOCTYPE katta harfda bo'lishi kerak" va "<meta/> o'rniga yopuvchi tegsiz <meta> kutilgan edi". Ikki vosita bir-biriga qarshi ishlayapti: Prettier <!doctype html> va /> yozadi, html-validate esa teskarisini talab qiladi.

Yechim — html-validate'ning maxsus prettier to'plami. U Prettier bilan ziddiyatli uch qoidani (attr-quotes, doctype-style, void-style) o'chiradi.

6.2 .htmlvalidate.json — loyiha sozlamasi

json
{
  "extends": [
    "html-validate:recommended",
    "html-validate:prettier"
  ],
  "rules": {
    "heading-level": "error",
    "id-pattern": ["error", { "pattern": "kebabcase" }],
    "class-pattern": ["error", { "pattern": "kebabcase" }]
  }
}
  • extends — tayyor to'plamlar: avval tavsiya etilgan qoidalar, keyin Prettier bilan kelishuv.
  • heading-level — sarlavhalar darajasi sakramasin (Sarlavhalar darsida qo'shgan edik).
  • id-pattern va class-pattern — nomlar faqat kebab-case da bo'lsin.

Sinab ko'ramiz:

html
<div class="taomKarta" id="Asosiy_Blok">
  <p>Osh</p>
</div>
text
  1:13  error  class "taomKarta" does not match the configured pattern "kebabcase"  class-pattern
  1:28  error  id "Asosiy_Blok" does not match the configured pattern "kebabcase"   id-pattern

Tarjimasi: "taomKarta klassi sozlangan kebabcase naqshiga mos emas". Tuzatish: class="taom-karta", id="asosiy-blok".

html-validate'da yana ikkita foydali to'plam bor: html-validate:a11y (accessibility qoidalari) va html-validate:document (to'liq sahifa uchun: DOCTYPE, har maydonda label, sarlavhalar tartibi). Ularni yakuniy loyihada ishlatamiz.

6.3 Ikkalasini bitta buyruqqa

npm'ga birinchi qadam darsida package.json dagi scripts bo'limini ko'rgan edik. Loyiha ildizida:

json
{
  "scripts": {
    "format": "prettier --write .",
    "lint": "html-validate \"**/*.html\"",
    "check": "prettier --check . && html-validate \"**/*.html\""
  }
}

Endi uchta buyruq bor:

  • npm run format — hamma fayllarni formatlaydi.
  • npm run lint — hamma HTML fayllarni tekshiradi. **/*.html — "barcha papkalardagi .html fayllar".
  • npm run check — ikkalasini faqat tekshiradi, hech narsani o'zgartirmaydi. && — birinchisi muvaffaqiyatli bo'lsa, ikkinchisini ishga tushir (Exit code darsi).

Vositalarni har safar yuklab olmaslik uchun ularni loyihaga bir marta o'rnating:

bash
npm install --save-dev prettier html-validate

Shunda loyihadagi hamma dasturchi aynan bir xil versiyadan foydalanadi.

Diqqat: O'rnatishdan keyin loyihada node_modules papkasi paydo bo'ladi. Unda begona paketlarning minglab fayllari, jumladan HTML fayllar ham bor. Prettier bu papkani o'zi chetlab o'tadi, html-validate esa **/*.html bo'yicha uni ham tekshirib, begona xatolarni chiqaradi. Loyiha ildizida .htmlvalidateignore faylini yarating va unga bitta qator yozing: node_modules/.

Tekshirib ko'ring: Nega check skriptida prettier --write emas, prettier --check ishlatilgan?

Javob

check — faqat tekshiruv. U fayllarni o'zgartirmasligi kerak, faqat "hammasi tartibdami?" savoliga javob beradi. Masalan, saytni internetga chiqarishdan oldin. --write esa fayllarni qayta yozadi — bu format skriptining ishi.

7. Uslub qayerda yoziladi

Qoidalar faqat vositalar sozlamasida emas, odamlar uchun ham yozilishi kerak. Ko'p loyihalarda README.md da (Markdown darsida ko'rgansiz) "Kod uslubi" bo'limi bo'ladi:

  • Qaysi qo'llanmaga tayanamiz (masalan, Google HTML/CSS Style Guide).
  • Qaysi vositalar va qaysi buyruq bilan tekshiriladi (npm run check).
  • Vosita tekshira olmaydigan kelishuvlar: atribut tartibi, izoh uslubi, nomlash tili.

Asosiy g'oya: bahs vositalar bilan yopiladi. "Menimcha, 4 bo'sh joy chiroyliroq" degan gap bir marta muhokama qilinadi, sozlamaga yoziladi va boshqa qaytilmaydi.

8. Ko'p uchraydigan xatolar

8.1 disabled="false" bilan yoqishga urinish

3.4-bo'limda ko'rdik: boolean atribut qiymatga qaramaydi. Tugma yoki maydonni yoqish uchun atributni olib tashlaysiz. Bu xato keyinroq JavaScript'da ham tez-tez uchraydi.

8.2 <div /> bilan "bo'sh div"

JSX yoki XML'dan kelganlar <div /> yozib, uni yopilgan deb o'ylaydi. HTML'da u ochilgan teg bo'lib qoladi va keyingi hamma kontentni yutadi. Bo'sh div — <div></div>.

8.3 Birtalik qo'shtirnoq va o'zbekcha matn

alt='...' yoki title='...' ichida o', g' yoki ' bo'lsa — qiymat uziladi. Ikkitalik qo'shtirnoqni odat qiling.

8.4 Vositalar bir-biriga qarshi

Prettier formatlaydi, html-validate xato beradi, siz qo'lda tuzatasiz, Prettier yana qaytaradi — cheksiz aylanish. Sabab: html-validate:prettier to'plami ulanmagan. Uni extends ga qo'shing.

8.5 Eski loyihani birdan formatlash

Katta eski loyihada npm run format bir zumda yuzlab faylni o'zgartiradi. Agar shu bilan birga mazmunni ham o'zgartirsangiz, qaysi o'zgarish muhim ekanini topib bo'lmaydi. Formatlashni alohida, mazmun o'zgarishlarisiz qiling. Keyinroq Git'ni o'rganganda bu qoida yanada muhim bo'ladi (Versiya nazorati).

9. Mashqlar

1-mashq (oson): Uslub xatolarini toping

Quyidagi parchada 5 ta uslub muammosi bor. Ularni sanab bering.

Buzuq uslub:

html
<UL class='Asosiy_Menyu'>
<li><a href=menyu/>Menyu</a></li>
</UL>
<input type="checkbox" name="choy" checked="checked">

Ishora: 3-bo'limdagi qoidalarni birma-bir tekshirib chiqing.

Yechim
  1. UL — katta harf.
  2. class qiymati birtalik qo'shtirnoqda.
  3. Asosiy_Menyu — kebab-case emas.
  4. href=menyu/ — qo'shtirnoqsiz.
  5. li ichkariga surilmagan.
  6. Bonus: checked="checked" — boolean atribut qiymatsiz yoziladi.

To'g'ri variant:

html
<ul class="asosiy-menyu">
  <li><a href="menyu/">Menyu</a></li>
</ul>
<input type="checkbox" name="choy" checked>

2-mashq (o'rta): Loyihani sozlang

choyxona papkasida:

  1. .prettierrc yarating: qator uzunligi 80, uzun teglarda har atribut alohida qatorda.
  2. .htmlvalidate.json ni yangilang: tavsiya etilgan qoidalar, Prettier bilan kelishuv, heading-level va kebab-case nomlar.
  3. package.json ga format, lint va check skriptlarini qo'shing.
  4. npm run check ni ishga tushiring.

Ishora: package.json yo'q bo'lsa, avval npm init -y — npm darsida ko'rgansiz.

Yechim

.prettierrc:

json
{
  "printWidth": 80,
  "singleAttributePerLine": true
}

.htmlvalidate.json — 6.2-bo'limdagi fayl aynan o'zi. .htmlvalidateignore ga esa node_modules/ qatori.

package.json ning bir qismi:

json
{
  "scripts": {
    "format": "prettier --write .",
    "lint": "html-validate \"**/*.html\"",
    "check": "prettier --check . && html-validate \"**/*.html\""
  }
}

Terminalda:

bash
npm install --save-dev prettier html-validate
npm run check

Agar Prettier [warn] bilan fayl nomlarini ko'rsatsa — avval npm run format, keyin yana npm run check. html-validate xatolarini esa qo'lda tuzatasiz. Ikkalasi ham jim bo'lsa — loyiha tartibda.

3-mashq (qiyin): Sardorning sahifasini tartibga keltiring

Sardor yozgan tadbirlar.html dan parcha. Uni loyiha uslubiga keltiring. Qaysi tuzatishni Prettier qiladi, qaysisini o'zingiz qilasiz — alohida yozing.

Sardorning kodi:

html
<SECTION id="Tadbirlar">
<H2>Tadbirlar</H2>
<!-- <p>Eski tadbir: Navro'z 2025</p> -->
<p style="color: red">Osh bayrami — 5-oktabr</p>
<button type='button' disabled="false">Band qilish</button>
<img src='Rasm 1.JPG' alt='Bog'dagi dasturxon'>
</SECTION>
Yechim

Tartibga keltirilgan variant:

html
<section id="tadbirlar">
  <h2>Tadbirlar</h2>
  <p class="yangi-tadbir">Osh bayrami — 5-oktabr</p>
  <button type="button">Band qilish</button>
  <img src="bogdagi-dasturxon.jpg" alt="Bog'dagi dasturxon">
</section>

Prettier o'zi qiladi:

  • Teglarni kichik harfga o'tkazish, chekinishni tekislash.
  • type='button' dagi qo'shtirnoqni ikkitalikka almashtirish.

O'zingiz qilasiz:

  • id="Tadbirlar" → tadbirlar (kebab-case, id-pattern ushlaydi).
  • Izohdagi eski kodni o'chirish.
  • style o'rniga ma'noli class (rangni CSS qismida beramiz; no-inline-style ushlaydi).
  • disabled="false" ni olib tashlash — aks holda tugma o'chiq.
  • alt='Bog'dagi...' — birtalik qo'shtirnoq apostrofda uzilgan edi. Prettier buni tuzata olmaydi: u allaqachon buzilgan kodni ko'radi.
  • Fayl nomi Rasm 1.JPG → bogdagi-dasturxon.jpg: bo'sh joysiz, kichik harfda, ma'noli. Faylning o'zini ham qayta nomlash kerak.

Parchani alohida tekshirsangiz, html-validate yana bitta xabar beradi: Initial heading level must be <h1> but got <h2> — "birinchi sarlavha h1 bo'lishi kerak edi". To'liq sahifada bu section dan oldin h1 turadi, shuning uchun u yerda xato yo'qoladi.

10. Real ishda

  • Har bir jamoada uslub fayllari bor. Yangi loyihani ochganingizda ildizda .prettierrc, .editorconfig va linter sozlamasini ko'rasiz. Birinchi ish — ularni o'qish.
  • Avtomatik tekshiruv. Katta loyihalarda npm run check kod GitHub'ga yuborilganda o'zi ishga tushadi va xato bo'lsa kodni qabul qilmaydi. Bu CI deb ataladi — kursda alohida o'rganamiz.
  • Kod ko'rib chiqish (code review). Uslub vositalarga topshirilgan jamoada review'da faqat mazmun muhokama qilinadi. Bu vaqtni ikki-uch barobar tejaydi.
  • Intervyuda test topshiriq yuborsangiz, tekshiruvchi birinchi navbatda kodning tartibiga qaraydi. Formatlangan, izchil nomlangan kod — "bu odam jamoada ishlay oladi" degan belgi.

Xulosa

  • Kod uslubi — "to'g'ri" emas, "bizda shunday" degan kelishuv; muhimi — bitta uslub.
  • 2 bo'sh joy chekinish, kichik harf, ikkitalik qo'shtirnoq (o'zbekcha apostrof uchun ayniqsa muhim), boolean atribut qiymatsiz.
  • disabled="false" ham o'chiradi; <div /> — yopilmagan div.
  • id va class — kebab-case, ko'rinishga emas, vazifaga qarab; izoh — "nega"ni aytadi, maxfiy gap yozilmaydi.
  • Prettier formatlaydi (.prettierrc), html-validate tekshiradi (.htmlvalidate.json + html-validate:prettier).
  • npm run check — ikkala tekshiruv bitta buyruqda.

Keyingi dars: HTML sahifani audit qilish: Lighthouse va PageSpeed — sahifaning tezligi, accessibility'si va SEO'sini ball bilan o'lchaymiz va hisobotni o'qishni o'rganamiz.

Manbalar

  • Google HTML/CSS Style Guide — google.github.io/styleguide/htmlcssguide.html
  • Prettier: "Options" va "Configuration File" — prettier.io/docs
  • html-validate: "Presets" va qoidalar ro'yxati — html-validate.org
  • MDN: "Boolean attribute" — developer.mozilla.org
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML kod uslubi: chekinish, qo'shtirnoq, nomlash va Prettier bilan avtomatlashtirish — IlmHamroh