HTML 5 – lekce 8

 

V této lekci si povíme o struktuře stránky, sekcích a oddílech, tak jak je upravuje HTML 5.

 

Mluvnice pro tuto lekci:

<header> – párový – specifikuje oblast hlavičky

<nav> – párový – specifikuje oblast navigace na stránce

<section> – párový – označuje jakoukoli sekci dokumentu

<article> – párový – označuje místo nějakého článku

<aside> – párový – definuje nějaké prvky, které jsou vloženy mimo hlavní obsah

<figure> – párový – označuje nějaký obrázek, který je vložen samostatně

<figcaption> – párový – označuje popisek <figure>

<footer> – párový – označuje nám zápatí stránky

<div> – párový – označuje sekci na stránce

 

Do dnešního dne se pro strukturování stránky používají většinou <div> tagy. Hlavní <div> obsahuje menší strukturované. Problém je v tom, že pokud chceme, aby každý <div> měl vlastní styl, používáme často CSS třídy. HTML 5 se nám toto snaží usnadnit pomocí toho, že nám nabízí mnohé další tagy, ze kterých si můžeme vybrat. Říkáme jim tzv. sémantické tagy, protože už podle názvu poznáme, jaký je obsah. Nesémantické tagy jako je např <div> nejspíše časem vymizí. Alespoň tuto budoucnost nám tedy HTML 5 nastiňuje.

Kdy ale který tag použijeme?

 

Tag <header> by měl obsahovat nadpis, popřípadě stručnou větu o obsahu. Můžeme je mít v dokumentu několikrát, v tagu <header> však žádné být nemůžou.

 

Pro navigační odkazy bychom měli používat tag <nav>. Ne všechny odkazy v dokumentu však musíme dát do toho tagu.

 

Prvek <section> by měl obsahovat tematicky podobný obsah, typicky by měl začínat nadpisem.

 

Pro články, blogové posty nebo zprávy bychom měli použít tag <article>. Správně by obsah tohoto tagu měl dávat smysl sám o sobě, aniž bychom potřebovali zbytek stránky.

 

Prvek <aside> by měl obsahovat pouze prvky, které chceme dát na stránce stranou, jako například postranní panel a podobně.

 

S prvky <figure> a <figcaption> se automaticky pojí obrázky, to je také použití, kde ho nejvíce uvidíte. Obsah těchto prvků totiž specifikuje oblast, která se sice vztahuje k hlavní stránce, ale nezarovnává se podle ní. Prvek má samostatné zarovnání, které nijak neovlivňuje hlavní stránka.