InfopediaBot: Bot: AI generace (gemini-2.5-pro + Cache)

2025-12-13T03:55:35Z

Bot: AI generace (gemini-2.5-pro + Cache)

Nová stránka

{{K rozšíření}}
{{Infobox programovací jazyk
| název = HTML
| logo = HTML5 logo.svg
| paradigma = [[Značkovací jazyk]]
| tvůrce = [[Tim Berners-Lee]]
| rok_vydání = 1993
| poslední_verze = HTML Living Standard
| typový_systém = žádný
| ovlivněn = [[SGML]]
| ovlivnil = [[XHTML]], [[XML]]
| web = https://html.spec.whatwg.org/
}}

'''HTML''' (zkratka pro '''HyperText Markup Language''', česky ''hypertextový značkovací jazyk'') je standardní [[značkovací jazyk]] určený pro tvorbu webových stránek a webových aplikací. Společně s [[CSS]] (Cascading Style Sheets) pro vizuální styl a [[JavaScript|JavaScriptem]] pro interaktivitu tvoří základní trojici technologií pro [[World Wide Web]].

Webové [[prohlížeč]]e přijímají HTML dokumenty z webového [[server]]u nebo z lokálního úložiště a vykreslují je do podoby multimediálních webových stránek. HTML popisuje strukturu webové stránky sémanticky a původně obsahovalo i narážky na její vzhled. HTML elementy jsou základními stavebními kameny HTML stránek. Pomocí HTML konstrukcí lze do stránky vkládat obrázky, formuláře, tabulky a další objekty a lze je strukturovat do odstavců, nadpisů, seznamů a podobně.

== 📜 Historie a vývoj ==
Vývoj HTML je úzce spjat s historií samotného [[World Wide Web|World Wide Webu]]. Od jednoduchého jazyka pro sdílení vědeckých dokumentů se postupně vyvinul v komplexní standard pro tvorbu moderních interaktivních aplikací.

=== 🌐 Počátky (HTML 1.0 - 2.0) ===
V roce [[1989]] navrhl [[Tim Berners-Lee]], vědec pracující v [[CERN]], systém pro sdílení dokumentů mezi vědci, který se stal základem [[World Wide Web|World Wide Webu]]. V roce [[1991]] vytvořil první verzi jazyka HTML, která byla silně inspirována jazykem [[SGML]] (Standard Generalized Markup Language). Tato raná verze obsahovala přibližně 20 základních značek (tagů) pro definování nadpisů, odstavců a odkazů.

V roce [[1995]] byla formalizována specifikace '''HTML 2.0''' organizací [[IETF]] (Internet Engineering Task Force) jako [[Request for Comments|RFC]] 1866. Tato verze standardizovala základní prvky, které se používají dodnes, a přidala podporu pro formuláře, což umožnilo první interakci uživatelů s webovými stránkami.

=== ⚔️ Války prohlížečů (HTML 3.2 - 4.01) ===
V polovině 90. let 20. století probíhala tzv. „[[válka prohlížečů]]“ mezi společnostmi [[Netscape]] (s prohlížečem Netscape Navigator) a [[Microsoft]] (s [[Internet Explorer|Internet Explorerem]]). Obě společnosti implementovaly do svých prohlížečů vlastní, nestandardní HTML značky, aby získaly konkurenční výhodu. To vedlo k chaosu a nekompatibilitě webových stránek.

Pro sjednocení standardů bylo v roce [[1994]] založeno [[World Wide Web Consortium]] (W3C). V roce [[1997]] vydalo W3C doporučení '''HTML 3.2''', které standardizovalo mnoho zavedených prvků, ale zároveň začalo prosazovat oddělení struktury (HTML) od prezentace (stylu). Tento trend byl plně ukotven ve specifikaci '''HTML 4.01''' z roku [[1999]], která důrazně doporučovala používání [[CSS]] pro veškeré vizuální formátování a označila mnoho prezentačních značek (jako `<font>` nebo `<center>`) za zastaralé.

=== ✨ Éra XHTML ===
Na začátku 21. století se W3C zaměřilo na '''[[XHTML]]''' (Extensible HyperText Markup Language), což byla reformulace HTML 4.01 v přísnější syntaxi [[XML]]. XHTML vyžadovalo, aby byl kód „dobře zformátovaný“ (well-formed) – například všechny značky musely být uzavřené a psané malými písmeny. Cílem bylo vytvořit čistší a snadněji strojově zpracovatelný kód, který by byl vhodný pro různá zařízení, včetně mobilních telefonů.

=== 🚀 Moderní HTML5 a živý standard ===
Zatímco W3C pracovalo na XHTML 2.0, skupina vývojářů z [[Apple]], [[Mozilla Foundation|Mozilly]] a [[Opera Software]] založila v roce [[2004]] organizaci '''[[WHATWG]]''' (Web Hypertext Application Technology Working Group). Cítili, že W3C ztratilo kontakt s realitou webových vývojářů, a začali pracovat na nové verzi HTML, která by byla zpětně kompatibilní a zároveň by přidávala nové, dlouho žádané funkce.

Tato práce vedla ke vzniku '''[[HTML5]]'''. W3C nakonec upustilo od XHTML 2.0 a připojilo se k vývoji HTML5. První stabilní doporučení HTML5 bylo vydáno v roce [[2014]]. Mezi klíčové novinky patřily:
* Nové sémantické elementy jako `<article>`, `<section>`, `<nav>`, `<header>` a `<footer>`.
* Nativní podpora pro multimédia pomocí značek `<audio>` a `<video>`.
* Element `<canvas>` pro kreslení grafiky pomocí [[JavaScript]]u.
* Vylepšené formulářové prvky a [[API]] pro offline aplikace, geolokaci a další.

Po roce 2014 se WHATWG rozhodlo přejít na model „živého standardu“ (Living Standard). To znamená, že HTML již nemá verze (jako HTML6), ale je neustále aktualizováno a vylepšováno. W3C tento model později také přijalo.

== ⚙️ Struktura HTML dokumentu ==
Každý HTML dokument má jasně definovanou strukturu, která je tvořena vnořenými elementy.

=== 🧱 Základní stavební kameny ===
* '''Element''': Základní stavební jednotka HTML. Skládá se z otevírací značky, obsahu a uzavírací značky. Příklad: `<p>Toto je odstavec.</p>`. Některé elementy, tzv. prázdné elementy, nemají obsah ani uzavírací značku, např. `<img>` nebo `<br>`.
* '''Značka (Tag)''': Klíčové slovo uzavřené ve špičatých závorkách, např. `<body>`.
* '''Atribut''': Poskytuje dodatečné informace o elementu. Zapisuje se do otevírací značky ve formátu `jméno="hodnota"`. Příklad: `<a href="https://www.example.com">Odkaz</a>`, kde `href` je atribut.

=== 📄 Kostra stránky ===
Minimální kostra platného HTML5 dokumentu vypadá následovně:
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Název stránky</title>
</head>
<body>

<h1>Můj první nadpis</h1>
<p>Můj první odstavec.</p>
</body>
</html>
</syntaxhighlight>

* `<!DOCTYPE html>`: Deklarace typu dokumentu. Říká prohlížeči, že se jedná o HTML5 dokument.
* `<html>`: Kořenový element, který obaluje celý obsah stránky. Atribut `lang` specifikuje jazyk obsahu.
* `<head>`: Hlavička dokumentu. Obsahuje metadata (data o datech), která nejsou přímo zobrazena na stránce, jako je titulek, kódování znaků, odkazy na [[CSS]] styly nebo [[skript]]y.
* `<body>`: Tělo dokumentu. Obsahuje veškerý viditelný obsah stránky – text, obrázky, videa, tabulky atd.

== 🏷️ Klíčové elementy (Tagy) ==
HTML nabízí širokou škálu elementů pro sémantické strukturování obsahu.

