Разбирање на елементот за секција HTML5
Кога HTML5 влегува на сцената пред неколку години, тој додаде еден куп нови елементи за секционирање на langauge, вклучувајќи го и елементот SECTION. Повеќето од новите елементи кои ги воведуваат HTML5 имаат јасни намени. На пример, елементот се користи за дефинирање на статии и главни делови на веб-страница, елементот се користи за дефинирање на сродна содржина што не е критична за остатокот на страницата, а заглавјето, nav и footer се прилично очигледни. Но, додадениот елемент на SECTION, сепак, е малку помалку јасен.
Многу луѓе веруваат дека HTML елементи СЕКЦИЈА и навистина се исти исти елементи-елементи за контејнери што се користат за содржина на содржина на веб-страница. Реалноста, сепак, е дека овие два елементи, додека и двете се контејнерски елементи, се ништо друго освен генерички. Постојат специфични причини да се користи и елементот SECTION и елементот DIV - и овој член ќе ги објасни овие разлики.
Секции и разновидност
ЕЛЕКТРОНСКИОТ елемент е дефиниран како семантички дел на веб-страница или сайт кој не е уште поспецифичен тип (како напис или настрана). Имам тенденција да го користам овој елемент кога означувам посебен дел од страницата - дел што може да се премести и да се користи на други страници или делови од страницата. Тоа е посебно парче содржина, или "дел" на содржината, ако сакате.
Спротивно на тоа, го користите елементот 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 и СЕКЦИЈА елементи
Ако ги користите правилно, можете да ги користите и елементите DIV и SECTION заедно во валиден HTML5 документ. Како што сте виделе овде во овој напис, го користите елементот SECTION за дефинирање на семантички дискретни делови од содржината и го користите елементот DIV како куки за CSS и JavaScript, како и дефинирање на распоред кој нема семантичко значење.
Авторски напис од Џенифер Крајнин. Ревидирано од Џереми Жирар на 15.03.17