Lekce 3 - Rozložení stránky v HTML (layout)

V minulé lekci, Základní struktura HTML II. část, jsme pokračovali se strukturou HTML dokumentu. Ukážeme si tagy <script>, <style>, <link>, <base> a <body>.

Obsah HTML dokumentu se nachází v elementu <body>. Většinou však <body> dále rozdělíme do několika sekcí s různým významem, které tvoří tzv. layout. Před příchodem HTML 5 sekce představovaly divy, HTML 5 však nyní přišlo s novými značkami právě pro tvorbu layoutu, které vždy dávají určité sekci určitý význam. To pomůže např. vyhledávačům lépe pochopit obsah stránky.

Layout se s postupem času vyvíjel. V dávné minulosti se k jeho tvorbě využívaly rámce nebo tabulky. S příchodem dynamických stránek se skládal z divů a ty jsou nyní nahrazeny novými tagy. Z hlediska ergonomie je výraznou změnou přesunutí navigačního menu nahoru, které nejčastěji vypadá jako vodorovný řádek. Dříve byla navigační oblast nejčastěji jako levý sloupec. Součástí layoutu zůstala hlavička a patička. Objevila se nová oblast v podobě pravého sloupce, který obsahuje doplňující obsah k článku. Tyto změny v koncepci webové stránky se občas označují termíny jako web 2.0 a web 3.0.

Rozložení stránky na jednotlivé části (sekce) ukazuje následující obrázek:

HTML layout pomocí HTML5 tagů - HTML5 od A do Z

`<header>`

Hlavičku stránky (neplést s hlavičkou dokumentu <head>, která není pro uživatele, ale pro prohlížeč) definujeme tagem <header>. Tag <header> zpravidla obsahuje nadpis h1, případně dva nadpisy sloučené pomocí tagu hgroup. Nadpisy se v tomto případě váží k celému webu (jako vše v header), ale header můžeme stejně tak vložit i do dalších sekcí stránky. Header dále zpravidla obsahuje obrázek s logem, vyhledávací pole nebo např. možnost výběru jazyka. Kód jednoduchého headeru by mohl vypadat takto:

<header>
    <img src="images/logo.png" alt="Psí potřeby" />
    <hgroup>
        <h1>Psípotřeby.cz</h1>
        <h3>To nejlepší pro vaše čtyřnohé miláčky.</h3>
    </hgroup>
</header>

V prohlížeči by to vypadalo klasicky takto:

Header

localhost

`<nav>`

Tag <nav> obsahuje navigační prvky. Může být součástí header nebo stát samostatně pod ním. Můžeme ho samozřejmě použít kdekoli na stránce, ale zvykem je mít navigaci pod hlavičkou. Obvykle obsahuje nastylovaný seznam <ul>, jehož položky reprezentují odkazy na jednotlivé podstránky. Uveďme si příklad navigačního menu:

<nav>
    <ul>
        <li>O nás</li>
        <li>Hračky</li>
        <li>Vodítka</li>
        <li>Krmivo</li>
        <li>Pelíšky</li>
        <li>Kontakt</li>
    </ul>
</nav>

Na stránce to vypadá klasicky bez stylu takto:

Header & navigace

localhost

Velmi často se seznamy stylují bez odrážek (teček), proto někdy nejde ani poznat, že se o seznamy jedná.

`<footer>`

Patička obvykle obsahuje copyright, informace o autorovi a případně další odkazy (např. na mapu stránek a podobně). Mohli bychom ji napsat např. takto:

<footer>
    <p>Copyright (C) 2012 PsiPotreby.cz, Jan Novák</p>
</footer>

Patička je už podle názvu úplně na konci:

Header & navigace

localhost

`<section>`

Section se používá zejména k označení "těla" dokumentu mezi hlavičkou a patičkou. Právě zde se nalézá samotný článek nebo články.

`<article>`

Samotný článek píšeme do elementu <article>. Ten může opět obsahovat <header>, <section> a <footer>. To je samozřejmě velmi přínosné pro vyhledávače, jelikož nyní vědí, na jakou část webu se zaměřit. Ukažme si takový článek:

<article>
    <header>
        <h1>Krmivo DOG plus</h1>
    </header>
    <section>
        <p>DOG plus je speciální a kompletní krmivo pro aktivní psy všech plemen... </p>
    </section>
</article>

`<aside>`

Jako součást moderních layoutů se osvědčil postranní panel, pro který se v HTML 5 nabízí tag <aside>. Je logicky chápán jako soubor doplňujících informací k článku. Obvykle jsou zde umístěny odkazy na další podobné články, informace nebo reklamy:

<aside>
    <h1>Podobné produkty:</h1>
    <ul>
        <li>Psí tyčinka Multivitamin</li>
        <li>Vitamíny pro psy</li>
        <li>Doplňky stravy</li>
    </ul>

    <h1>Akční nabídky:</h1>
    <ul>
        <li>Vodítko Denny</li>
        <li>...</li>
    </ul>
</aside>

Tag můžeme použít i mimo layout pro vymezení něčeho, co nepatří k hlavnímu tématu daného bloku. Můžeme zde např. psát různé poznámky nebo vysvětlivky k textu. Nabízí se např. k obalení definičního seznamu (slovníku pojmů).

Po přidání CSS můžeme mít tento výsledek webové stránky:

Tvoje stránka

localhost

Trochu nastylovaný layout

HTML s CSS výše uvedeného příkladu je níže k dispozici ke stažení.

Tyto tagy prohlížeče často sami nestylují, jsou ale vhodné k označení sekcí namísto divů, jak bylo zmíněno na začátku. Prohlížeč bude mít alespoň jasno, co kam patří a může nám to někdy pomoct i v SEO optimalizaci.

V další lekci, Rozložení stránky v HTML II. část, si ukážeme HTML 5 tagy <details>, <summary>, <figure>, <time> a další.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 637x (26.06 kB)

Článek pro vás napsal Samuel Hél

Uživatelské hodnocení:

137 hlasů

Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes, svou gf a elektroniku

Aktivity