Domů / Slovník pojmů / HTML

HTML

HTML: Základní stavební kámen webových stránek

HTML (HyperText Markup Language) je značkovací jazyk, který tvoří páteř každé webové stránky. Bez něj by internet, jak ho známe, neexistoval. Pokud se zajímáte o tvorbu webů, SEO nebo digitální marketing, porozumění HTML je základním předpokladem pro úspěch.

V tomto článku si vysvětlíme: ✅ Co je HTML a k čemu slouží ✅ Základní strukturu HTML dokumentu ✅ Nejdůležitější HTML značky (tagy) a jejich význam ✅ Jak HTML ovlivňuje SEO a přístupnost webu ✅ Praktické tipy pro psaní čistého a efektivního HTML

1. Co je HTML a jak funguje?

HTML není programovací jazyk (jako JavaScript nebo Python), ale značkovací jazyk, který definuje strukturu a obsah webové stránky.

Co HTML dělá?

  • Určuje, jaké prvky (text, obrázky, odkazy, tabulky) se na stránce zobrazí.
  • Organizuje obsah do logických celků (nadpisy, odstavce, seznamy).
  • Poskytuje informace prohlížeči, jak obsah zobrazit (např. že něco je hlavní nadpis nebo odstavec).
  • Spolu s CSS (vzhled) a JavaScriptem (interaktivita) tvoří trojici základních webových technologií.

Příklad: Jak vypadá HTML v praxi?

Předpokládejme, že chceme vytvořit jednoduchou stránku s nadpisem a odstavcem. V HTML by to vypadalo takto:

<!DOCTYPE html>
<html>
  <head>
    <title>Můj první web</title>
  </head>
  <body>
    <h1>Vítejte na mém webu!</h1>
    <p>Toto je první odstavec s textem.</p>
  </body>
</html>

Výsledek v prohlížeči: Ukázka HTML výstupu

2. Základní struktura HTML dokumentu

Každý HTML soubor má pevnou strukturu, kterou musí dodržovat. Zde jsou její hlavní části:

Část Popis Příklad
<!DOCTYPE html> Deklarace, že dokument je typu HTML5 (nejmodernější verze). <!DOCTYPE html>
<html> Kořenový element – obsahuje celý HTML dokument. <html lang="cs">
<head> Obsahuje metadata (informace pro prohlížeč a vyhledávače). <head><title>Název stránky</title></head>
<body> Obsahuje veškerý viditelný obsah stránky. <body><h1>Nadpis</h1></body>

Podrobnější rozbor struktury

A) <!DOCTYPE html>

  • Co dělá? Říká prohlížeči, že dokument je napsán v HTML5 (nejnovější standard).
  • Proč je důležité? Bez této deklarace může prohlížeč zobrazovat stránku nesprávně.

B) <html>

  • Co dělá? Obaluje celý HTML dokument.
  • Doporučení: Přidejte atribut lang="cs" pro lepší SEO a přístupnost: 
    <html lang="cs">

C) <head> – Metadata a nastavení stránky

  • Co obsahuje?
    • <title> – Název stránky (zobrazuje se na panelu prohlížeče a ve vyhledávačích).
    • <meta> – Dodatečné informace (např. kódování, popis pro SEO).
    • <link> – Odkazy na externí soubory (např. CSS styly).
    • <script> – JavaScript kód.

Příklad:

<head>
  <meta charset="UTF-8"> <!-- Kódování pro české znaky -->
  <meta name="description" content="Naučte se HTML od základů."> <!-- Popis pro SEO -->
  <title>HTML pro začátečníky</title>
  <link rel="stylesheet" href="styly.css"> <!-- Odkaz na CSS -->
</head>

D) <body> – Viditelný obsah stránky

  • Co obsahuje?
    • Nadpisy (<h1> až <h6>)
    • Odstavce (<p>)
    • Obrázky (<img>)
    • Odkazy (<a>)
    • Seznamy (<ul>, <ol>, <li>)
    • Tabulky (<table>)
    • Formuláře (<form>)

