HTML5 – структура страница

У савременим прегледачима  HTML5 је сваким даном све више и више подржан. Ипак, још увек не можемо говорити о масовној употреби истог јер још увек нису у потпуности утврђени сви стандарди и правила уз помоћ којих се нови елементи могу правилно користити. Штавише, употпуњавање  HTML5 стандарда  може потрајати још неколико година. Али ипак, то не значи да не можемо почети да га у мањој мери користимо за неке пројекте. Такође, већ сада можемо погледати како би изгледала структура тј. „костур“ странице писане у  HTML5.

У  HTML5 су присутни тагови који ће заменити класичан начин „изградње“ странице са div елеменатима. Уместо гомиле div тагова, у употребу се уводи неколико нових тагова уз помоћ којих се може веома јасно дефинисати структура странице. Почетницима ће овакав начин уклапања елемената бити далеко природнији и брже ће га усвојити.

Пре него што пређемо на саму структуру елемената, морам напоменути да HTML5 користи doctype који је далеко лакше запамтити него стари:
Једна од старих doctype декларација:


HTML5 doctype декларација:

 

А сада да видимо како би, графички представљена, изгледала структура једне странице са новим таговима:

 

и

Намена ових тагова је прилично јасна. У таг header можемо „упаковати“ лого и/или име сајта, пар речи којима описујемо сајт и слично. Под footer тагом можемо поставити копирајт информације и други садржај који се обично налази у том делу странице. Али ово нису једнини случајеви када их можете применити. Можете их користити и да би дефинисали делове унутар чланка (article), узмимо за пример ову страницу коју читате: ови social share дугмићи би могли да се сместе у header таг, а „Слични текстови“ у footer. И пазите да не помешате  и 

тагове, који су потпуно различити.

Овај таг можемо користити за дефинисање области (секција) унутар чланка (article) , али исто тако уз помоћ њега можемо груписати више чланака са сличном тематиком у секције (погледајте слике испод). Такође, могу се правити и секције унутар секција.

Нагласио бих да би се приликом коришћења section тага требало држати неких правила: не треба их користити само за потребе стилизовања или додавања JS-a, и не треба их корситити  ако се уместо њих могу искористити article, aside и nav тагови.

Намењен је за дефинисање индивидуалних (независних) делова садржаја, попут чланака на блогу, постова на форуму, коментара на сајту и слично. Можете користити овај таг и један унутар другог, на пример када посетилац оставља коментар на чланак:

Наслов чланка

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Коментар

Овај таг користимо како би дефинисали неки садржај који је повезан са околним садржајем, али може да буде самосталан и издвојен (али је ипак „у контексту“ са садржајем около).  Рецимо да имамо чланак о предстојећој фудбалској утакмици, у аside таг би сместили пар информaција о стадиону где се игра, који је његов капацитет итд. Наравно, у овај таг можемо сместити и елементе које би ставили у класични sidebar: линкове ка другим блоговима и сајтовима, архиву и слично.

Као што назив наговештава, овај таг користимо да би унутар њега сместили линкове за навигацију сајта. Што се тиче његовог позиционирања, правилно је сместити га и унутар и ван  

тага. Али имамо још једно правило (тачније препоруку): не користити

Аутор: Ники

TEST TEST TEST

4 мишљења на „HTML5 – структура страница“

Оставите одговор

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *