Autorem původního HTML, které vzniklo již počátkem devadesátých let minulého století, je Tim Berners-Lee. O standardy jazyka se stará W3C, na jejichž webu nalezneme i všechny jeho standardy. V současné době je již běžně používaná HTML5. Paralelně, i když původně zamýšlen jako nástupce HTML, je používán i jazyk XHTML, který je přísnější a vychází z pravidel jazyka XML. Pomocí jazyka HTML a jednoduchého neformátovaného textu jsme schopni vytvořit strukturovaný formátovaný multimediální dokument, kterému říkáme hypertext. To vše je za pomocí speciálních značek (tag), které jsou základním stavebním prvkem HTML dokumentu. Značky můžeme do sebe vnořovat a tím vytvářet složité hierarchické struktury. Každá značka má svůj význam a určené použití. Značky můžeme upřesňovat vkládáním atributů. Browser pozná, že se jedná o značku tím, že je obalena ve špičatých závorkách. Značky jsou obvykle párové, tedy mají svůj začátek a konec, který se pozná tak, že před názvem značky je umístěno lomítko. Obsah obalený značkou přejímá vlastnost značky. Tedy například text mezi značkami „b“ bude tučný a bude i patřičně tučně v prohlížeči zobrazen.

Příklad obecného zápisu značky:

Konkrétní příklady pro nadpis nejvyšší úrovně a následující odstavec, ve kterém je slovo „odstavce“ zvýrazněno tučně:

Atributy značky se používají zejména u odkazů a obrázků, kde musíme specifikovat cíl odkazu a zdrojový soubor obrázku:

Pak existují atributy „id“ a „class“, které je možné vložit do každé značky a tím jej jednoznačně rozlišit od ostatních. To se hodí například pro účely JavaScriptu nebo CSS. Význam je víceméně identický, rozdíl mezi nimi je však ten, že hodnota u atributu „id“ musí být v rámci dokumentu unikátní. Hodnoty „class“ se mohou stejné opakovat bez omezení.

Základní struktura prázdného HTML dokumentu vypadá takto:

Vidíme, že na prvním řádku je určení typu dokumentu vyhovující specifikaci pro HTML 5. Hlavní obalová značka dokumentu je „html“, která má dva potomky „head“ a „body“. Informace v hlavičce jsou určené obvykle pro prohlížeče a vyhledávací boty. Najdeme tam například určení kódování, informace o autorovi, popisek, titulek, meta data pro sociální sítě, favicon a další.

Příklad vyplněné hlavičky:

Tělo pak obsahuje vše, co se zobrazuje v hlavním okně prohlížeče. Protože HTML obsah generujeme pomocí PHP, je dobré jej znát. Uvedeme si několik základních značek. Ve výčtu se budou objevovat pojmy jako párová značka, bloková značka atp. Pojďme si je nejprve vysvětlit.

Párová značka je značkou obalovací, která má svůj začátek a konec označený lomítkem. Obsah uvnitř této značky má vlastnost této značky. Příkladem je třeba titulek (<title></title>), odstavec (<p></p>), nadpis (<h2></h2>)… Kdežto značka nepárová nic neobaluje a nemá tedy svou koncovou část. Obvykle slouží jen pro vložení nějaké informace na patřičné místo webu. Příkladem nepárové značky je pak meta (<meta>), link (<link>), obrázek (<img>), odřádkování (<br>)… I nepárové značky můžeme uzavřít: <br />.

Značky dělíme dle typu formátování textu na logické a fyzické. Logické formátování vymezuje význam textu obaleného patřičnou značkou. V textu tak určujeme, co je běžný odstavec, co nadpis, co je důležitější zvýrazněný text, co citace, co zkratka a podobně. U fyzického formátování neurčujeme význam, ale jen vzhled. Můžeme tak určit například tučné písmo, kurzívu, podtržení, horní i dolní index… Například ale u tučného písma neříkáme nic o tom, že je důležitější než jiný text. Browsery mají i pro logické formátování předdefinovaný styl zobrazení, a proto bude nadpis zobrazen výrazněji než běžný text. Celkově si ale vzhled nastavujeme v CSS.

Z hlediska typu zobrazení dělíme značky na blokové a řádkové. To lze v CSS změnit a těchto druhů zobrazení je i více. HTML značky mají ale nastaven nějaký výchozí typ zobrazení. Blokový znamená, že obsah značky se zobrazí jako samostatný obdélník na webové stránce v plné šíři. Řádkové zobrazení chápejme jako text, který může začínat v půlce odstavce a pokračovat přes další tři řádky. Další text pak následuje hned za ním, pokračuje do konce řádku atp.

Příklad odrážkového seznamu:

Příklad odkazu na externí web a lokální obrázek:

Příklad:

Příklad jednoduché tabulky:

Příklad formuláře:

HTML 5 značky

Nejsou zde uvedeny všechny značky. Studenti by si měli případné další dohledat a alespoň vědět, že existují. Nesmíme také zapomenout, že odřádkování ve zdrojovém kódu bude prohlížeč ignorovat a z několika po sobě jdoucích mezer udělá mezeru jednu.

Zdrojový kód:

Výsledek v okně prohlížeče:

Pokud přeci jen toto potřebujeme, máme možnost díky značkám <pre></pre>, <br> a HTML entitě &nbsp;, která je popsána níže.

DOM je objektově orientovaná reprezentace HTML dokumentu. Umožňuje přístup k jednotlivým objektům obsahu dokumentu. Můžeme tak upravovat jak obsah, tak strukturu dokumentu. DOM má hierarchickou (stromovou) strukturu, která dokument reprezentuje. Mějme jednoduchou webovou stránku:

Pak její DOM bude:

Díky tomuto objektovému modelu můžeme lépe pochopit strukturu dokumentu a různá označení typu potomek elementu, přímý potomek elementu, rodič, element na stejné úrovni, element za elementem a podobně.

Protože jsou některé znaky rezervované pro účely jazyka a některé znaky nejsou běžně na klávesnici, jsou zavedeny HTML entity. Jedná se o speciální řetězce začínající symbolem ampersand (&) a končící středníkem (;). Mezi těmito znaky je název nebo kód entity.