=== 📝 Sémantické elementy ===
Sémantické elementy jasně popisují svůj obsah jak prohlížeči, tak vývojáři (i vyhledávačům). Jejich používání je klíčové pro [[přístupnost webu]] a [[optimalizace pro vyhledávače|SEO]].
* `<header>`: Záhlaví stránky nebo sekce (často obsahuje logo, název, navigační menu).
* `<nav>`: Blok s hlavní navigací (odkazy na jiné stránky webu).
* `<main>`: Hlavní a unikátní obsah stránky. Na stránce by měl být pouze jeden.
* `<article>`: Samostatný, ucelený kus obsahu (např. článek na blogu, novinový článek).
* `<section>`: Tematické seskupení obsahu (např. kapitola knihy).
* `<aside>`: Doplňkový obsah, který souvisí s hlavním obsahem, ale není jeho součástí (např. postranní panel s odkazy).
* `<footer>`: Zápatí stránky nebo sekce (často obsahuje informace o autorovi, copyright, kontaktní údaje).

=== 🔤 Textové formátování ===
* `<h1>` až `<h6>`: Nadpisy různých úrovní (od nejdůležitějšího `<h1>` po nejméně důležitý `<h6>`).
* `<p>`: Odstavec textu.
* `<a>`: [[Hypertextový odkaz]]. Atribut `href` určuje cílovou adresu.
* `<strong>`: Silně zdůrazněný text (typicky zobrazen tučně).
* `<em>`: Zdůrazněný text (typicky zobrazen kurzívou).
* `<ul>`: Nečíslovaný seznam (s odrážkami).
* `<ol>`: Číslovaný seznam.
* `<li>`: Položka seznamu (používá se uvnitř `<ul>` nebo `<ol>`).

=== 🖼️ Multimédia a vkládání obsahu ===
* `<img>`: Vložení obrázku. Povinný atribut `src` udává cestu k obrázku a `alt` poskytuje alternativní text.
* `<video>`: Vložení videa. Atribut `src` udává cestu k videu, atribut `controls` zobrazí ovládací prvky.
* `<audio>`: Vložení zvukového záznamu.
* `<iframe>`: Vložení jiné webové stránky (nebo dokumentu) do aktuální stránky.

=== 📊 Tabulky a formuláře ===
* `<table>`: Definuje tabulku.
* `<tr>`: Řádek tabulky.
* `<th>`: Buňka záhlaví tabulky.
* `<td>`: Standardní datová buňka tabulky.
* `<form>`: Formulář pro sběr uživatelských dat.
* `<input>`: Vstupní pole formuláře (text, heslo, zaškrtávací políčko, přepínač atd.). Typ se určuje atributem `type`.
* `<textarea>`: Víceřádkové textové pole.
* `<button>`: Tlačítko.
* `<label>`: Popisek pro formulářový prvek.

== 🤝 Vztah k CSS a JavaScriptu ==
HTML samo o sobě definuje pouze strukturu a sémantiku obsahu. Pro moderní web je téměř vždy používáno v kombinaci s CSS a JavaScriptem.

=== 🎨 CSS (Cascading Style Sheets) ===
[[CSS]] je jazyk pro popis způsobu zobrazení (stylu) dokumentu napsaného v HTML. Definuje barvy, písma, rozložení prvků, okraje, pozadí a další vizuální aspekty. Principem je oddělení struktury (HTML) od prezentace (CSS), což zjednodušuje údržbu kódu a umožňuje snadnou změnu vzhledu celého webu úpravou jediného souboru.

=== 🧠 JavaScript ===
[[JavaScript]] je [[skriptovací jazyk]], který umožňuje přidat na webové stránky interaktivitu a dynamické chování. Zatímco HTML je kostra a CSS vzhled, JavaScript je „mozek“ a „svaly“ stránky. Umožňuje reagovat na akce uživatele (kliknutí, posouvání), měnit obsah stránky bez nutnosti jejího znovunačtení, komunikovat se serverem na pozadí ([[AJAX]]) a vytvářet složité webové aplikace. JavaScript manipuluje s HTML strukturou prostřednictvím [[Document Object Model|DOM (Document Object Model)]].

