HTML5 бөлімінің элементін түсіну
HTML5 сахнаға бірнеше жыл бұрын қосылса, ол LENGAOUGE үшін жаңа бөлім элементтерін қосқан, соның ішінде SECTION элементі. HTML5 енгізетін жаңа элементтердің көбісі нақты қолдануға ие. Мысалы, элемент веб-беттің баптарын және негізгі бөліктерін анықтау үшін пайдаланылады, элемент беттің қалған бөлігі үшін маңызды емес қатысты тақырыпты анықтау үшін пайдаланылады және тақырып, nav және төменгі деректеме өте түсінікті. Дегенмен, жақында қосылған SECTION элементі сәл анық емес.
Көптеген адамдар HTML элементтері SECTION және шын мәнінде бірдей нәрсе деп ойлайды - веб-беттегі мазмұнды қамту үшін қолданылатын жалпы контейнер элементтері. Дегенмен, шындық, бұл екі элемент контейнер элементтері болып табылады, бірақ жалпы болып табылады. SECTION элементін де, DIV элементін де пайдаланудың нақты себептері бар - бұл мақалада бұл айырмашылықтар түсіндіріледі.
Бөлімдер және Divs
SECTION элементі веб-беттің немесе сайттың семантикалық секциясы ретінде анықталады, ол басқа ерекше түрге жатпайды (мысалы, мақалада немесе сыртында). Мен осы элементті беттің нақты бөлігін белгілеген кезде қолданамын, яғни көшіруді көшіруге және басқа беттерге немесе тораптың бөліктеріне қолдануға болатын бөлім. Бұл мазмұнның мазмұнды бөлігі немесе мазмұнның «бөлімі».
Керісінше, сіз Бөлінгісі келетін парақтың бөліктері үшін, бірақ семантиканың басқа мақсаттары үшін DIV элементін пайдаланасыз. Мен CSS-мен пайдалану үшін өзіме «ілгекті» беру үшін тек қана жасайтын болсам, бөлімдегі мазмұнды орамал едім. Бұл семантикаға негізделген мазмұнның нақты бөлімі болмауы мүмкін, бірақ менің бетімді қалайтын орналасуға жету үшін мен диктациялайтын нәрсе болып табылады.
Барлық семантика туралы
Бұл түсіну қиын тұжырымдама, бірақ DIV элементі мен SECTION элементі арасындағы жалғыз айырмашылық семантика болып табылады. Басқаша айтқанда, бөліп жатқан код бөлімі мағынасы .
DIV элементінің ішіндегі кез-келген мазмұн тән мағынасы жоқ. Ол келесідей нәрселер үшін жақсы қолданылады:
- CSS стильдері және CSS стильдері үшін ілгектер
- Орналастыру контейнерлері
- JavaScript ілмектер
- HTML-нің бөлімдері оқуды жеңілдетеді
DIV элементі біздің құжаттарымызды стильдеу және бағандар мен қиял-ғажайып макеттер жасау үшін ілгекті қосатын жалғыз элемент болған. Осыған байланысты, біз DIV элементтерімен жұмсалған HTML-мен аяқтадық - веб-дизайнерлер «divit» деп атайды. Дайындаушы элементтерін ғана қолданған WYSIWYG редакторлары да болды. Мен шын мәнінде параграфтардың орнына DIV элементін қолданатын HTML арқылы іске қосылдым!
HTML5 көмегімен семантикалық сипаттама құжаттарды жасау үшін (навигация үшін, сипаттамалы фигуралар және т.б. үшін) бөлім жасау элементтерін қолдануға және сол элементтердегі мәнерлерді анықтай аламыз.
SPAN элементі туралы не айтасыз?
Көптеген адамдар DIV элементін ойлаған кезде ойлайтын басқа элемент элемент. Бұл элемент, мысалы DIV, семантикалық элемент емес. Бұл кірістірілген элемент, ол сіз кірістірілген мазмұн блоктарының (әдетте мәтін) айналасындағы стильдер мен сценарийлер үшін ілгектерді қосу үшін пайдалануға болады. Бұл мағынада ол DIV элементіне ұқсас, блоктық элементтен гөрі кірістірілген. Кейбір тәсілдермен DIV-ді блок-деңгейлі SPAN элементі ретінде қарастырып, оны SPAN-ны тек HTML-тегжейлі блоктар үшін ғана қолдануға болады.
HTML5 ішіндегі салыстырмалы кірістірілген бөліктік элементі жоқ.
Internet Explorer шолғышының ескі нұсқалары үшін
HTML5-ні сенімді тани алмайтын IE-дың егжей-тегжейлі нұсқаларын (IE 8 және төменгі сияқты) қолдаған жағдайда да, семантикалық түрде дұрыс HTML тегтерін пайдаланудан қорықпаңыз. Семантикасы сізге және сіздің командаңызға болашақта бетті басқаруға көмектеседі (себебі бұл бөлімде ARTICLE элементі қоршалған болса, мақаласы бар екенін білетін боласыз). Сонымен қатар, бұл тегтерді танитын браузерлер оларды жақсартады.
HTML5 семантикалық секция элементтерін Internet Explorer көмегімен пайдалана аласыз, сондықтан тегтерді HTML ретінде тану үшін сценарийді және, мүмкін, бірнеше қоршаған DIV элементтерін қосу керек.
DIV және БӨЛІМ элементтерін пайдалану
Егер оларды дұрыс пайдалансаңыз, DIV және SECTION элементтерін екеуін де жарамды HTML5 құжатында бірге пайдалануға болады. Осы мақалада көргеніңіздей, сіз мазмұнның семантикалық түрде бөліктік бөліктерін анықтау үшін SECTION элементін пайдаланасыз және сіз DIV элементін CSS және JavaScript үшін ілгектер ретінде пайдаланасыз, сондай-ақ семантикалық мағынасы жоқ орналасуды анықтайсыз.
Дженнифер Крининнің түпнұсқа мақаласы. Джереми Джирард 3/15/17 жылы редакцияланған