Marvi Konvic Blog

U HTML5 su pristutni tagovi koji će vam olakšati i ubrzati izgradnju web stranica. Umesto DIV tagova, u upotrebu se uvodi nekoliko novih tagova uz pomoć kojih se može veoma jasno definisati struktura stranice.

Na slici ispod prikazano je kako izgleda struktura jedne stranice sa novim tagovima:


Na slici ispod prikazana je razlika u strukturi stranica:


<header>
Header Kao što i samo ime govori to je prvi element na stranici i u njega obično stavljamo logo i navigaciju.
Primer:

<header>Sadrzaj</header>

<footer>
Footer on je samostalan element koji se koristi za dodavanje kontakt informacija, copyright. Može se nalaziti bilo gde na stranici, čak i u section tagu kao njegov footer.
Primer:

<footer>
<small>Copyright www.megadizajn.com</small>
</footer>

<section>
Ovaj tag možemo koristiti za definisanje oblasti (sekcija) unutar članka (article), ali isto tako uz pomoć njega možemo grupisati više članaka sa sličnom tematikom u sekcije. Takođe, mogu se praviti i sekcije unutar sekcija. Može sadržavati h1-h6, article, paragrafe itd.
Primer:

<section>
<h1>Portal</h1>
<h2>Forum</h2>
<article>Blog</article>
</section>

<article>
Namenjen je za definisanje individualnih (nezavisnih) delova sadržaja, poput članaka na blogu, postova na forumu, komentara na sajtu i sl.

<aside>
Aside element je sličan sidebaru ali ne i isto. Koristimo ga ili za bloquote citate ili za izdvajanje pojedinog sadržaja a odnosi se na glavni sadržaj. Može sadržati nav tag, paragrafe, citate.

<nav>
Ovaj element koristimo da bi unutar njega postavili linkove za navigaciju sajta. Pravilno je smestiti ga i unutar i van <header> taga. Radi lakšeg odredjivanja gde pripada možemo mu dodeliti ID ili klasu. Preporuka: Treba izbegavati njegovo korišćenje za linkove koji se obično nalaze u footer-u.

<hgroup>
Spada u "sekcijsku" grupu elamenata a odnosi se na heading elemente h1-h6 i njihovo grupisanje.
Primer:

<hgroup>
<h1>Forum</h1>
<h2>Portal</h2>
<h3>Blog</h3>
</hgroup>

Napomena:
Zbog Internet explorera i njegovog nepodržavanja HTML5 u starijim verzijama potrebno je na početku dokumenta pomoću JavaScripta navesti te elemnte deklarisati da budu block-level elementi.

<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('hgroup');
document.createElement('aside');
document.createElement('footer');
</script>