HTML global atributlar: id, class, hidden, data-* va inert

Qisqacha: Global atributlar — istalgan HTML elementga qo'yiladigan atributlar: id, class, title, lang, dir, hidden, data-*, translate, inert va boshqalar. Har birining aniq vazifasi bor: hidden elementni butunlay yashiradi, inert uni ko'rinadigan, lekin bosib bo'lmaydigan qiladi, data-* esa elementga o'z ma'lumotingizni biriktiradi. O'ylab topilgan atribut (narx="35000") xato — buning uchun data-narx bor.

Bu darsda

• Global atribut va elementga xos atribut farqini tushuntira olasiz.
• id va class ni qoidaga mos nomlaysiz va takroriy id qanday buzilishga olib kelishini bilasiz.
• title qayerda foydali va qayerda yetarli emasligini ajratasiz.
• hidden, hidden="until-found" va inert ni to'g'ri joyda ishlatasiz.
• data-* atributlari bilan elementga o'z ma'lumotingizni qo'shasiz.

Oldin bilishingiz kerak: Teg, element va atribut, Umumiy konteynerlar: div va span, Ko'p tilli matn, yo'nalish va tahrir izlari, Invoker commands.

1. Nega bu kerak?

O'tgan darslarda interaktiv elementlar yasadik: ochiladigan blok, dialog oynasi, popover menyu. popover atributini div ga ham, p ga ham qo'ya oldik. href ni esa faqat havolaga qo'yamiz. Nega bunday farq bor?

Hayotdan o'xshatish. Har bir odamning ismi va tug'ilgan sanasi bor — bu hammaga tegishli. Haydovchilik guvohnomasi raqami esa faqat haydovchida bo'ladi. HTML'da ham shunday:

• Elementga xos atribut — faqat ma'lum teglarda ishlaydi. href — havolada, src — rasmda, for — label da.
• Global atribut (global attribute) — istalgan elementda ishlaydi. id, class, lang, hidden — div da ham, h1 da ham, button da ham.

Bu darsda global atributlarni bir joyga yig'amiz. Ba'zilarini oldin ko'rgansiz — ularni eslab, yangi qirralarini ochamiz. Yangilari esa «Bahor» saytining menyusini aqlliroq qiladi.

2. Global atributlar xaritasi

2.1 Guruhlarga bo'lib ko'ramiz

Global atributlar ko'p. Ularni vazifasiga qarab guruhlasak, eslab qolish osonroq:

Ikkinchi yarmi:

Yana bir nechtasi bor, ular keyingi mavzularga tegishli: role va aria-* — ARIA asoslari darsida, nonce — HTML xavfsizligi darsida, slot, part va is — web komponentlar mavzusida.

Bundan tashqari, onclick kabi on... bilan boshlanadigan atributlar ham global, lekin zamonaviy kodda ular ishlatilmaydi — sababini JavaScript qismida ko'ramiz.

2.2 Til atributlari: qisqa eslatma

lang, dir va translate ni Ko'p tilli matn darsida batafsil ko'rgan edik. Uchalasi bitta gapda:

<p>Arab mehmonlarimiz bizni
<span lang="ar" dir="rtl">شاي الربيع</span> deb atashadi —
<span translate="no">«Bahor»</span> choyi.</p>

• lang="ar" — bu bo'lak arab tilida.
• dir="rtl" — o'ngdan chapga yoziladi.
• translate="no" — brauzer tarjimoni «Bahor» nomiga tegmaydi.

Bu uchtasining bitta umumiy xususiyati bor: ular meros bo'lib o'tadi. Paragrafga lang="ru" bersangiz, ichidagi strong ham ruscha hisoblanadi. id va class esa meros bo'lmaydi — ular faqat o'z elementiga tegishli.

2.3 O'ylab topilgan atribut — xato

Boshlovchilar ba'zan o'z atributini o'ylab topadi:

<!-- ❌ -->
<div class="taom-karta" narx="35000">Toshkent oshi</div>

Brauzer jim turadi va sahifa ko'rinadi. Lekin W3C validatori aniq aytadi:

Error: Attribute “narx” not allowed on element “div” at this point.

Tarjimasi: "div elementida bu joyda narx atributiga ruxsat yo'q." Bunday "o'z" atributlar uchun HTML'da maxsus joy bor — data-*. Uni 6-bo'limda ko'ramiz.

Tekshirib ko'ring: alt atributi global atributmi?

3. id va class: chuqurroq

div va span darsida class — guruh nomi, id esa yagona nom ekanini ko'rdik. Endi ularning qoidalarini aniqlashtiramiz.

3.1 id qoidalari

id ning to'rtta qoidasi bor:

1. Sahifada bitta. Bir xil id ikki marta uchramasin.
2. Bo'sh joysiz. id="kun taomi" — xato, id="kun-taomi" — to'g'ri.
3. Katta-kichik harf farqlanadi. Menyu va menyu — ikki xil id.
4. Bo'sh bo'lmaydi. id="" — xato.

Standart id ning raqam bilan boshlanishiga ruxsat beradi (id="1-taom"). Lekin CSS'da bunday nom bilan ishlash noqulay. Shuning uchun id ni harf bilan boshlang.

3.2 Takroriy id nimani buzadi

id ko'p joyda "manzil" bo'lib xizmat qiladi. Biz buni allaqachon ishlatganmiz:

• Havola href="#narxlar" — sahifaning aniq joyiga o'tish (Sahifa ichidagi havolalar).
• label for="telefon" — yozuvni maydonga bog'lash (label).
• popovertarget va commandfor — tugmani oynaga bog'lash (Popover API).

Ikkita element bir xil id olsa, brauzer faqat birinchisini topadi. Masalan, bron formasida:

<!-- ❌ -->
<label for="telefon">Sizning telefoningiz</label>
<input type="tel" id="telefon" name="telefon">

<label for="telefon">Do'stingiz telefoni</label>
<input type="tel" id="telefon" name="dost_telefon">

Mehmon "Do'stingiz telefoni" yozuvini bosadi — fokus esa birinchi maydonga tushadi. Ekran o'quvchi ham ikkinchi maydonning nomini topa olmaydi. Validator shunday yozadi:

Error: Duplicate ID “telefon”.

Tarjimasi: "Takroriy ID: telefon." Tuzatish — ikkinchi maydonga boshqa id bering: id="dost-telefon", label for="dost-telefon".

3.3 class: bir nechta nom va ma'noli nomlash

class ga bir nechta nom bo'sh joy bilan yoziladi. Tartibi ahamiyatsiz:

<article class="taom-karta yangi achchiq">
  <h3>Lag'mon</h3>
</article>

Bu elementda uchta klass bor: taom-karta, yangi, achchiq. class="achchiq yangi taom-karta" ham aynan shu natijani beradi.

Klass nomini ko'rinishga emas, ma'noga qarab tanlang. Nega? Bugun dizayner ogohlantirish qizil bo'lsin deydi, ertaga — to'q sariq. Nom ko'rinishga bog'langan bo'lsa, u yolg'on bo'lib qoladi:

Bo'sh joyni to'ldiring: "Tugagan taom" belgisi uchun ma'noli klass nomi —

Tekshirib ko'ring: Sahifada id="Aloqa" bor. Havola href="#aloqa" ga ishora qiladi. Havola bosilsa, sahifa o'sha joyga o'tadimi?

4. title: yordamchi yozuv va uning cheklovlari

4.1 Qanday ishlaydi

Teg, element va atribut darsida title ni ko'rgan edik: sichqoncha element ustida biroz tursa, kichik yozuv (tooltip) chiqadi.

<p>Osh <abbr title="kishi boshiga">k/b</abbr> 35 000 so'm.</p>

Qiymat ichida qator ko'chirsangiz, yozuv ham ikki qatorda chiqadi. Lekin bundan kam foydalaniladi.

4.2 Nega title ga ishonib bo'lmaydi

title faqat sichqoncha bilan ishlaydigan odam uchun qulay. Qolganlar uni ko'pincha ko'rmaydi:

• Telefonda "ustiga olib borish" yo'q. «Bahor» mehmonlarining ko'pchiligi esa telefonda.
• Klaviatura bilan ishlaydigan odam Tab bilan elementga kelsa ham, yozuv odatda chiqmaydi.
• Ekran o'quvchilar title ni har xil o'qiydi: biri o'qiydi, boshqasi o'tkazib yuboradi.
• Sichqoncha bilan ham yozuv bir soniyacha kechikib chiqadi. Ko'p odam uni kutmaydi.

Qoida: muhim ma'lumotni faqat title ga yozmang. U ko'rinadigan matnda bo'lsin, title esa faqat qo'shimcha.

<!-- ❌ Faqat ikonka, ma'no esa title'da -->
<a href="bron.html" title="Stol band qilish">📅</a>

