Strukturalne elementy HTML5

Semanticke elementy popisuju vyznam, zatial co <div> ani po pridani id, nehovori nic o jeho obsahu.

HTML5 prinasa strukturalne semanticke elementy:

• article
• aside
• footer
• header
• hgroup
• main
• nav
• section

main

Predstavuje hlavny obsah, ktory je unikatny, neobsahuje opakujuci sa obsah, ako postranne panely, navigacne odkazy, copyright, logo a vyhladavaci formular. Musi byt len jeden a nesmie byt potomkom article, header, footer alebo nav.

<main>
    <h1>...</h1>
    <p>...</p>

    <article>
        ...
    </article>

    <article>
        ...
    </article>
</main>

header a footer

Jednotlive sekcie a clanky mozu mat svoje hlavicky a paticky. Zmysel tychto elementov su napriklad meta informacie alebo odkazy relevantne k sekcii.

Priklad hlavicky a paticky v article elemente:

<article>
    <header>
        <h1>...</h1>
    </header>

    <p>...</p>
    <p>...</p>

    <footer>
        <p>Publikovane: <time datetime="...">...</time></p>
    </footer>
</article>

Priklad paticky stranky s navigaciou:

<footer>
    <nav>
        ...
    </nav>

    <p>Copyright ©2013 ...</p>
</footer>

hgroup

Element sluzi na zoskupenie nadpisov v pripade, ze nadpis tvori viacero urovni, ako podnadpis alebo alternativny nadpis.

<header>
    <hgroup>
        <h1>...</h1>
        <h2>...</h2>
    </hgroup>
</header>

article

Moze to byt prispevok, clanok, komentar uzivatela, widget alebo gadget, alebo iny nezavysly prvok obsahu.

<article>
    <h2>...</h2>
    <p>...</p>
</article>

section

Predstavuje vseobecnu cast dokumentu, tematicke zoskupenie obsahu, zvycajne s nadpisom.

<section>
    <h1>...</h1>
    <p>...</p>
</section>

aside

Cast stranky, ktora sa sklada z obsahu suvisiacim s obsahom okolo neho. Casto obsahuje dodatocne vysvetlivky alebo menej suvisiaci obsah, ako reklamy a bio autora.

<aside>
    <p>Obsah suvisiaci s clankom</p>
</aside>

nav

Reprezentuje cast stranky, ktora obsahuje odkazy na ine stranky alebo casti stranky.

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

Kedy pouzivat div

Kedy teda pouzit stare dobre <div>? Vtedy, ked nieje lepsi element pre danu situaciu.

Internet Explorer a HTML5

Internet Explorer 9 a starsi nepozna tieto nove elementy, ktore zaviedol HTML5. Pomocou HTML5 shiv mozeme vyriesit problem nasledovne:

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->