Предност ХТМЛ5 вс КСХТМЛХтмл5 нуди веома важну предност у односу на традиционални кхтмл, а то је да има ознаке за дефинисање семантичке структуре.
Тај хтмл код називамо семантичким хтмл -ом где структура има смисла за претраживаче и стога служи за СЕО позиционирање. Ради се о томе да сваки претраживач може да разуме шта је сваки део веб странице, чак и уклањајући сав садржај.
КСХТМЛ нема ознаке које дозвољавају дефинисање група или блокова елемената са семантичким смислом.
ХТМЛ5 решава овај проблем нудећи елементе и ознаке који нам омогућавају да дефинишемо семантику веб странице, неки од њих су хеадеР, фоотер, нав, хгроуп, сецтион и артицле, између осталих.
Затим ћемо дефинисати најважније у семантичком смислу:
- заглавље: Дефинишите блок заглавља веб странице и приложите садржај заглавља.
- нав: дефинише блок који представља мени, па претраживачи када пронађу ову ознаку знају да је то навигациона структура.
- хгроуп: дефинисати и груписати наслове и на тај начин сваком наслову дати другачији значај.
- одељак и чланак: Претходни елементи који дефинишу див> слојеве и замењени су ознакама одељка и чланка, које имају више семантичког смисла при дефинисању одељака и чланака у одељцима.
- на страну: дефинише и групише тангенцијалне елементе веб странице. То јест, садржај који није главни, као што су бочне колоне или бочна трака на вебу
- подножје: дефинише и групише елементе у подножју веб странице.
Употреба ХТМЛ5 не значи да се КСХТМЛ више не користи, они су и даље веома добри у организовању структуре и груписању елемената веб странице или позивању на Јкуери, имајте на уму да ХТМЛ5 служи да му да семантички смисао, али унутар блока можете наставити да бисте користили било коју другу КСХТМЛ ознаку. Погледајмо пример испод
Поднаслов
веб лого
Можемо видети да је са слојевима дефинисана структура, а унутар заглавља заглавља и х групе да су груписани наслови, као и слој који садржи логотип.
Тако нам КСХТМЛ слојеви омогућавају да дефинишемо структуру веб странице како бисмо имали бољу организацију за програмера, а затим нам КСХТМЛ помаже да дефинишемо смислене блокове за структуру, а ХТМЛ5 нам омогућава да створимо смислене блокове за претраживаче и СЕО. Како се ознака одељка користи у ХТМЛ5 за СЕО.
Коришћење ознаке одељка је веома слично коришћењу слоја див, с том разликом што одељак даје семантички смисао, а сви елементи затворени у одељку повезани су са семантиком веба. Важно је не користити одељак за груписање елемената у било ком блоку јер морамо имати групне елементе груписане за додељивање ЦСС стилова или неки програмски ефекат.
Ако је разлог за стварање блока примјена ЦСС -а или употреба из кода са скриптом, било би боље да не користите ХТМЛ5, јер блок нема семантички садржај. У овом случају морамо створити блок са слојем див од кхтмл. Као што се види у горњем примеру, лого нема смисла користити ХТМЛ5 јер се ЦСС користи за приказ слике.
ДИВ слој или одељакЈедан начин размишљања о релевантности сваког блока да би се утврдило да ли је реч о див слоју или одељку, ако сам ја посетилац веб странице. Да ли ми овај блок даје корисне информације? Ако је одговор да, то ће бити одељак, ако не и слој.
Када користимо елемент чланка, дефинишемо блок који има семантички смисао и садржај који претраживачи могу да индексирају. Ознака чланка не мора се нужно односити на текстуалну белешку, то може бити производ, слике или образац.
Погледајмо једноставан пример веб странице и њеног кода у ХТМЛ5:
Хонда Цивиц
Како унутар чланка можемо ставити слојеве или одломке или друге кхтмл елементе, у неким случајевима садржај веба може имати само један чланак, а у случају да страница има листе или каталоге као у претходном случају Аутос Онлине, можемо имати чланак по сваком приказаном производу и такође његово заглавље како би насловима дали већу релевантност.
Такође можемо применити цсс стилове на ХТМЛ5 елементе, да видимо једноставан пример за мрежни блог са ХТМЛ5 и ЦСС3.
Наслов 1
Оставио 06. децембра 2014. аутор Сергио - 3 коментара
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Проин еуисмод теллус еу орци импердиет нец рутрум лацус бландит. Црас еним нибх, содалес ултрициес елементум вел, ферментум ид теллус. Проин метус мржња, ултрициес еу пхаретра дицтум, лаореет ид мржња …
Наслов 2
Оставио 1. децембра 2014. Сергио - 20 коментара
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Проин еуисмод теллус еу орци импердиет нец рутрум лацус бландит. Црас еним нибх, содалес ултрициес елементум вел, ферментум ид теллус. Проин метус мржња, ултрициес еу пхаретра дицтум, лаореет ид мржња …
Ово показује да они нису само семантички елементи, већ могу бити и део дизајна и структуре веб странице.
Овај елемент служи за дефинисање секундарног блока у структури веб странице, садржај или податке које желимо да прикажемо посетиоцу, али то није главни садржај.
Ознаку са стране можемо повезати са бочним колонама или опште познатом као бочна трака која ће имати секундарни садржај менија за навигацију, везе до других веб страница, обрасце за пријављивање. Такође можемо створити страну у чланку, што значи да је оно што се налази по страни допуна садржаја чланка, али није директан део тог садржаја, на пример ако имамо чланак о некој продаји, а у страну објављујемо статистику .
На крају, запамтите циљ Лаиоут -а:
Шта је Лаиоут веб страница?Изглед веб странице треба да доведе графички дизајн у хтмл код, цсс лоцирајући сваки одговарајући елемент путем кода на веб страници.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
