HTML 101/Lekce 1

1. Koncepty

V minulé "lekci" jsme si řekli něco o HTML. Také jsme si ukázali něco o editorech kódu, ale ať už jste se rozhodli použít jakýkoliv, zatím ho ještě neupotřebíte. V této lekci si totiž vysvětlíme několik konceptů a pojmů, na které budete v tomto značkovací jazyce narážet neustále - tagy, elementy, atributy a syntaxi.

Tagy

HTML je značkovací jazyk, což znamená, že místo příkazů používá tagy (česky také "značky"). Píšou ve špičatých závorkách <> a dělí se na dva typy:

Párové tagy. Zapisují se dvakrát; první tag se nazývá počátečním a poslední koncovým. Koncový tag má vždy za první závorkou lomítko / pro ukončení.
Nepárové tagy. Zapisují se pouze jednou; nepíše se lomítko pro ukončení.^{[P 1]} Skládají se jen z jednoho tagu.

<p>Text</p>

<meta name="author" content="ProStartup Inc.">

Příklad výše ukazuje oba typy tagů. Na prvním řádku je vyobrazen párový, na třetím zase nepárový.

Tagy a velikost písmen

V HTML na velikosti písmen nezáleží, a tak jsou všechny tagy v příkladu níže validní:

<strong>Příklad 1</strong>

<STRONG>Příklad 2</STRONG>

<sTrOnG>Příklad 3</StRoNg>

Nejlepší je ale všechny tagy (i elementy a atributy; viz následující sekce) psát malým písmem - jde o standardní praktiku, doporučenou i W3C (World Wide Web Consortium, organizace stojící za vývojem technických specifikací pro HTML, CSS a další).

Elementy

Element (česky také "prvek") jsou vše od počátečního po koncový tag. V případě nepárových tagů se jako element počítá celý tag. Když je jeden element vnořený do druhého (tzv. rodičovský element), vnořený element (tzv. potomek) je součástí rodičovského elementu (naopak to ale neplatí).

<h1>Nadpis</h1>

<br>

<p>
    Součást elementu. Následující nepárový tag je jeho potomkem.<br>
</p>

Na prvním řádku příkladu výše se nachází element <h1> skládající se z počátečního a koncového tagu; text mezi nimi je také jeho součástí. Nepárový tag <br> na třetím řádku je také elementem. Řádky 5, 6 a 7 jsou součástí elementu <p>, přičemž tag <br> na 6. řádku je jeho potomkem.

Atributy

Atributy jsou vlastnosti měnící funkci či vzhled elementů, ve kterých jsou zapsány. Zapisují se v počátečních tazích. Některé elementy mají povinné atributy, bez kterých by nefungovaly.

Většina atributů má za svým jménem znak = a hodnotu, která je napsána mezi uvozovkami " ". Některé ale žádnou hodnotu nemají. Takové atributy je nazývají booleanovské atributy.

<meta name="author" content="ProStartup Inc.">

<input type="checkbox" checked>

V příkladu výše se nachází dva elementy - <meta> a <input>. <meta> má zde zapsané dva atributy ('name' a 'content'); oba mají nějakou hodnotu. <input> má také dva atributy ('type' a 'checked'), ale ten poslední hodnotu nemá a je tak booleanovský.

Syntaxe

Syntaxe je řada pravidel, která se musí pro správnou funkci kódu dodržovat. HTML ji má velmi jednoduchou; v kódu se například nemusí dodržovat tatřka žádná struktura.

<!DOCTYPE html><html><head><title>Web</title></head><body><p>Jedna<br>Dva</p></body></html>

Kód výše je kompletně validní. Je ale také velmi nepřehledný.

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
    </head>
    <body>
        <p>
            Jedna<br>
            Dva
        </p>
    </body>
</html>

Výše je ten stejný kód, ale tentokrát nějak strukturovaný. Funguje kompletně stejně jako ten první, ale je mnohem čitelnější. Jde v něm na první pohled poznat, které elementy jsou potomky kterých a je snadné se v něm orientovat a provádět změny.

Jednoduchost syntaxe ale neznamená absenci pravidel, a i HTML jich několik má.

Pořadí uzavření tagů

<p><b>To je špatně!</p></b>

<p><b>To je správně!</b></p>

Tagy by měly být uzavírány ve správném pořadí - tag otevřený jako první by měl být uzavřen jako poslední. V příkladě výše jsou dva elementy <p>, každý s potomkem <b>. U toho prvního nejsou žádné problémy, ale u toho druhého dochází ke špatnému pořadí uzavření - <p>, rodičovský element <b>, je uzavřen dříve než <b>, i když by tomu mělo být opačně.

Správné uzavření tagů

<p>To je špatně!<p>

<p>To je špatně!

<p>To je správně!</p>

Všechny párové tagy by měly být ukončeny koncovým tagem s lomítkem. V příkladě výše jsou tři elementy <p>, ale jen ten poslední je správně uzavřen. První <p> nemá v koncovém tagu lomítko /, což vlastně znamená, že koncový tag vlastně není koncovým tagem a místo toho začíná nový element. Druhý <p> ani koncový tag nemá zapsaný.

Uvozovky a apostrofy

<input type="checkbox" id="1" checked>

<input type="checkbox id="2" checked>

Uvozovky a apostrofy by se měly používat pouze na ohraničení hodnot atributů. Musí být navíc správně uzavřeny, nebo bude stránka plná chyb. Příklad výše ukazuje dva elementy <input>, každý se dvěma atributy, které mají nějakou hodnotu. První element je v pořádku a jeho atributy mají své hodnoty řádně ohraničené, ale u toho druhého tomu tak není. Hodnota tak končí až u uvozovky, která by měla označovat začátek hodnoty úplně jiného atributu.

Pokud takovou chybu učiníte, je obvykle velice snadné ji najít - většina editorů kódu má funkci zvýrazňování syntaxe, která hodnoty barevně odlišuje od ostatních částí kódu (i proto je lepší základní editory textu nepoužívat a místo toho si stáhnout nějaké IDE - vyhnete se mnoha frustracím).

Opravy ze strany prohlížečů

Prohlížeče mohou některé menší chyby opravit (např. neuzavřené tagy), ale na to by se neměl vývojář spoléhat. Různé prohlížeče mohou různé chyby opravit různě, což může způsobit na různých platformách nekonzistentní vzhled a funkcionalitu. Chybný HTML kód je také problémem pro SEO a přístupnost (např. čtečky obrazovek), ale to je téma na jindy.

Pokud chcete svůj kód zkontrolovat, žádný problém! Na webu se nachází řada validátorů HTML kódu; W3C má také svůj vlastní.

Příští lekce

V příští lekci se konečně pustíme do trochy programování - probereme první elementy a ukážeme si základní strukturu webu.

Poznámky

↑ HTML povoluje psaní ukončujících lomítek u nepárových tagů, ale není to potřeba. Na rozdíl od ukončujícího párového tagu se lomítko umisťuje před začátek koncové závorky (</br> místo <br/>)
U XHTML je tomu jinak - ukončující lomítko je povinné i u nepárových tagů.

[1] HTML povoluje psaní ukončujících lomítek u nepárových tagů, ale není to potřeba. Na rozdíl od ukončujícího párového tagu se lomítko umisťuje před začátek koncové závorky (</br> místo <br/>)
U XHTML je tomu jinak - ukončující lomítko je povinné i u nepárových tagů.

[P 1]