<!-- ✅ Ma'no ko'rinadigan matnda -->
<a href="bron.html">📅 Stol band qilish</a>

4.3 title qayerda o'rinli

• abbr da — qisqartmaning to'liq shakli (Iqtibos, qisqartma, vaqt).
• iframe da — joylangan sahifa nomi (iframe).
• pattern li maydonda — kerakli format tavsifi (Mobil klaviatura).

Qolgan joylarda uni qo'shimcha izoh sifatida ishlating. Asosiy matn o'rniga emas.

Tekshirib ko'ring: "Bugun osh yo'q" degan ma'lumotni menyudagi osh nomining title iga yozdik. Telefondan kirgan Malika buni biladimi?

5. hidden: elementni butunlay yashirish

5.1 Asosiy ish

hidden — mantiqiy (boolean) atribut: yozilsa — ishlaydi, yozilmasa — yo'q. Maydon holatlari darsida disabled ham xuddi shunday ekanini ko'rgan edik.

<p class="xabar" hidden>
  Kechirasiz, bugungi osh tugadi. Ertaga soat 11:00 da.
</p>

Bu paragraf HTML'da bor, lekin:

• ekranda ko'rinmaydi va joy egallamaydi;
• ekran o'quvchi uni o'qimaydi;
• Tab bilan unga (va ichidagi tugmalarga) yetib bo'lmaydi;
• Ctrl + F qidiruvi uni topmaydi.

Unda nega yozamiz? Chunki keyinroq JavaScript uni kerakli paytda ko'rsatadi: osh tugaganda hidden ni olib tashlaydi. Hozircha bitta fikr yetarli: hidden — "hozircha bu yo'q" degani.

Diqqat: CSS'da elementga display xususiyati berilsa, u hidden ni bekor qilib, elementni ko'rsatib yuborishi mumkin. Buni display va yashirish darsida ko'ramiz. Hozircha: hidden ishlamayotgandek tuyulsa — CSS'ni tekshiring.

5.2 hidden="false" tuzog'i

Teg, element va atribut darsidagi qoidani eslang: mantiqiy atributda qiymat ahamiyatsiz — muhimi, atribut bormi:

<!-- ❌ Bu paragraf baribir yashirin! -->
<p hidden="false">Bugun chegirma bor</p>

"false" deb yozdik-ku, nega yashirin? Chunki brauzer faqat hidden so'zini ko'radi. Uning uchun "false" so'zi hech narsa anglatmaydi. Elementni ko'rsatish uchun atributni butunlay o'chirish kerak. Validator ham ogohlantiradi:

Error: Bad value “false” for attribute “hidden” on element “p”.

Tarjimasi: "p elementidagi hidden atributi uchun noto'g'ri qiymat: false."

5.3 hidden va type="hidden"

Nomlari o'xshash, vazifasi boshqa. Maydon holatlari darsida ogohlantirgan edik, endi farqni aniq ko'ramiz:

5.4 hidden="until-found": eslatma

details va summary darsida hidden ning "yumshoq" turini ko'rgan edik — hidden="until-found" ("topilguncha yashirin"). Element ko'rinmaydi, lekin mehmon Ctrl + F bilan ichidagi so'zni topsa yoki #id havola orqali kelsa, brauzer hidden ni o'zi olib tashlaydi. Menyuda uzun tarkibni shunday yashirish qulay:

<h3>Toshkent oshi</h3>
<p hidden="until-found">
  Tarkibi: guruch, qo'y go'shti, sabzi, piyoz, zira, no'xat.
</p>

U hali Limited availability — brauzerlar holati o'sha darsda. Tanimaydigan brauzer uni oddiy hidden deb tushunadi va kontent yashirin qoladi. Shuning uchun uni faqat qo'shimcha, "bo'lsa yaxshi" ma'lumot uchun ishlating.

Tekshirib ko'ring: "Bron qilish qoidalari" paragrafi hidden bilan yashirilgan. Mehmon Ctrl + F bilan "bekor qilish" so'zini qidirdi. Topiladimi? hidden="until-found" bo'lsa-chi?

6. data-*: o'z ma'lumotingizni saqlash

6.1 Muammo

Menyudagi har bir taom kartasi haqida ekranda ko'rsatilmaydigan ma'lumot kerak bo'ladi:

