У чым розніца паміж DIV і SECTION?

Разуменне HTML5-элемент

Калі HTML5 Burts на сцэну некалькі гадоў таму, ён дадаў кучу новых секционирования элементаў да LANGAUGE, у тым ліку элемента SECTION. Большасць новых элементаў, якія знаёмяць HTML5 маюць выразныя прымянення. Напрыклад, элемент выкарыстоўваецца для вызначэння артыкулаў і асноўныя часткі вэб-старонкі, элемент выкарыстоўваецца для вызначэння звязаных з утрыманнем, якое не мае вырашальнага значэння для астатняй частцы старонкі і загаловак, нав і зноска даволі відавочныя. Зноў даданыя элемент РАЗДЗЕЛ, аднак, з'яўляецца трохі менш ясная.

Многія людзі лічаць , што HTML - элементы SECTION і сапраўды толькі адно і тое ж ўніфікаваная кантэйнер элементы , якія выкарыстоўваюцца для ўтрымання кантэнту на вэб - старонцы. У рэчаіснасці, аднак, заключаецца ў тым, што гэтыя два элемента, у той час як будучы элементы кантэйнера, зусім ня радавой. Ёсць канкрэтныя прычыны для выкарыстання як элемент SECTION і элемент DIV - і гэтая артыкул будзе растлумачыць гэтыя адрозненні.

Раздзелы і Divs

Элемент секцый вызначаюцца як семантычныя частцы вэб-старонкі або сайта, які не з'яўляецца іншым, больш канкрэтным тыпам (напрыклад, артыкулы або ў баку). Я аддаю перавагу выкарыстоўваць гэты элемент, калі я Разметку выразнай частцы старонкі - падзел, які можа быць перамешчаны аптовым і выкарыстоўвацца на іншых старонках ці частку сайта. Гэта асобны кавалак кантэнту, або «падзел» ўтрымання, калі вы будзеце.

У адрозненне ад гэтага , вы карыстаецеся элемент DIV для частак старонкі , якія вы хочаце падзяліць, але і для іншых мэтаў , ня семантыкі . Я б абгарнуць вобласць змесціва ў дывізіёне, калі я раблю так проста, каб даць сабе «крук», каб выкарыстоўваць з дапамогай CSS. Гэта не можа быць асобнай часткай кантэнту на аснове семантыкі, але нешта я дыктаваў для дасягнення макета я хачу для маёй старонкі.

Гэта & # 39; ўсё аб семантыцы

Гэта цяжка для разумення канцэпцыя, але толькі розніца паміж элементам DIV і элементам SECTION з'яўляецца семантыка. Іншымі словамі, гэта значэнне секцыі кода вы дзелячы.

Любы кантэнт, які ўтрымліваецца ўнутры DIV элемента не мае ніякага ўнутранага сэнсу. Лепш за ўсё выкарыстоўваць для такіх рэчаў, як:

Элемент DIV выкарыстоўваецца як адзіны элемент, які быў для дадання гакаў да стылю нашых дакументаў і ствараць слупкі і фантазію макеты. З-за гэтага, мы скончылі з HTML, які быў працятая DIV элементы-то, што можа вэб-дызайнеры называюць «divitis.» Былі нават 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 і Раздзел Элементы

Калі вы іх выкарыстоўваеце, Вы можаце выкарыстоўваць абодва DIV і секцыйныя элементы разам ў сапраўдным дакуменце HTML5. Як вы ўжо бачылі тут, у гэтым артыкуле, можна выкарыстоўваць элемент SECTION, каб вызначыць семантычна асобныя часткі ўтрымання, і вы выкарыстоўваеце элемент DIV як гаплікі для CSS і JavaScript, а таксама вызначае фармат, які не мае семантычнае значэнне.

Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 3/15/17