HTML je zkratka pro HyperText Markup Language, což znamená „značkovací jazyk pro hypertext“. Jednoduše řečeno, je to jazyk, kterým se tvoří webové stránky. Když si web představíte jako dům, HTML je jeho kostra – určuje, co bude na stránce a v jakém pořadí.
HTML používá tzv. značky, někdy také tagy, které vypadají například takto: <h1> pro hlavní nadpis nebo <p> pro odstavec textu. Tyto značky říkají prohlížeči, co je text, co je nadpis, kde má být obrázek nebo odkaz. Každá taková značka je element, tedy samostatná část webu.
Ve většině případů se jedná o párové značky, které mají svou otevírací a zavírací část. To znamená, že obsah je vždy uzavřen mezi začátkem a koncem značky, například text je vložen mezi úvodní a ukončovací tag (<p>Jsem text</p>). Některé značky mají i atributy, což jsou doplňující informace – například u obrázku <img src=’obrazek.jpg‘ alt=’Popis’> říká src, tedy odkud obrázek načíst, alt pak poskytuje jeho popis.
HTML určuje hlavně strukturu a pořadí obsahu, ne jeho vzhled. To znamená, že HTML říká, kde je nadpis, kde text, obrázek nebo odkaz, ale jak to bude vypadat, například barvy, písma nebo velikosti fontu, se řeší pomocí CSS. Díky HTML prohlížeč ví, jak stránku správně zobrazit, a návštěvník vidí obsah přesně tak, jak má být.
Takže HTML je jazyk, který nám umožňuje vytvořit webové stránky, odkazy, texty, obrázky a různé prvky obsahu. Jinými slovy je všechno, co na internetu vidíte, ve své základní podobě napsané právě pomocí HTML značek.
Jaké jsou nejčastější HTML tagy?
- <h1> – hlavní nadpis stránky, obvykle označuje titulek webu.
- <h2> až <h6> – podnadpisy různých úrovní, používají se pro strukturování obsahu.
- <p> – odstavec textu, základní blok pro textové informace.
- <div> – univerzální kontejner pro seskupování obsahu.
- <span> – menší kontejner pro textové úseky uvnitř odstavce.
- <a> – tag pro vytváření odkazů (např. mezi stránkami nebo na externími weby).
- <img> – tag pro vložení obrázku na stránku.
- <ul> – nečíslovaný seznam.
- <ol> – číslovaný seznam.
- <li> – položka v seznamu (pro „ul“ nebo „ol“).
- <html> – obaluje celý HTML dokument.
- <head> – sekce dokumentu obsahující metainformace (např. název stránky).
- <body> – hlavní obsah stránky, který je viditelný pro uživatele.
- <title> – název stránky, který se zobrazuje v záložce prohlížeče.
- <meta> – tagy pro metainformace, např. popis stránky nebo znaková sada.
- <strong> – tag pro zvýraznění důležitého textu (obvykle tučně).
- <em> – tag pro zdůraznění textu (obvykle kurzívou).
- <br> – tag pro zalomení jednoho řádku.
- <hr> – tag pro oddělení obsahu vodorovnou čarou.
- <header> – obsahuje úvodní část stránky (např. logo, navigaci).
- <nav> – navigační menu nebo odkazy.
- <main> – hlavní obsah stránky, který je nejdůležitější pro danou stránku.
- <section> – samostatná sekce nebo část obsahu.
- <article> – samostatný článek nebo obsah, který je nezávislý na ostatních.
- <footer> – zápatí stránky, obsahující informace o autorovi nebo kontakty.
Níže si ukážeme kousek HTML, ve kterém se pro ukázku pokusím použít co nejvíce tagů:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ukázková HTML stránka</title>
</head>
<body>
<header>
<h1>Vítejte na ukázkové stránce</h1>
<nav>
<a href="#">Domů</a> |
<a href="#">O nás</a> |
<a href="#">Kontakt</a>
</nav>
</header>
<main>
<section>
<h2>Úvodní sekce</h2>
<p>
Toto je <strong>důležitý text</strong> a toto je <em>zvýrazněný text</em>.
<br>
Text je rozdělen do odstavců.
</p>
</section>
<section>
<h2>Článek</h2>
<article>
<h3>Nadpis článku</h3>
<p>
Toto je obsah článku uvnitř tagu article.
<span>Tento text je ve span tagu.</span>
</p>
<img src="obrazek.jpg" alt="Ukázkový obrázek">
<hr>
<h4>Seznam</h4>
<ul>
<li>Položka seznamu</li>
<li>Další položka</li>
</ul>
<ol>
<li>První krok</li>
<li>Druhý krok</li>
</ol>
</article>
</section>
</main>
<footer>
<p>© 2025 Ukázkový web</p>
</footer>
</body>
</html>Výsledné HTML bude po otevření v prohlížeči vypadat následovně:
Jak a kde se HTML píše a upravuje
HTML kód se zapisuje a upravuje v souborech dané webové stránky nebo v administraci redakčního systému. Vývojáři ho často píší v kódových editorech, zatímco běžní uživatelé se s HTML setkávají například při úpravě obsahu v editorech samotného webu. Prohlížeč následně tento kód „přeloží“ do podoby, kterou vidí návštěvník.
Pokud si práci s HTML chcete vyzkoušet na vlastní pěst, doporučuji stáhnout bezplatný program Visual Studio Code.
