Layout (rozložení stránky) - Český HTML 5 manuál

HTML a CSS Manuál Layout Layout (rozložení stránky) - Český HTML 5 manuál

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 hledika 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í layotu 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é časti (sekce) ukazuje následující obrázek:

HTML layout pomocí HTML5 tagů

<header>

Hlavičku stránky (neplést s hlavičkou dokumentu head, která není pro uživatele, ale pro prohlížeč) definujeme tagem header. 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>

<nav>

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>

<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>

<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í krmimo pro aktivní psy všech plemen... zde by pokračoval obsah článku</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, další informace nebo reklamy a to např. takto:

<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>

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ů).


 

  Aktivity (2)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Layout - Český HTML 5 manuál

 

 

Komentáře
Zobrazit starší komentáře (9)

Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:

Přesně tak jsem to původně chtěl :) .. tak díky za ujištění.. a dost rychlou odpověď :)

Odpovědět 7.12.2012 20:22
"nikdy nepiš nic 2x"
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Není to lepší dát do jedné nav? Navigace je tam vlastně jedna.

Odpovědět 7.12.2012 20:37
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
Kit:

Pokud má např. jednu navigaci vodorovně a druhou svisle, mělo by to být ve dvou blocích nav s různým id. Pokud je to jeden navigační blok, ve kterém jsou dva různě stylované seznamy, viděl bych to na jeden blok nav a uvnitř dvě ul s různými class.

Odpovědět  +1 7.12.2012 20:50
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
relycanx
Člen
Avatar
relycanx:

Co se týče těch speciálních pojmů jako header,article,fo­oter a tak, tak jsou asi hlavně pro přehlednost že? aby všude nebylo div jako v minulosti

 
Odpovědět 6.5.2013 21:08
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na relycanx
Jiří Gracík:

pozdě ale přece - ani ne tak pro přehlednost (to je podle mě spíš vedlejší produkt), jako spíš pro boty kteří jasně poznají, co v daném elementu bude za obsah :)

Editováno 28.5.2013 16:21
Odpovědět  +1 28.5.2013 16:21
Creating websites is awesome till you see the result in another browser ...
Avatar
Petr Čech (czubehead):

Nedá se nějak vyřešit nepodpora html 5 starými prohlížeči?

Odpovědět 13.12.2013 21:24
Why so serious? -Joker
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovědět  +1 13.12.2013 21:25
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Petr Čech (czubehead)
Jiří Gracík:

Prohlížeče, které nepodporují HTML5, by se už ani podporovat neměly. Cílem všech kodérů a webařů obecně by mělo být jejich vymýcení.

Odpovědět  +2 4.2.2015 18:05
Creating websites is awesome till you see the result in another browser ...
Avatar
Ondřej Langr (andysekcze):

Je toto špatně?

<main>
  <article>
  </article>
  <article>
  </article>
</main>
Odpovědět 14. ledna 18:32
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Odpovědět 14. ledna 18:45
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 19. Zobrazit vše