Příklad HTML elementu
Ukážeme si to na jednoduchém příkladě. Značka pro ztučnění může vypadat třeba takto:
<strong class="red">Totální slevy!</strong>
Vdíme zde tag <strong>, který tento HTML element otevírá. Spolu s uzavíracím tagem </strong> vymezují elementu hranice. Uvnitř je potom obsah elementu – v našem případě text Totální slevy! Pozor na to, že element tedy neznamená totéž, co tag. I když to méně znalí lidé občas zaměňují.
A zbývá nám už jen atribut class, který tomuto elementu přiřazuje třídu red. Ta slouží k vazbě na kaskádové styly (které například text obarví na červeno) či k snazší manipulaci pomocí JavaScriptu (který například může text elementu přepsat jiným textem).
E-book za mail
Získejte podrobný návod Jak na e-mail marketing (52 stran). Více informací.
Žádný spam, jen užitečný obsah. Newsletter posílám cca 8× ročně. Odhlásíte se kdykoliv.
Hierarchie HTML elementů
Kdyby v našem ukázkovém elementu bylo ještě slovo slevy vyznačeno kurzívou, došlo by k zanoření dalšího elementu do elementu nadřazeného. Vypadalo by to potom takto:
<strong class="red">Totální <em>slevy</em>!</strong>
Podobným způsobem vzniká tzv. DOM (objektový model dokumentu), jakýsi hierarchický strom, reprezentující celou HTML stránku, se kterým je případně možné dále pracovat s využitím technologie DHTML (například v něm elementy přehazovat apod.).
Druhy HTML elementů
Podle způsobu zobrazení
Elementy se v jazycích HTML a XHTML dělí na tři základní skupiny:
- Blokové elementy při svém zobrazení odsadí (odřádkují) ostatní obsah.
- Inline elementy nevytvářejí nové řádky.
- Nahrazované elementy bývají při zobrazení nahrazeny nějakým obsahem, např. obrázkem.
Podle párovosti
Jazyk HTML rozlišuje elementy s párovými a nepárovými tagy. Příkladem elementu s nepárovým tagem je třeba příkaz pro odsazení řádku <br>. Jde o element, který již nemá žádný obsah.
Jazyk XHTML toto již nerozlišoval, pouze přikazoval, že všechny elementy musí být uzavřené (správně tedy <br></br>.). U prázdných elementů XHTML také umožňuje zkrácený zápis (tedy <br />).
Podle sémantiky
Některé HTML elementy, kromě toho, že text nějak formátují, mu dávají i nějaký sémantický význam. Například výše zmíněný element <strong> text na displeji ztuční, ale zároveň říká, že daný text je důležitější, než okolní, neztučený text.
Podobně element <h1></h1>, který se používá pro hlavní nadpis stránky, daný text zásadně „vyvyšuje“ nad zbytkem textu. Tyto sémantické elementy jsou důležité pro crawlery vyhledávačů, kteří podle nich hodnotí obsah stránky. Ale také pro čtečky slepců.
Podle funkce
Podle funkce lze sdružit HTML elementy, týkající se například:
- formulářů
- tabulek
- seznamů
- rámů
- …
Pokud vás to zajímá více, seznam všech HTML elementů najdete na webu Dušana Janovského, jejich funkci tam vysvětluje velice srozumitelně.
Důležité HTML elementy
Pro nás marketéry jsou důležité hlavně následujcí HTML elemenety: