Hlavní strana » Návody » Základní kostra stránky
V XHTML musí být (narozdíl od HTML) kořenovým elementem značka <html>. Sémantický dokument by měl touto značkou začínat vždy, čímž v podstatě definujeme, že všechno mezi těmito značkami má být součástí webové stránky. V drtivé většině stránek se tato značka objevuje, což je jenom dobře.
Poté by měla následovat značka <head>, ve které definujeme hlavičku dokumentu. Právě zde by se měly nacházet informace, které nenesou pro uživatele prohlížející si stránky prakticky žádnou informační hodnotu. To znamená meta-tagy, odkazy na externí styly či skripty apod. Jedinou výjimku tvoří značka <title>, která obsahuje stručný popisek dané webové stránky a kterou uživatel obvykle vidí v horním pruhu prohlížeče.
Další důležitá značka je <body>, která je pravý opak k předchozímu tagu. Zde by se měl nalézat samotný obsah dokumentu, kvůli kterému k vám uživatel zavítal. To znamená texty, obrázky, soubory ke stáhnutí (respektive odkazy na ně), flashové animace apod. Nejjednodušší stránka tedy bude vypadat takto:
<html>
<head>
<title>Moje první stránka</title>
</head>
<body>
Kofola je chutnější než Coca-Cola.
</body>
</html>
Nadpisy jsou snad nejdůležitější značkou pro logické rozdělení stránky a proto byste je určitě měli používat. HTML zná celkem šest úrovní nadpisů a sice <h1> až <h6>, přičemž <h1> je nejdůležitější a <h6> nejméně důležitý. Některé zdroje tvrdí, že nadpis <h1> by se měl na stránce vyskytnout pouze jednou, což opravdu není špatné dodržovat. Dáte tak stránce lepší řád, protože ve chvíli, kdy bude na stránce více <h1> nadpisů, jediný prvek, který bude celou stránku logicky sdružovat, bude titulek <title>, který však není tak úplně součástí stránky.
Další důležitá věc je návaznost nadpisů, to znamená, že byste neměli flákat nadpisy jak se vás zrovna napadne, ale měly by jít pěkně postupně. Neboli po hlavním nadpisu <h1> by měl následovat nadpis <h2> a potom <h3>. Nebylo by zrovna logické, kdyby po <h1> následoval nadpis <h3>. Pochopitelně tím nemyslím, že by nadpisy měly neustále klesat, toto pořadí nadpisů by bylo zcela v pořádku:
<h1>hlavní nadpis</h1>
<h2>podnadpis</h2>
<h3>ještě menší podnadpis</h3>
<h3>druhý menší podnadpis</h3>
<h4>nejmenší nadpis na této stránce</h4>
<h2>a zase podnadpis</h2>
<h3>a opět menší podnadpis</h3>
Je důležité si uvědomit, že nadpisem může být i obrázek. Spousta webů má jako hlavní vizuální nadpis obrázek, většinou protože se jim nelíbí obyčejné písmo a někde ve Photoshopu si udělají lepší, ale málokoho napadne tento nadpis vložit do značky pro hlavní nadpis. Má to tu výhodu, že například prohlížeče, které nepracují s obrázky, budou jako hlavní nadpis brát alternativní text (který pochopitelně musí být vyplněn). Tudíž tento zápis je samozřejmě správný:
<h1>
<img src="nadpis.jpg" alt="Sémantika - pravý význam HTML značek">
</h1>
Nejhorší, co můžete udělat, je, když namísto jednoduché značky <h1> použijete nějakou děsivou konstrukci typu <div id="nadpis"> a tento oddíl si poté nastylujete podle vašich představ. Pamatujte na to, že i nadpis <h1> lze nastylovat jako každou jinou HTML značku. No a pokud chcete použít dva nadpisy stejné úrovně, ale každý například jiné barvy, není nic jednoduššího, než nadpisu přiřadit třídu (nebo identifikátor):
<h2 id="vlevo">novinky</h2>Předchozí příklad má sice správnou sémantickou strukturu, ale přesto mu k dokonalosti ještě něco chybí. Text nemůže volně plavat v dokumentu, každý text totiž musí být vložen do nějaké logické značky. Pokud byste chtěli mít předchozí příklad pouze XHTML validní, stačilo by text vložit například do nějakého blokového elementu jako je <div>. Dosáhli byste sice validity, ale sémantice byste moc nepomohli, protože <div> není sémantická značka. Tudíž v tomto případě je nejlepší řešení vložit text do odstavce:
<p>Kofola je chutnější než Coca-Cola.</p>Rozhodně nepoužívejte pro vyznačení jednotlivých odstavců značku <br>, tato značka neslouží k rozdělení obsahu do odstavců, k tomu slouží právě značka <p>. Pokud nechcete mít mezi odstavci mezeru, vynulujte CSS vlastnost margin. Pokud například použijete v jednom odstavci několik <br>, bude celý text brán stále jako jeden odstavec. Typický příklad na použití této místy ošemetné značky je například hlavní nadpis toho webu. Mezi „sémantika” a „pravý význam HTML značek” je použit řádkový zlom.
Moderní webdesign praví, že dekorační obrázky se mají vkládat přes kaskádové styly (jako pozadí nějakého elementu), zatímco obrázky, které mají nějakou informační hodnotu, přes značku <img>. Je to logické, protože když si vypnete styly, tak nepotřebujte vidět rozházené části kulatých rohů nebo jinou dekorativní grafiku, která by se stejně rozházela po celé stránce. Ale určitě stále potřebujete vidět graf určující míru nezaměstanosti nebo fotky vašeho nového mobilu. Každý takový obrázek vkládaný pomocí značky <img> by také měl mít atribut alt, neboli alternativní text. Když už vkládáte přes tuto značku dekorativníé obrázek, ponechte alt nevyplněný.
«« Úvod do sémantiky » rozcestník « Zvýraznění textu »»
o web se stará Lukáš Havrlant (kontakt)