Příklad:

<body>
  <h1>Nadpis první úrovně</h1>
  <p>Toto je odstavec textu.</p>
  <a href="https://example.com">Odkaz na jiný web</a>
  <img src="obrazek.jpg" alt="Popis obrázku">
</body>

3. Nejdůležitější HTML značky (tagy) a jejich význam

HTML používá značky (tagy), které obalují obsah a definují jeho význam. Zde jsou nejpoužívanější a nejdůležitější:

Značka Popis Příklad
<h1> až <h6> Nadpisy (H1 je nejdůležitější, H6 nejméně). Důležité pro SEO! <h1>Hlavní nadpis</h1>
<p> Odstavec textu. <p>Toto je odstavec.</p>
<a> Odkaz (hypertextový link). <a href="https://example.com">Klikni sem</a>
<img> Obrázek. Vždy používejte alt text pro SEO a přístupnost! <img src="obrazek.jpg" alt="Popis obrázku">
<ul>, <ol>, <li> Seznamy (neuspořádaný, uspořádaný, položka seznamu). <ul><li>První položka</li></ul>
<div> Obecný kontejner (blokový element). <div>Obsah</div>
<span> Obecný kontejner (řádkový element). <span>Část textu</span>
<strong>, <em> Tučný text (důraz), kurzíva (zdůraznění). <strong>Důležitý text</strong>
<table>, <tr>, <td> Tabulka, řádek, buňka. <table><tr><td>Buňka</td></tr></table>
<form>, <input>, <button> Formulář, vstupní pole, tlačítko. <input type="text" placeholder="Zadejte jméno">

Semantické HTML značky (pro lepší SEO a přístupnost)

Moderní HTML5 přineslo semantické značky, které lépe popisují význam obsahu. Vyhledávače (Google, Seznam) je lépe chápou a zlepšují tak SEO.

Značka Popis Příklad
<header> Záhlaví stránky nebo sekce. <header><h1>Nadpis</h1></header>
<nav> Navigační menu. <nav><a href="/">Domů</a></nav>
<main> Hlavní obsah stránky. <main><p>Hlavní text</p></main>
<section> Logická sekce obsahu. <section><h2>Podnadpis</h2></section>
<article> Samostatný článek (např. blogový příspěvek). <article><h2>Název článku</h2></article>
<aside> Postranní obsah (např. sidebar). <aside><p>Doplňující informace</p></aside>
<footer> Patička stránky. <footer><p>Copyright 2024</p></footer>

Proč používat semantické HTML? ✔ Lepší SEO – Vyhledávače lépe rozumí struktuře stránky. ✔ Přístupnost – Usnadňuje čtení pro nevidomé (čtečky obrazovky). ✔ Čitelnější kód – Lépe se udržuje a upravuje.

4. Jak HTML ovlivňuje SEO?

HTML je základním faktorem pro SEO (optimalizaci pro vyhledávače). Správně strukturovaný HTML kód pomáhá vyhledávačům lépe porozumět obsahu a zvyšuje šanci na vyšší pozice ve výsledcích vyhledávání.

Klíčové SEO prvky v HTML

A) Nadpisy (<h1> až <h6>)

  • <h1> – Nejdůležitější nadpis (měl by být na každé stránce jen jeden).
  • Hierarchie nadpisů – Používejte logicky (<h2> pod <h1>, <h3> pod <h2> atd.).
  • Příklad špatně vs. správně:

❌ Špatně (bez hierarchie):

<h1>Název článku</h1>
<h3>Podnadpis</h3> <!-- Chybí H2 -->
<h4>Další podnadpis</h4>

✅ Správně (s hierarchií):

<h1>Název článku</h1>
<h2>Hlavní sekce</h2>
<h3>Podsekce</h3>