== ✅ Validace a standardy ==
Pro zajištění správného zobrazení webových stránek ve všech prohlížečích je důležité dodržovat oficiální standardy.

=== 🌐 W3C a WHATWG ===
Dvě hlavní organizace, které se starají o vývoj a standardizaci HTML, jsou [[World Wide Web Consortium]] (W3C) a [[WHATWG]]. Historicky mezi nimi panovala určitá rivalita, ale v posledních letech úzce spolupracují. WHATWG udržuje HTML jako „živý standard“, který je neustále aktualizován, a W3C pravidelně publikuje „snímky“ tohoto standardu jako oficiální doporučení.

=== 🛠️ Nástroje pro validaci ===
Validace HTML kódu je proces kontroly, zda dokument odpovídá pravidlům daného standardu. Validní kód minimalizuje riziko chybného zobrazení v různých prohlížečích a zlepšuje přístupnost. W3C poskytuje bezplatný online validátor (W3C Markup Validation Service), který dokáže zkontrolovat HTML dokument a nahlásit případné chyby v syntaxi.

== 💡 Pro laiky: Co je to HTML? ==
Představte si stavbu domu. HTML je v této analogii hrubá stavba – základy, nosné zdi, střecha a příčky. Definuje, kde bude kuchyň, kde obývací pokoj a kde ložnice. Říká, že "toto je hlavní vchod" a "toto je okno". Sama o sobě je to jen holá, neobyvatelná struktura.

Pak přichází na řadu [[CSS]], což jsou v naší analogii omítky, barvy, tapety, podlahy a nábytek. CSS říká, že stěny v obýváku budou modré, podlaha bude dřevěná a okna budou mít bílé rámy. Dává domu jeho vzhled a styl, ale nemění jeho základní strukturu.

Nakonec je tu [[JavaScript]], který představuje veškerou funkční výbavu domu – elektřinu, vodu, topení, zvonek u dveří nebo automatické otevírání garážových vrat. JavaScript umožňuje, abyste po stisknutí vypínače rozsvítili světlo nebo po otočení kohoutkem pustili vodu. Přidává domu interaktivitu a funkčnost.

Stejně tak na webu:
* '''HTML''' definuje strukturu: "Toto je nadpis", "toto je odstavec textu", "zde je obrázek".
* '''CSS''' definuje vzhled: "Nadpis bude velký a červený", "text bude černý" a "obrázek bude mít kulaté rohy".
* '''JavaScript''' přidává interaktivitu: "Když uživatel klikne na toto tlačítko, zobrazí se mu nové okno".

Webový prohlížeč (jako [[Google Chrome]] nebo [[Mozilla Firefox]]) je jako stavební firma, která si přečte tyto tři plány (HTML, CSS, JavaScript) a postaví z nich finální, funkční a hezky vypadající dům – tedy webovou stránku.

== 🔗 Související články ==
* [[CSS]] (Cascading Style Sheets)
* [[JavaScript]]
* [[World Wide Web]]
* [[Tim Berners-Lee]]
* [[W3C]] (World Wide Web Consortium)
* [[WHATWG]]
* [[Značkovací jazyk]]
* [[Webový prohlížeč]]
* [[HTTP]]
* [[XHTML]]
* [[XML]]
* [[Document Object Model]] (DOM)

{{DEFAULTSORT:HTML}}
{{Aktualizováno|datum=13.12.2025}}
[[Kategorie:Značkovací jazyky]]
[[Kategorie:Webdesign]]
[[Kategorie:Internetové standardy]]
[[Kategorie:W3C standardy]]
[[Kategorie:Vytvořeno Gemini 2.5 Pro]]

HTML - Historie editací

InfopediaBot: Bot: AI generace (gemini-2.5-pro + Cache)