DIV va BOShQA o'rtasidagi farq nima?

HTML5 bo'lim elementini tushunish

HTML5 sahnaga bir necha yil burun yiqilganida, LENGAUGE ga yangi qismli elementlarni, jumladan, BO'LIM elementini qo'shdi. HTML5 tomonidan taqdim etiladigan yangi elementlarning aksariyati aniq maqsadlarga ega. Misol uchun, element veb-sahifaning maqolalarini va asosiy qismlarini aniqlash uchun ishlatiladi, element boshqa sahifaning muhimligi uchun ahamiyatli bo'lmagan tegishli tarkibni aniqlash uchun ishlatiladi va sarlavha, nav va pastki shakli o'z-o'zidan tushunarli. Biroq, yangi qo'shilgan qism elementi biroz kamroq bo'ladi.

Ko'pgina odamlar HTML elementlari BIRINChI va aslida bir xil narsa - umumiy kontentning elementlari veb-sahifadagi tarkibni ishlatish uchun ishlatilganiga ishonishadi. Haqiqat shuki, bu ikkala element ham konteyner elementlari bo'lgan bo'lsa ham, ular umumiydir. Ham BO'LISh elementini, ham DIV elementini ishlatish uchun o'ziga xos sabablar mavjud va bu maqola ushbu farqlarni tushuntiradi.

Bo'limlar va Divlar

BO'LIM elementi veb-sahifaning yoki boshqa o'ziga xos turdagi (masalan, maqola yoki chet el) semantik qism sifatida aniqlanadi. Ushbu elementni sahifaning aniq qismini belgilaganimda ishlatmoqchiman - ulgurji ko'chiradigan va saytning boshqa sahifalarida yoki qismlarida ishlatiladigan bo'lim. Agar xohlasangiz, mazmunli tarkibiy qism yoki tarkibning "bo'limi".

Buning aksincha, siz sahifani ajratish kerakli qismlar uchun DIV elementidan foydalanasiz, ammo semantikdan boshqa maqsadlar uchun. CSS bilan ishlatish uchun o'zimga "kanca" berish uchun faqat shunday qilsam bo'ladigan qismni tark etishim kerak. Bu semantikaga asoslangan kontentning aniq bir bo'lagi bo'lmasligi mumkin, lekin mening sahifa uchun kerakli tartibga erishish uchun men aytib turadigan narsadir.

Semantika haqida hamma narsa

Bu tushunish qiyin tushunchadir, lekin DIV elementi bilan BO'LIM elementi o'rtasidagi farq faqat semantikdir. Boshqacha qilib aytganda, bu sizning kodingiz qismini ajratadi.

DIV elementi ichida joylashgan har qanday kontent o'ziga xos ma'noga ega emas. Eng yaxshi narsalar uchun ishlatiladi:

DIV elementi hujjatlarni tarjima qilish va ustunlar va chiroyli tartiblarni yaratish uchun kancalarni qo'shish uchun kerak bo'lgan yagona element bo'lgan. Shuning uchun biz DIV elementlari bilan ishlaydigan HTML bilan yakun topdik. Veb-dizaynerlar "divit" deb atalishi mumkin. Hatto DIV elementini ishlatgan WYSIWYG muharrirlari ham bor edi. Aslida men paragraflar o'rniga DIV elementini ishlatadigan HTML bo'ylab harakat qilaman!

HTML5 bilan biz semantik jihatdan tavsiflovchi hujjatlarni (navigatsiya va identifikatsiyalashgan raqamlar va hk) ishlatish uchun bo'lim elementlarini ishlatishimiz va shu elementlardagi uslublarni aniqlashimiz mumkin.

SPAN elementi haqida nima deyish mumkin?

Ko'pgina odamlar DIV elementi haqida o'ylashganda o'ylaydigan boshqa element elementdir. Bu element DIV kabi semantik element emas. Inline satr bloklari atrofida uslublar va skriptlar uchun kanca qo'shish uchun foydalanishingiz mumkin bo'lgan inline element (odatda matn). Bu ma'noda u DIV elementiga o'xshaydi, faqat blok elementi emas, balki inline. Ba'zi sabablarga ko'ra, DIVni blok darajadagi SPAN elementi deb o'ylash va uni faqat HTML-kontent bloklari uchun SPAN kabi ishlatish osonroq bo'lishi mumkin.

HTML5-da o'xshash satr ichidagi bo'lim elementi yo'q.

Internet Explorer ning eski versiyalari uchun

HTML5-ni ishonchli tarzda tanimaydigan IE (IE 8 va pastki kabi) kabi eski versiyalarini qo'llab-quvvatlasa ham, semantik tarzda to'g'ri HTML teglardan foydalanishdan qo'rqmaslik kerak. Semantika siz va sizning guruhingiz kelajakda sahifani boshqarishda sizga yordam beradi (chunki u sizning bo'limingiz ARTICLE elementi bilan o'ralgan bo'lsa, maqola ekanligini bilib olasiz). Bundan tashqari, ushbu teglarni taniydigan brauzerlar ularni yaxshiroq qo'llab-quvvatlaydi.

Siz hali HTML5 semantik bo'lim elementlarini Internet Explorer bilan ishlatishingiz mumkin, faqat ularni HTML sifatida tanib olish uchun skriptlarni va ehtimol bir necha atrofdagi DIV elementlarini kiritishingiz kerak.

DIV va BOB elementlarini ishlatish

Agar ularni to'g'ri ishlatsangiz, siz DIV va BIR qismlarini birgalikda ishlatib, tegishli HTML5 hujjatidan foydalanishingiz mumkin. Ushbu maqolada siz ko'rib turganingizdek, kontentning semantik jihatdan ajratilgan qismlarini aniqlash uchun siz BIZNES elementidan foydalanasiz va siz DIV elementini CSS va JavaScript uchun kooklar sifatida ishlatasiz, shuningdek semantik ma'noga ega bo'lmagan tartibni belgilaydi.

Jennifer Kryninning original maqolasi. Jerui Girard 3/15/17 yil tahrirlangan