Разбиране на елемента HTML5 SECTION
Когато HTML5 попадне на сцената преди няколко години, тя добави куп нови елементи за пречупване към езика, включително елемента SECTION. Повечето от новите елементи, които HTML5 въвеждат, имат ясна употреба. Например, елементът се използва за дефиниране на статии и основни части на уеб страница, елементът се използва за дефиниране на свързано съдържание, което не е от съществено значение за останалата част от страницата, а заглавието, навигацията и долната колона са доста очевидни. Новият елемент SECTION обаче е малко по-малко ясен.
Много хора вярват, че HTML елементите SECTION и са наистина само едно и също нещо - генерични контейнерни елементи, използвани за съдържанието на дадена уеб страница. Реалността обаче е, че тези два елемента, докато и двете са контейнерни елементи, са нещо друго, но не са общи. Има конкретни причини да използвате елемента SECTION и елемента DIV - и тази статия ще обясни тези разлики.
Раздели и раздели
Елементът SECTION е дефиниран като семантичен раздел на уеб страница или сайт, който не е друг по-специфичен тип (като например член или настрана). Склонен съм да използвам този елемент, когато маркирам отделен раздел на страницата - секция, която може да се премести на едро и да се използва на други страници или части от сайта. Това е отделно съдържание или "секция" на съдържанието, ако желаете.
За разлика от това, използвате елемента DIV за части от страницата, които искате да разделите, но за цели, различни от семантиката . Бих обгръщал област от съдържание в отделение, ако правя така, за да си направя "кука", която да използвам с CSS. Тя може да не е отделна част от съдържанието, основаващо се на семантиката, но е нещо, което диктувам, за да постигна оформлението, което искам за моята страница.
Това е всичко за семантиката
Това е трудно да се разбере, но единствената разлика между елемента DIV и елемента SECTION е семантиката. С други думи, това е значението на частта от кода, която разделяте.
Всяко съдържание, съдържащо се в елемента DIV, няма никакво присъщо значение. Най-добре се използва за неща като:
- CSS стилове и куки за CSS стилове
- Контейнери за оформление
- JavaScript куки
- Раздели за HTML, за да се улесни четенето
Елементът DIV е бил единственият елемент, който имахме за добавяне на куки за оформяне на нашите документи и създаване на колони и луксозни оформления. Поради това, ние завършихме с HTML, който беше пълен с DIV елементи - какво може да наричат уеб дизайнерите "дивитит". Имаше дори редактори WYSIWYG, които използваха елемента DIV изключително. Всъщност използвам HTML, който използва елемента DIV вместо за параграфи!
С HTML5 можем да започнем да използваме елементи за разделяне, за да създадем по-семантично описателни документи (използвайки за навигация и за описателни числа и т.н.), както и да дефинираме стиловете на тези елементи.
Какво за елемента SPAN?
Другият елемент, за който повечето хора мислят, когато мислят за елемента DIV, е елементът. Този елемент, подобно на DIV, не е семантичен елемент. Това е инлайн елемент, който можете да използвате за добавяне на куки за стилове и скриптове около вградени блокове със съдържание (обикновено текст). В този смисъл е точно като елемента DIV, а само вместо по-скоро като елемент от блока . В някои отношения може би е по-лесно да мислите за DIV като елемент SPAN на ниво блок и да го използвате по същия начин, по който бихте използвали SPAN само за цели блокове от HTML съдържание.
В HTML5 няма подобен вграден елемент за разделяне.
За стари версии на Internet Explorer
Дори ако подкрепяте драматично по-стари версии на IE (като IE 8 и по-ниски), които не разпознават надеждно HTML5, не трябва да се страхувате да използвате семантично правилни HTML тагове. Семантиката ще ви помогне и екипът ви да управлява страницата в бъдеще (защото ще знаете, че този раздел е статията, ако е заобиколен от елемента ARTICLE). Освен това браузърите, които разпознават тези маркери, ще ги подкрепят по-добре.
Все още можете да използвате HTML5 семантични елементи за разрязване с Internet Explorer, просто трябва да добавите скриптове и евентуално няколко DIV елемента, за да ги разпознаете като HTML.
Използване на елементите DIV и SECTION
Ако ги използвате правилно, можете да използвате двата елемента DIV и SECTION заедно в валиден документ HTML5. Както сте видели тук в тази статия, вие използвате елемента SECTION, за да дефинирате семантично отделни части от съдържанието и използвате елемента DIV като куки за CSS и JavaScript, както и за дефиниране на оформление, което няма семантично значение.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 15.3.17