☰ menu
Pavel Satrapa

Anatomie stránky

Prvky, značky a spol.

HTML je značkovací jazyk. To znamená, že ve zdrojovém kódu stránky se mísí viditelný text s konstrukcemi, které určují jeho strukturu. Pro strukturu stránky v HTML jsou rozhodující tak zvané prvky (anglicky element). Každý prvek má přiřazen určitý význam, například existují prvky pro nadpisy, odstavce, či vložené obrázky. HTML určuje pravidla pro jejich uspořádání – kde který prvek smí, nesmí či musí být.

Do zdrojového textu stránky se prvky zapisují prostřednictvím značek (anglicky tag). Značka začíná speciálním znakem „<“, za ním následuje jméno prvku a ukončující znak „>“, například <strong>.

Většina prvků je neprázdných, obsahují třeba část textu. K jejich vložení se používá dvojice značek – zahajující a ukončující. Vše mezi nimi tvoří obsah, v terminologii HTML tělo dotyčného prvku. Ukončující značku poznáte snadno, před jméno prvku je předřazen znak „/“.

Například na začátku této stránky se nachází nadpis „Anatomie stránky“. Pro nadpis nejvyšší úrovně je určen prvek <h1>, nadpis jsem proto vytvořil zdrojovým textem:

<h1>Anatomie stránky</h1>

Vnořování, prvky bez obsahu

Řadu prvků lze v HTML do sebe vnořovat. To znamená, že tělem jednoho prvku je jiný prvek, nebo je v těle obsažen. Například odstavec textu je vymezen prvkem <p>. Část textu může být zvýrazněna, k čemuž slouží prvek <em>, který je v takovém případě vnořen v prvku <p>, asi takto:

<p><em>Začátek</em> je zvýrazněn.</p>

Vnořování musí být „čisté“, čili prvek musí být obsažen v jiném. Ve zdrojovém kódu se to projeví tak, že prvek, který později začal, musí dříve skončit. Následující překřížení prvků je nepřípustné:

<em><p>Začátek</em> je zvýrazněn.</p>

Některé prvky však žádný obsah nemají. Typickým příkladem je prvek <br>, jehož významem je „zde ukončit řádek a přejít na začátek nového“. V HTML5 jej můžete jednoduše použít samotné.

XML je přísnější, takže v XHTML5 musí být každý prvek buď ukončen, nebo musí být jasně řečeno, že k němu žádná ukončující značka nebude. To se provede uvedením znaku „/“ před závěrečným „>“ úvodní (a jediné) značky prvku. Ovšem některé starší prohlížeče mají se zápisem <br/>. Proto se doporučuje vynechat před závěrečným lomítkem mezeru. To je syntakticky správně a funguje i ve starších klientech. Prázdný prvek <br> tedy v XHTML5 zapíšete buď pomocí

<br></br>

nebo

<br />

Volný formát

Zdrojový kód HTML se zapisuje ve volném formátu. To znamená, že prohlížeč vůbec nebere ohled na to, v jakém tvaru je zapsán. Konec řádku má pro něj stejný význam jako mezera a libovolně dlouhou skupinu po sobě jdoucích mezer scvrkne na jedinou mezeru.

Například zdrojový text

<p>Toto           je
opravdu             krátká věta.</p>

bude po zformátování klientem vypadat úplně stejně jako

<p>Toto je opravdu
     krátká
     
             věta.</p>

Veškeré formátování stránek musíte proto provádět přiřazením odpovídajících prvků (a definicí jejich vzhledu).

Povinný obal

HTML stránka má povinnou kostru, kterou musíte vždy uvést. Teprve do ní pak vkládáte individuální obsah dané stránky. V HTML5 došlo k výraznému zjednodušení kostry, která teď vypadá následovně:

<!DOCTYPE html>
<html>
<head>
  <title>titulek stránky</title>
  ...další údaje hlavičky...
</head>
<body>
  ...tělo stránky...
</body>
</html>

Počáteční DOCTYPE identifikuje jazyk použitý pro vytvoření stránky. Starší verze zde uváděly dlouhé identifikátory, určující konkrétní verzi HTML či XHTML. HTML5 se omezuje na prosté konstatování „toto je HTML“. Celá stránka je pak vlastně tělem prvku <html>, který v sobě obsahuje vlastně jen dva prvky, nesoucí vše ostatní:

<head>

Hlavička stránky. Obsahuje informace o ní, jako například odkazy na stylové soubory pro zobrazení, informace pro vyhledávače, zvolené kódování češtiny a podobně. Jedinou povinnou součástí hlavičky je prvek <title> určující titulek stránky. Jeho obsah bude zobrazen v nadpisu okna prohlížeče.

<body>

Tělo stránky. Zde je text, který klient zobrazuje uživateli. Zpravidla začíná hlavním nadpisem, čili prvkem <h1>.

Entity

Možná už jste si položili otázku, jak vložit do textu například znak „<“, když má v HTML přiřazen speciální význam – zahajuje značku. Podobný problém představují znaky, které nenajdete na klávesnici, jako například ∑ či ©.

Tento problém řeší entity, speciální konstrukce, jimiž lze vkládat jednotlivé znaky. Mají tvar &název;, kde název je jméno entity definované v HTML. Například znak „<“ vložíte entitou &lt; (Less Than). Zavedením entit se stal speciálním i znak „&“ a chcete-li jej mít v textu, musíte jej vložit entitou &amp; (AMPersand).

Připravil jsem pro vás předled všech entit jazyka XHTML (ve formátu PDF, 80 kB).

Atributy

Značky vymezující prvky HTML kódu mohou obsahovat atributy. Jedná se o doplňující informace, které ovlivňují jejich vzhled či chování. Například později uvidíte, že značka <a> vkládá do textu odkaz na jinou stránku či zdroj a její atribut href obsahuje adresu cíle daného odkazu. Zdrojový dód vypadá nějak takhle:

<a href="http://www.tul.cz/">TU v Liberci</a>

Atributy se vždy vkládají do zahajující značky prvku. Od jména prvku se oddělují mezerou, stejně jako od sebe navzájem, pokud jich prvek obsahuje více. Každý z nich má tvar

název="hodnota"

V XHTML5 musí být hodnota vždy uzavřena do uvozovek – buď dvojitých či jednoduchých. V HTML5 jsou uvozovky nepovinné, pokud hodnota neobsahuje mezery. Nicméně zvykněte si je používat i zde a hodnoty všech atributů automaticky uzavírejte do jednoduchých nebo dvojitých uvozovek.

O konkrétních atributech jednotlivých prvků a jejich významech se dočtete v dalších částech tohoto textu.

Související témata

zpět: vytváření WWW stránek