HTML5 БҮЛЭГ элементийг ойлгох
HTML5 дүрсийг олон жилийн өмнө буулгаж эхлэхэд SECTION элементийг оролцуулаад шинэ хэсэг элементүүдийг нэмж оруулав. HTML5 нэвтрүүлэх ихэнх элементүүд нь тодорхой хэрэглээтэй байдаг. Жишээ нь, элемент нь вэб хуудасны нийтлэл, гол хэсгүүдийг тодорхойлоход хэрэглэгддэг бөгөөд элемент нь хуудасны үлдсэн хэсэгт чухал бус агуулгатай холбоотой элементийг тодорхойлоход хэрэглэгддэг бөгөөд header, nav, footer нь маш тодорхой тайлбарласан байдаг. Гэхдээ шинээр нэмэгдсэн БҮЛЭГ элемент нь бага зэрэг тодорхой байна.
Олон хүмүүс HTML элементүүд гэдэгт итгэдэг бөгөөд энэ нь яг л адилхан зүйлийг агуулдаг контейнерууд юм. Гэхдээ бодит байдал дээр эдгээр хоёр элемент нь хоёулаа контейнерийн элемент байхаас гадна ердийн зүйл биш юм. ДҮГЭЭР элемент болон DIV элементийг хоёуланг нь ашиглах тодорхой шалтгаанууд байдаг бөгөөд энэ өгүүллийг эдгээр ялгаануудыг тайлбарлах болно.
Бүлгүүд болон хэсгүүд
SECTION элемент нь веб хуудас буюу вэбсайтын симуляци хэлбэрээр тодорхойлогддог бөгөөд энэ нь өөр нэг тодорхой бус зүйл (нийтлэл эсвэл бусад зүйл). Би энэ элементийг хуудасны ялгаатай хэсэгт тэмдэглэж байх үед энэ элементийг ашиглах хандлагатай - хэсэгчилсэн хуудсаа сольж, сайтын бусад хуудсууд эсвэл хэсгүүдэд ашигладаг хэсэг. Энэ бол агуулгын хэсэг юмуу агуулгын "хэсэг" юм.
Үүний эсрэгээр, та хуваахыг хүсч байгаа хуудсын хэсгүүдэд DIV элементийг ашигладаг, гэхдээ семантикаас өөр зорилгод ашигладаг. Би өөртөө зориулж "hook" -ыг CSS хэлбэрээр ашиглахын тулд би агуулгын талбарыг боож өгнө. Энэ нь семантик дээр суурилсан контентоос ялгаатай хэсэг биш байж магадгүй боловч миний хуудасны хүсэж буй хэв маягт хүрэхийн тулд миний бичсэн зүйл юм.
Энэ нь бүх талаархи семантикс юм
Энэ нь ойлгоход хэцүү үзэл баримтлал боловч DIV элемент ба СЕМС элемент хоёрын ялгаа нь семантикс юм. Өөрөөр хэлбэл, энэ нь таны хуваах кодын хэсгийн утга юм.
DIV элемент дотор агуулагдсан контент ямар ч утгагүй утгатай. Энэ нь дараах зүйлсэд хамгийн сайн хэрэглэгддэг:
- CSS стиль болон дэгээгээр CSS загвартай
- Нүхний сав
- JavaScript хуукууд
- HTML-ийн хэсгүүдийг уншихад хялбар болгох
DIV элемент нь бидний докторын хэв маягийг өөрчлөх, багана, сонирхолтой зураглал хийхэд зориулж хуукийг нэмж оруулсан. Үүний улмаас бид DIV-ийн элементүүдээр дүүрэн HTML-тэй байсан. Вэб дизайнерууд нь "divitis" гэж нэрлэгддэг байж болох юм. Мөн DIY элементийг зөвхөн WYSIWYG редакторууд ашиглаж байсан. Би догол мөрний оронд DIV элементийг ашигладаг HTML даяар гүйж байна!
HTML5-ээр бид бутархай элементүүдийг ашиглахын тулд илүү нарийвчлан тайлбарласан баримт бичгүүдийг үүсгэх боломжтой (навигацийн болон тайлбарласан зургуудыг ашиглах гэх мэт) мөн тэдгээр элементүүдийн хэв маягийг тодорхойлох болно.
SPAN-ийн элементийн талаар юу хэлэх вэ?
Ихэнх хүмүүс DIV элемент гэж бодох үед элемент гэж үздэг бусад элемент. Дээрх элемент нь элемент биш юм. Энэ нь агуулга доторх мөр , скриптийг (ихэвчлэн текст) тойрсон блокуудын орчимд холбоход ашиглаж болох доторлогооны элемент юм. Энэ утгаараа энэ нь DIV элементтэй яг адил, зөвхөн блок элементээсээ илүү байх болно. Зарим аргаар DIV-ийн блок түвшний SPAN элементийг бодоход илүү хялбар байж болох бөгөөд зөвхөн SPAN-ийн зөвхөн HTML агуулгад зориулж ашиглах болно.
HTML5-ийн харьцуулах хэсэгчилсэн элемент байхгүй байна.
Internet Explorer-ийн хуучин хувилбаруудын хувьд
Хэдийгээр IE-ийн хуучин хувилбарууд (IE 8 ба түүнээс бага шиг) HTML5-г таних боломжгүй байгаа бол HTML-ийн зөв хаягуудыг ашиглахаас айдаггүй. Семантикс нь таныг болон таны багийн ирээдүйд хуудсыг удирдахад тусална (та ARTICLE элементээр хүрээлэгдсэн бол энэ хэсэг нь өгүүлэл гэдгийг мэдэх болно). Дээр нь, эдгээр хаягуудыг хүлээн зөвшөөрдөг хөтөчүүд нь тэдгээрийг илүү сайн дэмждэг.
Та интернет хөтөчтэй HTML5 семантик элементүүдийг ашиглах боломжтой бол та скрипт, магадгүй HTML хэлбэрээр танихын тулд хэд хэдэн тойрсон DIV элемент нэмэх хэрэгтэй.
DIV ба БҮЛЭГ элементүүдийг ашиглах
Хэрэв та зөв ашиглаж байгаа бол DIV ба SECTION элементүүдийг хоёуланг нь HTML5 баримт дээр хамт ашиглаж болно. Энэ өгүүллийг энд үзсэнчлэн та SECTION элементийг контентыг хэсэгчлэн салгахын тулд ашиглаж байгаа бөгөөд CSS болон JavaScript-ийн DIV элементийг хэрэглэж, түүнчлэн семантик утгыг агуулаагүй загварыг тодорхойлж өгдөг.
Женнифер Кэрнин эх нийтлэл. 3/21/17 дээр Жереми Герард засварлав