Hypertextový značkovací jazyk (HTML) je značkovací jazyk na vytváranie webových stránok. Webové stránky sa zvyčajne zobrazujú vo webovom prehliadači. Môžu obsahovať písmo, odkazy, obrázky a dokonca aj zvuk a video. Jazyk HTML sa používa na označenie a opis každého z týchto druhov obsahu, aby ich webový prehliadač mohol správne zobraziť. Jazyk HTML sa môže použiť aj na pridanie metainformácií na webovú stránku. Metainformácie sa vo webových prehliadačoch zvyčajne nezobrazujú a sú to údaje o webovej stránke, napr. meno osoby, ktorá stránku vytvorila. Kaskádové štýly (CSS) sa používajú na vytváranie štýlov prvkov HTML, zatiaľ čo JavaScript sa používa na manipuláciu s prvkami HTML a štýlmi CSS.

HTML vytvorilo konzorcium World Wide Web (W3C). Existuje niekoľko verzií jazyka HTML. Od septembra 2018 sa aktuálny štandard HTML nazýva HTML 5 a jeho konkrétna verzia je 5.2.

Krátka história

HTML vzniklo na začiatku 90. rokov vďaka prácam Tima Bernersa-Leeho a jeho kolegov. Pôvodne šlo o jednoduchý spôsob, ako označiť štruktúru dokumentov a prepojiť ich hypertextovými odkazmi. Postupne sa jazyk rozvíjal a pribúdali nové prvky, štandardy a odporúčania. Dlhodobo nad vývojom a špecifikáciami dohliada konzorcium World Wide Web, v súčasnosti však existuje aj tzv. „living standard“ spravovaný skupinou WHATWG, ktorá priebežne aktualizuje špecifikáciu HTML. HTML5 prinieslo významné zmeny: semantické prvky, natívnu podporu multimédií (<audio>, <video>), <canvas> pre kreslenie, lepšiu podporu formulárov a API pre offline a úložisko.

Základná štruktúra HTML dokumentu

Každý HTML súbor má základnú kostru, ktorá zabezpečuje správne zobrazenie vo webovom prehliadači. Najjednoduchší platný dokument vyzerá takto:

<!DOCTYPE html> <html lang="sk">   <head>     <meta charset="utf-8">     <title>Názov stránky</title>   </head>   <body>     <p>Obsah stránky</p>   </body> </html>

Vysvetlenie:

  • <!DOCTYPE html> – informuje prehliadač, že ide o dokument HTML5.
  • <html> – koreňový element celej stránky; atribút lang určuje jazyk obsahu.
  • <head> – obsahuje metainformácie, kódovanie, názov stránky, prepojenia na štýly a ďalšie zdroje.
  • <body> – obsah viditeľný používateľovi: texty, odkazy, obrázky, formuláre atď.

Bežné HTML prvky

  • Formátovanie textu: <p>, <h1>–<h6>, <strong>, <em>, <span>, <div>.
  • Odkazy a navigácia: <a href="..."> – vytvára hypertextové odkazy.
  • Obrázky: <img src="..." alt="..."> – vždy použiť atribút alt pre prístupnosť.
  • Multimédiá: <audio>, <video> – prehrávanie zvuku a videa priamo v prehliadači.
  • Formuláre: <form>, <input>, <textarea>, <select> – na zadávanie údajov používateľmi.
  • Semantické bloky: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> – uľahčujú čítanie dokumentu pre ľudí aj vyhľadávače.
  • Tabuľky: <table>, <tr>, <td>, <th> – na štruktúrované dáta (s opatrnosťou pokiaľ ide o responzívnosť).

HTML5 a moderné prvky

HTML5 sa zameralo na zlepšenie semantiky, multimédií a mobilnej podpory. Medzi dôležité prínosy patria:

  • Semantické elementy pre lepšie zrozumiteľné dokumenty.
  • Natívna podpora <audio> a <video> bez potreby pluginov.
  • API ako localStorage, Canvas, geolokácia, WebSockets a ďalšie, ktoré rozširujú možnosti webových aplikácií.
  • Jednoduché nastavenie responzívneho zobrazenia cez <meta name="viewport"> a kombináciu s CSS.

Metaúdaje, kódovanie a SEO

  • Kódovanie: používanie UTF‑8 zabezpečuje správne zobrazenie medzinárodných znakov (<meta charset="utf-8">).
  • Meta tagy: <meta name="description">, <meta name="viewport"> a ďalšie pomáhajú prehliadačom a vyhľadávačom.
  • SEO: správne použitie nadpisov (<h1>), alt textov pri obrázkoch a semantických značiek zlepšuje indexovanie v vyhľadávačoch.

Prístupnosť a najlepšie postupy

  • Zabezpečte alternatívne texty pre obrázky a logické zoradenie obsahu pomocou nadpisov a landmark elementov.
  • Používajte platnú štruktúru dokumentu a validujte kód (napr. W3C validator), aby ste minimalizovali chyby v rôznych prehliadačoch.
  • Minimalizujte použitie inline štýlov a skriptov; oddelte CSS a JavaScript do externých súborov pre lepšiu údržbu.

Súbory, MIME typy a publikovanie

HTML dokumenty sa zvyčajne ukladajú s príponou .html alebo .htm a server ich odovzdáva s MIME typom text/html. Pri nasadzovaní dbajte na správne hlavičky, kompresiu (gzip), caching a zabezpečenie (HTTPS).

Zdroje a nástroje

  • Editor kódu: napr. VS Code, Sublime Text, alebo jednoduchý textový editor.
  • Nástroje: prehliadačové developer tools (inspektor, konzola), validátory a lintery pre HTML/CSS/JS.
  • Štandardy: oficiálne špecifikácie W3C a WHATWG, dokumentácia a tutoriály pre HTML5.

HTML je základným stavebným kameňom webu. Jeho kombinácia s CSS a JavaScriptom umožňuje vytvárať statické stránky aj komplexné interaktívne webové aplikácie. Dodržiavaním semantiky, prístupnosti a moderných postupov zabezpečíte, že vaše stránky budú použiteľné, rýchle a dobre indexovateľné.