• taomning bazadagi raqami — "savatga qo'shish" tugmasi uchun;
• achchiqlik darajasi — keyinroq CSS "achchiq" belgisini chizishi uchun;
• bugungi porsiya soni — JavaScript "tugadi" deb yozishi uchun.

Standartda bunday atributlar yo'q. O'zimiz o'ylab topsak — validator xato beradi (2-bo'limda ko'rdik). Yechim — maxsus ma'lumot atributlari (custom data attributes), qisqasi data-*.

6.2 Yozilishi

Nom data- bilan boshlanadi, keyin o'zingiz tanlagan so'z keladi:

<article class="taom-karta"
         data-taom-raqami="17"
         data-achchiq="2"
         data-porsiya="12">
  <h3>Lag'mon</h3>
  <p>28 000 so'm</p>
</article>

Qatorma-qator:

• data-taom-raqami="17" — bazadagi raqam. Mehmon uni ko'rmaydi.
• data-achchiq="2" — achchiqlik darajasi, 0 dan 3 gacha.
• data-porsiya="12" — bugun qolgan porsiyalar.

Brauzer bu atributlarga hech narsa qilmaydi — ular faqat siz uchun. Keyinroq ularni ikki joyda o'qiymiz:

• CSS atribut bo'yicha element tanlaydi: masalan, data-achchiq="3" bo'lgan kartaga qizil chegara (Atribut selektorlari).
• JavaScript dataset orqali o'qiydi va o'zgartiradi (Atributlar va dataset).

6.3 Nomlash qoidalari

• data- dan keyin kamida bitta belgi bo'lsin. Yolg'iz data- — xato.
• Faqat kichik lotin harflar, raqamlar va - ishlating: data-taom-raqami.
• Katta harf yozmang. Brauzer data-taomRaqami ni baribir data-taomraqami ga aylantiradi — keyinroq JavaScript'da chalkashlik chiqaradi.
• Qiymat doim satr sifatida saqlanadi. data-porsiya="12" — bu "12" degan matn.

Bo'sh joyni to'ldiring: taomning pishirish vaqti (daqiqa) uchun atribut nomi —

6.4 data-* qayerda ishlatilmaydi

• Sir uchun. data-* sahifa kodida ochiq turadi — Ctrl + U bilan hamma ko'radi. Parol, chegirma kaliti, boshqa mijoz ma'lumoti — bu yerda emas.
• Mehmonga kerakli ma'lumot uchun. Ekran o'quvchi data-* ni o'qimaydi. Narx ko'rinishi kerak bo'lsa — u matnda bo'lsin.
• Standart atribut bor joyda. Sana uchun data-sana emas — time datetime (Iqtibos, qisqartma, vaqt). Tugma bog'lash uchun data-oyna emas — commandfor.

Tekshirib ko'ring: Jasur aka har taom kartasiga data-tannarx="18000" qo'ydi — taomning choyxonaga tushadigan narxi. Bu nimasi bilan xavfli?

7. inert: ko'rinadi, lekin "muzlatilgan"

7.1 Muammo

Mehmon bron formasini yubordi. Server javob berguncha 2–3 soniya o'tadi. Shu vaqtda mehmon "Yuborish" tugmasini yana bosishi yoki maydonni o'zgartirishi mumkin. Forma ko'rinib turishi kerak — lekin unga tegib bo'lmasin.

Hayotdan o'xshatish: do'kon vitrinasidagi mahsulot. Uni oyna ortidan ko'rasiz, lekin qo'l tekkiza olmaysiz.

7.2 inert nima qiladi

inert ("harakatsiz") — mantiqiy atribut. U qo'yilgan element va uning butun ichki qismi:

• ko'rinib turaveradi;
• sichqoncha yoki barmoq bilan bosilmaydi;
• Tab bilan fokus olmaydi;
• matnini belgilab bo'lmaydi va Ctrl + F topmaydi;
• ekran o'quvchi uchun yo'qdek bo'ladi.

<form action="https://example.com/bron" method="post" inert>
  <label for="ism">Ismingiz</label>
  <input type="text" id="ism" name="ism">
  <button type="submit">Yuborish</button>
</form>
<p>Yuborilmoqda, biroz kuting…</p>

Bu holatda forma ko'rinadi, lekin hech bir maydoni ishlamaydi. Odatda inert ni JavaScript qo'yadi va olib tashlaydi — yuborish boshlanganda va tugaganda.

inert 2023-yildan barcha asosiy brauzerlarda ishlaydi.

