HTML

Rozbalit box

Obsah boxu

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 JavaScriptem pro interaktivitu tvoří základní trojici technologií pro World Wide Web.

Webové prohlížeče přijímají HTML dokumenty z webového serveru 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 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 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 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 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 `` nebo `

`) 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, 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í JavaScriptu.
• 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: `

  Toto je odstavec.

  `. Některé elementy, tzv. prázdné elementy, nemají obsah ani uzavírací značku, např. `<img>` nebo `
  `.
• 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ě:

<!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>
    <!-- Obsah stránky zde -->
    <h1>Můj první nadpis</h1>
    <p>Můj první odstavec.</p>
</body>
</html>

• `<!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 skripty.
• `<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 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í

• `

  ` až `

  `: Nadpisy různých úrovní (od nejdůležitějšího `

  ` po nejméně důležitý `

  `).

• `

  `: Odstavec textu.

• `<a>`: Hypertextový odkaz. Atribut `href` určuje cílovou adresu.
• ``: Silně zdůrazněný text (typicky zobrazen tučně).
• ``: Zdůrazněný text (typicky zobrazen kurzívou).
• `
  `: Nečíslovaný seznam (s odrážkami).
  • `
    `: Číslovaný seznam.
    1. `
    2. `: Položka seznamu (používá se uvnitř `
       ` nebo `
       `).

       🖼️ 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

       • ``: Definuje tabulku.
       • `
       `: Řádek tabulky.
       • `

       `: Buňka záhlaví tabulky. `

       `: 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 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) Šablona:Aktualizováno