Toto je 4. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 4. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Každý správný HTML dokument by měl být vhodně strukturovaný. Nejen, že to zvýší přehlednost zdrojového kódu, ale také to umožní snadnější aplikaci CSS vlastností a procházení stránek robotům vyhledávačů. V minulosti se ke strukturování dokumentů používaly tabulky <table>, ty se dnes již využívájí především pro zobrazování dat a pro vytváření struktury dokumentu se používat nedoporučují. Nahradily je tzv. bloky <div>.
Párový tag <div></div> vytváří samostatný blok HTML dokumentu. Těchto bloků může být v celé dokumentu tolik, kolik je potřeba, aby byly struktura logická a zároveň přehledná.
Abychom mohli dále s bloky pracovat, přidat CSS vlastnosti nebo javaScript funkce, je vhodné dané bloky pojmenovat. Jedinečné bloky, které se v dokumentu uvádí pouze jednou pojmenujeme identifikátorem id. Opakující se bloky pojmenujeme třídou class.
<div id="nazev-bloku"></div><div class="nazev-bloku"></div>
Pomocí bloků si můžeme definovat první strukturovaný HTML dokument.
<!DOCTYPE html><html lang="cs"><head><meta charset="UTF-8"><title>Titulek stránky</title></head><body><div id="header"><h1>Nadpis stránky umístěn v hlavičce</h1></div><div class="section"><h2>Nadpis prvního bloku stránky</h2><p>Odstavec prvního bloku.</p></div><div class="section"><h2>Nadpis druhého bloku stránky</h2><p>Odstavec druhého bloku.</p></div><div id="footer">Patička stránky</div></body></html>
V nové deklaraci HTML5 vznikly nové tagy, kterými lze nahradit klasické <div> bloky. Tyto tagy zatím nic víc nepřinášejí, pouze umožňují přehlednější strukturování zdrojového kódu a snadnější procházení dokumentu pro roboty vyhledávačů a čtečky obsahu. Zda budete využívat klasický tag nebo nové tagy, je zcela na vás.
Podívejme se na ukázku s novými HTML5 tagy.
<!-- začátek dokumentu --><body><header><h1>Nadpis v hlavičce</h1></header><section><header><h2>Nadpis bloku stránky</h2></header><p>Odstavec bloku stránky</p></section><footer>Patička stránky</footer></body><!-- konec dokumentu-->
Samotná HTML5 deklarace obsahuje ještě další bloky dokumentu. Ty si probereme v samostatných návodech.
Na závěr si ještě jednou projdeme všechny probrané tagy.
<div>Párový tag vytvářející samostatný blok stránky. Dovnitř bloku se umisťuje obsah HTML dokumentu. Těmito tagy se vytváří struktura celého dokumentu. Každý blok lze pojmenovat buď jedinečný identifikátorem id nebo třídou class.
Identifikátor id vkládáme jako název bloku HTML dokumentu. Každý blok s identifikátorem id je jedinečný a neměl by se v HTML dokumentu vyskytnou vícekrát.
Třída class označuje název bloku. Na rozdíl od bloku s identifikátorem id, může jeden HTML dokument obsahovat více bloků se stejným názvem třídy class.
<section>Párový tag obklopující samostatný blok HTML dokumentu. Vylepšuje strukturu a umožňuje snazší úpravu vlastností dokumentu.
<footer>Párový tag vymezující patičku HTML dokumentu.
