HTML – definícia, história a základy tvorby webových stránok

Objavte HTML: definícia, história a základy tvorby webových stránok. Naučte sa HTML5, tagy, CSS a JavaScript pre moderné, responzívne a funkčné weby.

Autor: Leandro Alegsa

20-03-2026 21:30

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é.

Značky

Jazyk HTML používa špeciálne časti programovacieho jazyka nazývané "značky", ktoré umožňujú prehliadaču zistiť, ako má webová stránka vyzerať. Značky sa zvyčajne používajú vo dvojiciach: úvodná značka definuje začiatok bloku obsahu a uzatváracia značka definuje koniec tohto bloku obsahu. Existuje mnoho rôznych druhov značiek a každá z nich má iný účel. Príklady značiek nájdete v časti Základné značky HTML nižšie.

Niektoré značky fungujú len v určitých prehliadačoch. Napríklad tag <menuitem>, ktorý sa používa na to, aby sa niečo zobrazilo, keď človek stlačí pravé tlačidlo myši, funguje len v prehliadači Mozilla Firefox. Ostatné prehliadače túto značku jednoducho ignorujú a nápis zobrazujú normálne. Mnohí tvorcovia webových stránok sa vyhýbajú používaniu týchto "neštandardných" značiek, pretože chcú, aby ich stránky vyzerali vo všetkých prehliadačoch rovnako.

Príklad

Tu je príklad stránky v jazyku HTML.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Toto je názov stránky </title> 5 </head> 6 < body> 7 < p> Toto je odsek. </p> 8 < a href="https://www.domain.com"> Toto je odkaz. </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

Jednoduchá stránka HTML by vyzerala takto: jeden odsek s textom "Hello world! ".

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Ahoj! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Základné značky HTML

Názov štítku	Názov	Funkcia	Príklad kódu
`<!DOCTYPE>`	Doktorový typ	Definuje typ dokumentu	<!DOCTYPE html>
`<html>`	HTML	Definuje dokument HTML a spustí dokument HTML.	< html> Celý kód</html>
`<head>`	Hlava	Obsahuje akýkoľvek kód, ktorý sa nepoužíva na zobrazenie prvkov na webovej stránke.	< head></head>
`<title>`	Názov	Definuje názov webovej stránky (zobrazený na karte) a zadáva sa v rámci `<head>`	< title> Webová stránka</title>
`<body>`	Telo	Obsahuje viditeľné prvky webovej stránky (a obsahuje odsek a ďalšie)	<body> Html značky</body>
`<h1>` až `<h6>`	Nadpisy	Nadpisy rôznych veľkostí (`<h1>` je najväčší)	< h1> Nadpis</h1>
	Odsek	Definuje odsek textu	< p> TEXT</p>
	Kotva	Vytvára aktívne odkazy na iné webové stránky	< a href="www.domain.com"> Navštívte našu stránku</a>
`<img>`	Obrázok	Zobrazí obrázok na stránke	< img src="ImageUrl" alt="Text zobrazený, ak obrázok nie je k dispozícii">
`<br>`	Prestávka	Vloží jeden zlom riadku	Text < br> Text
`<center>`	Stredisko	Presunie obsah do stredu stránky	< center> Kód</center>
`<script>`	Skript	Vytvorí skript na webovej stránke, zvyčajne napísaný v jazyku JavaScript.	< script> document. write("Hello World!")</script>

Používanie značiek HTML

Tvorba webovej stránky

Tvorba webovej stránky je jednoduchá.Všetko, čo si musíte zapamätať, sú značky a poradie na vytvorenie webovej stránky.

Najskôr musíte nájsť miesto na zadanie značiek HTML (odporúčam Poznámkový blok) a zapísať značky.

Tu je ďalší príklad stránky so značkou HTML.

<html>

<head>

</head>

<body>

<p>

Toto je stránka so značkou HTML.

</p>

Podľa: *Vložte meno*

</footer>

</html>

Po dokončení uložte tento súbor v tomto formáte: helloworld.htm

(nepíšte medzery)

A hotovo! Po uložení do počítača sa po stlačení odošle na vašu webovú stránku v Googli!

Prehľadať