Jan Štráfelda - Průvodce online -projektem
Praha/Mělník  |  776 678 044  |  jan@strafelda.cz  |  Pošlete mi poptávku

HTML element

Jako elementy označují frontendisté a kodéři různě velké kousky dokumentu psaného v jazyce HTML či dnes již zastaralého XHTML. Jednotlivé elementy si můžete představit jako značky, které mají určitý význam nebo text nějak formátují.

HTML elementy se skládají z tzv. tagů a v některých případech i z doplňujících atributů a textového obsahu. Takovým obsahem mohou být i další HTML elementy.

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 leement 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).

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:

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 roboty 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:

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 markétéry jsou důležité hlavně následujcí HTML elemenety:

Zaujal jsem vás? Přihlašte se do mailingu a mé další texty už vám neuniknou:

 

Zprávy posílám cca 8 × ročně. Odhlásit se můžete kdykoliv. Více informací.



Nezávazná poptávka

  (volitelné)