Maslahat: dialog darsidagi showModal() sahifaning qolgan qismini o'zi inert qiladi. U yerda atributni qo'lda yozish shart emas.

7.3 Ehtiyot bo'ling

Mehmon inert qismni ko'radi, lekin unga tegolmaydi. Nega bosilmayotganini bilmasa, u sahifa "qotib qoldi" deb o'ylaydi. Shuning uchun inert qism ko'rinishidan ham faol emasligini bildirsin: masalan, xiraroq bo'lsin. Buni CSS bilan qilamiz. Yonida esa sababini yozing: "Yuborilmoqda…".

7.4 Uchta "o'chirgich"ni solishtiramiz

disabled faqat forma elementlarida ishlaydi. inert esa istalgan elementda va butun ichki qismga ta'sir qiladi.

Tekshirib ko'ring: Sahifada ikki bo'lim bor: "Menyu" va "Bron". "Bron" bo'limiga inert qo'ydik. Mehmon Tab bosib borsa, fokus "Bron" ichidagi tugmaga tushadimi?

8. Yana uchta atribut: qisqa tanishuv

8.1 contenteditable — sahifada tahrirlash

<p contenteditable>Bugungi maxsus taom: norin</p>

Brauzerda bu paragrafni bosing — kursor paydo bo'ladi va matnni o'zgartira olasiz. Lekin o'zgarish hech qayerga saqlanmaydi. Bu atributning qiymatlari va tuzoqlari — keyingi darsda.

8.2 style — shu elementning o'z CSS'i

<p style="color: green">Bugun chegirma: 10%</p>

style ichiga elementning ko'rinishi yoziladi. Ishlaydi, lekin real loyihada kam ishlatiladi:

• ko'rinish HTML ichiga aralashib ketadi;
• 50 ta kartaga bir xil style yozsangiz, o'zgartirish 50 marta kerak bo'ladi;
• ba'zi saytlarning xavfsizlik sozlamalari style atributini umuman bloklaydi.

Shuning uchun html-validate uni standart holatda xato deb belgilaydi: Inline style is not allowed. CSS'ni alohida faylda yozishni CSS nima darsidan boshlaymiz.

8.3 draggable — sudrab olish

Rasm va havolalarni sichqoncha bilan sudrab olish mumkin — brauzer buni odatda o'zi ruxsat beradi. Logotip sudralganda xira nusxasi paydo bo'lishi dizaynerga yoqmasa:

<img src="logo.png" alt="Choyxona «Bahor»" draggable="false">

draggable="true" esa istalgan elementni sudraladigan qiladi. Lekin uni qayerga "tashlash"ni JavaScript hal qiladi — shuning uchun hozircha bizga faqat false qiymati kerak.

9. Ko'p uchraydigan xatolar

9.1 Nusxa ko'chirilgan id

Taom kartasini nusxalab, 10 ta qilasiz — har birida id="taom" qolib ketadi. Validator: Duplicate ID “taom”. Takrorlanadigan narsa uchun class ishlating, id ni esa faqat noyob element uchun qoldiring.

9.2 hidden="false" yoki inert="false"

Mantiqiy atributda "false" ishlamaydi — atribut bor ekan, u ishlaydi. Ko'rsatish yoki "eritish" uchun atributni butunlay olib tashlang.

9.3 data-* nomida katta harf

<!-- ❌ -->
<div data-taomRaqami="17"></div>

html-validate ogohlantiradi: Attribute "data-taomRaqami" should be lowercase. Brauzer uni data-taomraqami deb saqlaydi. Tuzatish: data-taom-raqami — so'zlar orasida -.

9.4 Muhim ma'lumot faqat title da

Telefonda va klaviaturada u ko'rinmaydi. Muhim narsa — ko'rinadigan matnda.

9.5 Tushuntirishsiz inert

Forma ko'rinadi, lekin hech narsa bosilmaydi va sababi yozilmagan. Mehmon sahifani yopib ketadi. inert bilan birga doim holat xabari bo'lsin.

10. Mashqlar

1-mashq (oson): Qaysi atribut?

1. Paragraf hozircha umuman ko'rinmasin:
2. Forma ko'rinib tursin, lekin bosilmasin:
3. Kartaga taomning bazadagi raqamini yozish uchun atribut boshlanishi:
4. Ikki kartaga bir xil nom berish uchun id emas, ishlatiladi.

2-mashq (o'rta): Menyu kartalari

menyu.html uchun ikkita taom kartasini yozing: "Toshkent oshi" (35 000 so'm) va "Lag'mon" (28 000 so'm). Talablar:

• Har karta — article, klassi taom-karta.
• Har kartada data-taom-raqami va data-achchiq bor (osh — 0, lag'mon — 2).
• Har kartada tarkib paragrafi hidden="until-found" bilan yashirilgan.
• Lag'mon kartasiga yana yangi klassi qo'shilgan.

<article class="taom-karta" data-taom-raqami="1"
         data-achchiq="0">
  <h3>Toshkent oshi</h3>
  <p>35 000 so'm</p>
  <p hidden="until-found">
    Tarkibi: guruch, qo'y go'shti, sabzi, zira.
  </p>
</article>

<article class="taom-karta yangi" data-taom-raqami="2"
         data-achchiq="2">
  <h3>Lag'mon</h3>
  <p>28 000 so'm</p>
  <p hidden="until-found">
    Tarkibi: cho'zma xamir, mol go'shti, bulg'or qalampiri.
  </p>
</article>

3-mashq (qiyin): Beshta xatoni toping

Bu parchada beshta xato bor. Toping, sababini ayting va tuzating:

<!-- ❌ beshta xato bor -->
<section id="bron bolimi" inert="false">
  <h2 title="Stol band qilish uchun telefon: +998 90 000 00 00">
    Bron
  </h2>
  <div class="taom" narx="35000" data-Porsiya="12">Osh</div>
  <div class="taom" id="osh">Osh (katta)</div>
  <p id="osh">Oshimiz — eng mazalisi!</p>
</section>

<section id="bron-bolimi">
  <h2>Bron</h2>
  <p>Stol band qilish uchun telefon: +998 90 000 00 00</p>
  <div class="taom" data-narx="35000" data-porsiya="12">
    Osh
  </div>
  <div class="taom" id="osh-katta">Osh (katta)</div>
  <p id="osh-maqtov">Oshimiz — eng mazalisi!</p>
</section>

11. Real ishda

• data-* hamma joyda. Analitika vositalari tugma bosilishini data-track="bron-tugmasi" kabi atributlar bilan sanaydi. Avtomatik testlar (keyingi qismlarda o'rganamiz) elementni ko'pincha data-testid orqali topadi. Mashhur komponent kutubxonalari ham oyna ochiq yoki yopiqligini data-state="open" kabi atributlarda saqlaydi.
• inert modal va "slayder"larda. Karuselning ko'rinmay turgan slaydlari, yon menyu yopiq paytda — inert. Bu klaviatura foydalanuvchisi "ko'rinmas" tugmalarga tushib qolmasligi uchun.
• Takroriy id — klassik bug. Komponentni sahifada ikki marta ishlatganda id takrorlanadi va label yoki popovertarget "sirli" ravishda ishlamay qoladi. Tajribali dasturchi birinchi navbatda validatorga qaraydi.
• Intervyuda so'raladi: "id va class farqi?", "data-* nima uchun kerak?", "hidden, display: none va visibility: hidden farqi?". Oxirgisining CSS qismini display va yashirish darsida to'liq ko'ramiz.

Xulosa

• Global atribut istalgan elementda ishlaydi; o'ylab topilgan atribut esa xato — o'rniga data-*.
• id — noyob, bo'sh joysiz, katta-kichik harfni farqlaydi; takrorlansa, label, havola va popovertarget buziladi.
• class ko'rinishga emas, ma'noga qarab nomlanadi va bir nechta bo'lishi mumkin.
• title — faqat qo'shimcha; telefonda va klaviaturada u ko'rinmaydi.
• hidden — butunlay yashiradi; hidden="until-found" — Ctrl + F topsa ochiladi; hidden="false" ham yashiradi.
• inert — ko'rinadi, lekin bosilmaydi va fokus olmaydi; yonida sababini yozing.

Keyingi dars: Fokus va tahrir atributlari — tabindex, autofocus, accesskey va contenteditable bilan qaysi element fokus olishi va tahrirlanishini boshqaramiz.

Manbalar

• MDN: "Global attributes", "hidden", "inert", "data-*", "title" — developer.mozilla.org
• WHATWG HTML: "Global attributes", "The hidden attribute", "Inert subtrees" — html.spec.whatwg.org
• Chrome for Developers: "Making collapsed content accessible with hidden=until-found" — developer.chrome.com
• W3C Nu HTML Checker — validator.w3.org/nu