Struktura stránky

Naše stránka už má docela dost částí: odkazy na další stránky, nadpis s fotkou, obsah stránky, sekce s textem, video a odkaz na zdroj. V kódu ale mnohé z nich vypadají stejně. Prvek div prvky jen seskupuje, ale neříká nic o tom, co jsou zač.

Proto má HTML prvky, které říkají, co je která část stránky zač:

• header (záhlaví): úvodní část nahoře na stránce s hlavním nadpisem, často i s logem nebo odkazy,
• nav (z anglického navigation, navigace): skupina odkazů pro pohyb po webu nebo po stránce,
• main (hlavní): hlavní obsah stránky,
• section (sekce, oddíl): jedna část obsahu na jedno téma, obvykle s vlastním nadpisem,
• footer (zápatí): konec stránky s doplňujícími informacemi, jako je autor, kontakt nebo zdroje.

V náhledu vypadají úplně stejně jako div. Rozdíl je v tom, že prohlížeče, předčítače obrazovky i vyhledávače z nich poznají, co která část stránky je. Předčítač tak třeba umí skočit rovnou na hlavní obsah nebo na navigaci.

Stránka postavená z těchto prvků může vypadat například takto:

<body>
	<header>
		<nav>...</nav>
		<h1>...</h1>
	</header>
	<main>
		<section>...</section>
		<section>...</section>
	</main>
	<footer>...</footer>
</body>

Stránka může mít i víc prvků nav. Ta naše bude mít dva: jeden s odkazy na další stránky a druhý s obsahem stránky. V tomto cvičení přidáme header, nav a footer, v tom příštím main a section.

Tip: když prvky obalíte novým prvkem, odsaďte je o úroveň víc, aby kód zůstal přehledný. Stačí označit řádky a stisknout Tab.