B) Meta tagy v <head>

  • <title> – Nejdůležitější SEO prvek! Zobrazuje se ve vyhledávačích. 
    <title>HTML pro začátečníky – Kompletní průvodce</title>
  • <meta name="description"> – Popis stránky (zobrazuje se ve vyhledávačích). 
    <meta name="description" content="Naučte se HTML od základů s praktickými příklady.">
  • <meta name="keywords"> – Dříve důležité, dnes nepoužívejte (vyhledávače je ignorují).

C) Alt text u obrázků (<img alt="...">)

  • Proč je důležitý?
    • Pomáhá vyhledávačům porozumět obsahu obrázku.
    • Zlepšuje přístupnost pro nevidomé (čtečky obrazovky).
    • Pokud se obrázek nenahradí, zobrazí se místo něj text.

✅ Správně:

<img src="pes.jpg" alt="Zlatý retrívr hrající si s míčem">

❌ Špatně (chybí alt text):

<img src="pes.jpg">

D) Strukturovaná data (Schema.org)

  • Co to je? Speciální značkování, které pomáhá vyhledávačům lépe pochopit obsah (např. recenze, události, produkty).
  • Příklad (JSON-LD): 
    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Co je HTML?",
  "author": {
    "@type": "Person",
    "name": "Michal Binka"
  },
  "datePublished": "2024-05-20"
}
</script>
  • Výhody:
    • Rich snippets (rozšířené výsledky ve vyhledávání).
    • Lepší viditelnost v Google.

E) Čistý a validní HTML kód

  • Proč je důležitý?
    • Vyhledávače lépe indexují stránky s čistým kódem.
    • Rychlejší načítání (menší soubory).
  • Jak zkontrolovat validitu?

5. Praktické tipy pro psaní kvalitního HTML

✅ Tip 1: Používejte správnou hierarchii nadpisů

  • Jedno <h1> na stránku (hlavní téma).
  • Logické uspořádání <h2>, <h3> (jako obsah knihy).

✅ Tip 2: Optimalizujte obrázky

  • Používejte alt text (popis obrázku).
  • Komprimujte obrázky (menší velikost = rychlejší načítání).

✅ Tip 3: Pište sémantický HTML

  • Používejte <header>, <main>, <footer> místo <div>.
  • Vyhledávače lépe rozumí struktuře.

✅ Tip 4: Minimalizujte zbytečný kód

  • Nepoužívejte inline styly (přesuňte je do CSS).
  • Omezte JavaScript v HTML (používejte externí soubory).

✅ Tip 5: Testujte přístupnost

  • Použijte nástroje jako WAVE pro kontrolu přístupnosti.
  • Dbejte na kontrast barev (text musí být čitelný).

6. Časté chyby v HTML a jak se jim vyhnout

Chyba Problém Řešení
Chybějící <!DOCTYPE html> Prohlížeč může zobrazovat stránku špatně. Vždy začínejte <!DOCTYPE html>.
Více <h1> na stránce Vyhledávače neví, který nadpis je hlavní. Používejte jen jedno <h1>.
Chybějící alt text u obrázků Špatné SEO a přístupnost. Vždy doplňujte alt="popis".
Použití <div> místo semantických tagů Vyhledávače hůře rozumí struktuře. Používejte <header>, <section>, <article>.
Nesprávné zavírání tagů Může způsobit chyby v zobrazování. Vždy uzavírejte tagy (<p>...</p>).
Příliš dlouhé odstavce Špatná čitelnost. Dělejte krátké odstavce (3-4 věty).

7. Závěr: Proč je HTML důležité?

HTML je základním stavebním kamenem webu. Bez něj by neexistovaly stránky, jak je známe. Správné použití HTML: ✔ Zlepšuje SEO (vyhledávače lépe rozumí obsahu). ✔ Zvyšuje přístupnost (pro nevidomé a uživatele s handicapem). ✔ Urychluje načítání (čistý kód = rychlejší web). ✔ Usnadňuje údržbu (lépe strukturovaný kód).

Co dělat dál?

Zdroje

Autor: Michal Binka Datum poslední úpravy: 20. září 2025

Co potřebujete najít?

Doporučujeme