Когато HTML5 се сгуши на сцената преди няколко години, тя добави куп нови елементи за разрязване на езика, включителноРАЗДЕЛ елемент. Повечето от новите елементи, които HTML5 въвеждат, имат ясна употреба. Например, елементът се използва за дефиниране на статии и основни части на уеб страница, елементът се използва за дефиниране на свързано съдържание, което не е от съществено значение за останалата част от страницата, а заглавието, навигацията и долната колона са доста очевидни. Ново добавениРАЗДЕЛ елемент, обаче, е малко по-малко ясно.
Много хора смятат, че HTML елементите РАЗДЕЛ и всъщност са едни и същи неща - генерични контейнерни елементи, използвани за съдържание на уеб страница. Реалността обаче е, че тези два елемента, докато и двете са контейнерни елементи, са нещо друго, но не са общи. Има конкретни причини да използвате и двете РАЗДЕЛ елемент и DIV елемент - и тази статия ще обясни тези разлики.
Раздели и раздели
Най- РАЗДЕЛ елемент се дефинира като семантичен раздел на уеб страница или сайт, който не е друг по-специфичен тип (като например статии или страници). Склонен съм да използвам този елемент, когато маркирам отделен раздел на страницата - секция, която може да се премести на едро и да се използва на други страници или части от сайта. Това е отделно съдържание или "секция" на съдържанието, ако желаете.
За разлика от това, използвате DIV елемент за части от страницата, които искате да разделите, но за цели, различни от семантиката. Бих обгръщал област от съдържание в отделение, ако правя така, за да си направя "кука", която да използвам с CSS. Тя може да не е отделна част от съдържанието, основаващо се на семантиката, но е нещо, което диктувам, за да постигна оформлението, което искам за моята страница.
Това е всичко за семантиката
Това е трудно да се разбере, но единствената разлика между DIV елемент и РАЗДЕЛ елемент е семантика. С други думи, това е значение на раздела от кода, който разделяте.
Всяко съдържание, което се съдържа в a 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 тагове. Семантиката ще ви помогне и екипът ви да управлява страницата в бъдеще (защото вие ще знаете, че този раздел е статията, ако е заобиколен от ЧЛЕН елемент). Освен това браузърите, които разпознават тези маркери, ще ги подкрепят по-добре.
Все още можете да използвате HTML5 семантични елементи за разрязване с Internet Explorer, просто трябва да добавите скриптове и евентуално няколко обкръжения DIV елементи, за да ги разпознаят като HTML.
Използване на елементите DIV и SECTION
Ако ги използвате правилно, можете да ги използвате и двете DIV и РАЗДЕЛ елементи заедно в валиден документ HTML5. Както сте видели тук в тази статия, вие използвате РАЗДЕЛ елемент за дефиниране на семантично отделни части от съдържанието и използвате DIV елемент като куки за CSS и JavaScript, както и дефиниране на оформление, което няма семантично значение.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 15.3.17
