Vágní, ale vzrušující

V březnu 1989 předložil třiatřicetiletý softwarový inženýr Tim Berners-Lee vedení CERNu dokument s nezáživným názvem Information Management: A Proposal. Jeho nadřízený Mike Sendall na něj připsal poznámku, která se stala legendární: „Vague, but exciting.“ Vágní, ale vzrušující. A hlavně mu dovolil, aby se do toho pustil.

Problém, který Berners-Lee řešil, byl velmi konkrétní a velmi nudný. CERN byl obří organizace s obrovskou fluktuací lidí. Vědci přijížděli na několik měsíců, přivezli si vlastní počítače s vlastními operačními systémy, vytvořili dokumentaci k experimentu a zase odjeli. Znalosti se rozpadaly do nekompatibilních ostrůvků. Berners-Lee chtěl systém, ve kterém by dokumenty ležely kdekoli, na libovolném stroji, a přesto na sebe mohly odkazovat.

Do Vánoc 1990 měl na jediném počítači NeXT hotové všechno podstatné: server, klienta pojmenovaného WorldWideWeb, protokol HTTP, adresní schéma URI a značkovací jazyk HTML. Šestého srpna 1991 pak poslal do diskusní skupiny alt.hypertext krátký příspěvek, kterým projekt představil veřejnosti a nabídl zdrojové kódy komukoli, kdo bude mít zájem. Od tohoto data se obvykle počítá začátek veřejného webu.

Poslední a možná nejdůležitější díl skládačky přišel 30. dubna 1993. CERN toho dne uvolnil technologii webu do volného užití. Bez licenčních poplatků, bez patentových nároků, bez jakýchkoli podmínek. Konkurenční systém Gopher se přibližně ve stejné době začal ohlížet po zpoplatnění a během několika let prakticky zmizel. Kdyby se tehdy v Ženevě rozhodli opačně, vypadal by dnešní internet nejspíš úplně jinak.

Necelé dvě desítky značek

Původní popis jazyka nesl název HTML Tags a vešel se na jednu obrazovku. Obsahoval nadpisy H1 až H6, odstavec P, adresu ADDRESS, definiční a odrážkové seznamy, doslovné bloky PLAINTEXT a LISTING, zvýraznění HP1, titulek dokumentu TITLE, indexovací značku ISINDEX, technickou pomůcku NEXTID a především kotvu A, tedy odkaz.

To bylo celé. Žádné IMG. Žádné TABLE. Žádné FORM, DIV ani SPAN. Žádné atributy pro barvu, žádné písmo, žádné rozvržení stránky.

Dokument z roku 1991 tedy vypadal zhruba takto:

<TITLE>Hypertext Terms</TITLE>
<H1>Hypertext Terms</H1>
<P>
Termíny používané v souvislosti s hypertextem.
Viz také <A HREF="WhatIs.html">co je hypertext</A>.
<DL>
<DT>Anchor
<DD>Konec spojení. Může být zdrojem nebo cílem.
<DT>Node
<DD>Jednotka informace.
</DL>
<ADDRESS>Tim BL</ADDRESS>
Code language: HTML, XML (xml)

Stojí za pozornost jeden detail, který dnešnímu vývojáři vytane hned: značky se nepárují tak úzkostlivě, jak jsme zvyklí. <P> původně nebyl kontejner pro odstavec, ale oddělovač mezi odstavci, tedy něco jako dnešní <hr>. Uzavírací </P> se do specifikace dostalo až později a dodnes je nepovinné.

Podstatnější je ale něco jiného. HTML nebylo navrženo jako nástroj pro grafický design. Bylo to schéma pro vědecké dokumenty. Značka nepopisovala vzhled, ale roli. <h1> neznamenalo „velké tučné písmo“, ale „nadpis nejvyšší úrovně“. Jak to bude vypadat, se rozhodovalo až na straně čtenáře: na terminálu, na grafické stanici NeXT, v řádkovém prohlížeči, později v textovém Lynxu.

Tahle myšlenka, tedy že autor dodá význam a klient formu, je základ, ke kterému se web posledních patnáct let pracně vrací.

Prohlížeč, který uměl i psát

Málo se ví, že první prohlížeč vůbec, ona aplikace WorldWideWeb na NeXTu, byl zároveň editorem. Uživatel mohl na stránce dvakrát kliknout, přepsat text, vytvořit odkaz a změnu uložit zpátky na server. Web měl být médium pro čtení i psaní současně.

Tuhle vlastnost jsme ztratili v roce 1993 spolu s příchodem prohlížeče Mosaic. Mosaic uměl obrázky, běžel na Windows i na Unixu a byl zdarma. Psát neuměl. Vyhrál drtivě. Web se na dvě desetiletí stal médiem, které naprostá většina lidí umí jen konzumovat, a schopnost publikovat se vrátila až se sociálními sítěmi, tentokrát ovšem uzavřená uvnitř cizích platforem. Berners-Lee tuhle odbočku dodnes považuje za jednu z největších škod, které se webu staly.

Obrázek, který rozhodl o všem

V únoru 1993 napsal do konference www-talk mladý programátor Marc Andreessen návrh: co takhle přidat značku IMG s atributem src, která by do textu vložila obrázek?

Následovala debata, jejíž záznam si dnes můžeme přečíst a mrazí z toho. Berners-Lee a další účastníci namítali, že řešení je příliš úzké. Proč zvlášť značka pro obrázek? Nebylo by lepší mít obecný mechanismus pro vložení libovolného typu obsahu, který by uměl vyjednat formát a nabídnout alternativu? Přesně takový mechanismus se o pár let později objevil pod jménem <object> a nikdy pořádně nezakořenil.

Andreessen totiž mezitím IMG implementoval v Mosaicu, vydal ho a bylo rozhodnuto. Byl to první a nejnázornější případ pravidla, které web ovládá dodnes: implementace poráží specifikaci. Kdo má prohlížeč a uživatele, ten určuje jazyk.

Léta bez CSS: tabulky, spacery a blikání

Roky 1994 až 1998 byly pro HTML obdobím rychlého růstu a stejně rychlé degenerace. Netscape Navigator a Internet Explorer spolu vedly válku, ve které byla nová značka konkurenční výhodou. Vznikly <font>, <center>, <blink> (Netscape), <marquee> (Microsoft), atributy bgcolor, background, vspace, framesety a celý slovník vizuálního formátování zapsaný přímo do struktury dokumentu.

Protože stále neexistoval žádný nástroj pro rozvržení stránky, designéři si poradili po svém: zneužili tabulky. Typická stránka z roku 1998 vypadala uvnitř zhruba takhle:

<table width="640" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="160" valign="top" bgcolor="#336699">
      <img src="spacer.gif" width="160" height="1" alt="">
      <font face="Arial" size="2" color="#FFFFFF">Menu</font>
    </td>
    <td width="480" valign="top">
      <font face="Arial" size="2">Obsah stránky</font>
    </td>
  </tr>
</table>
Code language: HTML, XML (xml)

Vnořené tabulky do třetí úrovně, průhledný jednopixelový spacer.gif roztahovaný na potřebné rozměry, veškerá typografie zapsaná do <font> u každého odstavce zvlášť. Změna barvy nadpisů znamenala projít sto souborů. Dokument přestal být dokumentem a stal se popisem mřížky.

Přitom lék existoval už tehdy. Håkon Wium Lie navrhl kaskádové styly v říjnu 1994, CSS1 se stalo doporučením W3C v prosinci 1996. Jenže mezi specifikací a použitelnou podporou v prohlížečích uplynulo dobrých pět let. Do té doby platilo, že HTML dělá všechno, a dělá to špatně.

Návrat k významu

Obrat přišel na přelomu tisíciletí a měl několik zdrojů.

V roce 1998 vznikl Web Standards Project, který tlačil na výrobce prohlížečů, aby konečně implementovali to, co je ve specifikacích. V lednu 2000 se objevilo XHTML 1.0, které HTML převléklo do XML syntaxe a přineslo důraz na formální správnost dokumentu. Zpětně se ukázalo, že přísné XML zpracování bylo pro web příliš křehké, ale disciplína, kterou tehdejší generaci vývojářů vnutilo, měla obrovský vliv.

A pak v roce 2003 spustil kanadský webdesignér Dave Shea projekt CSS Zen Garden. Jeden jediný HTML soubor, který nesměl nikdo měnit, a stovky vizuálně naprosto odlišných návrhů, které se lišily pouze připojeným stylem. Byl to nejpřesvědčivější argument pro oddělení obsahu od prezentace, jaký kdy kdo předvedl. Nebyl to text ani specifikace, ale galerie obrázků. Během několika let se tabulkový layout stal ostudou.

Poslední dějství proběhlo mezi lety 2004 a 2014. W3C tehdy pracovalo na XHTML 2.0, které mělo být čisté, elegantní a zpětně nekompatibilní. Skupina lidí z Opery, Mozilly a Applu s tím nesouhlasila, založila WHATWG a začala psát vlastní specifikaci vycházející z toho, co web skutečně dělá. Výsledkem bylo HTML5, které W3C v roce 2014 přijalo jako doporučení, zatímco XHTML 2.0 skončilo v koši.

HTML5 přineslo dvě věci. Za prvé sadu sémantických prvků (<article>, <section>, <nav>, <header>, <footer>, <main>, <figure>, <time>), které vrátily do jazyka význam. Za druhé, a to je z inženýrského hlediska ještě důležitější, poprvé v historii specifikovalo chování při chybě. Parsovací algoritmus HTML popisuje přesně, co má prohlížeč udělat s nekorektním vstupem. Díky tomu dnes všechny prohlížeče z rozbité stránky poskládají identický DOM.

Co jsme cestou ztratili

Web mezitím vyrostl do podoby, kterou by v roce 1991 nikdo nečekal, a to je dobře. Několik věcí se ale po cestě vytratilo a stojí za to je pojmenovat.

Nejnápadnější je zobrazení zdroje. Celá jedna generace vývojářů, autora tohoto textu nevyjímaje, se naučila HTML tím, že si otevřela zdroj cizí stránky a zkoumala, jak to udělali. Dnes vám Ctrl+U ukáže prázdný <div id="root"> a odkaz na main.a7f3c9d1.js. Web přestal být čitelný. Nástroje pro vývojáře to částečně nahrazují, ale ta bezprostřednost, kdy zdroj stránky byl zároveň návodem k jejímu vytvoření, je pryč.

Pak je tu odolnost. HTML a CSS jsou navrženy tak, aby chyba nebyla fatální. Neznámou značku prohlížeč ignoruje a zobrazí její obsah. Nesrozumitelnou deklaraci ve stylu přeskočí a použije zbytek. JavaScript se chová opačně: jedna neošetřená výjimka v inicializaci a uživatel zírá na bílou plochu. Když se rozvržení stránky, obsah textu i navigace odehrávají v běhovém prostředí, které selhává celé najednou, znamená to, že čtení článku závisí na tom, jestli se stáhl každý bajt každého skriptu včetně měřicího kódu třetí strany.

Souvisí s tím trvanlivost. Propagační stránka k filmu Space Jam z roku 1996 se dodnes v moderním prohlížeči otevře a funguje. Zkuste po deseti letech spustit npm install nad projektem z roku 2016. Statické HTML je jediný formát v našem oboru, u kterého máme empiricky ověřeno, že vydrží třicet let bez údržby.

A nakonec váha. Podle Web Almanacu projektu HTTP Archive za rok 2025 vážila mediánová domovská stránka 2,86 MB na desktopu a 2,56 MB na mobilu. Z toho připadalo na HTML 22 KB, na CSS 82 KB, na fonty 139 KB, na JavaScript 697 KB a na obrázky 1 059 KB. Vlastní obsah, kvůli kterému uživatel přišel, tvoří necelé jedno procento přenesených dat. Zbytek je infrastruktura.

Nejméně mocný jazyk vyhrává

Berners-Lee kdysi zformuloval princip, který W3C publikovalo jako Rule of Least Power: pro daný úkol zvolte nejméně mocný jazyk, který ho dokáže vyřešit.

Zní to divně, ale logika za tím je docela pevná. Čím je jazyk deklarativnější a méně obecný, tím lépe mu rozumí stroje. Deklarativní <button type="submit"> chápe prohlížeč, čtečka obrazovky, hlasový asistent, vyhledávací robot, režim čtení, překladač i archivační nástroj. Ke všemu funguje z klávesnice, zná stav :disabled a odešle formulář. Imperativní <div onclick="..."> chápe pouze JavaScript. Cokoli, co skutečně sdělíte v HTML, získáte zadarmo napříč ekosystémem. Cokoli sdělíte v JavaScriptu, musíte pro každý z těch kontextů dodat sami, a obvykle to neuděláte.

HTML, které jste možná přehlédli

Zatímco pozornost oboru směřovala k frameworkům, samotné HTML za posledních deset let podstatně zesílilo. Řada věcí, na které se v projektech běžně tahá knihovna, je dnes nativní.

Rozbalovací obsah bez jediného řádku skriptu:

<details>
  <summary>Podrobnosti k fakturaci</summary>
  <p>Splatnost je 14 dní od vystavení dokladu.</p>
</details>
Code language: HTML, XML (xml)

Modální dialog s korektní správou fokusu, klávesou Esc a ztmavením pozadí. Otevření zatím vyžaduje jedno volání showModal(), o všechno ostatní se postará prohlížeč:

<dialog id="potvrzeni">
  <form method="dialog">
    <p>Opravdu chcete záznam smazat?</p>
    <button value="ne">Zrušit</button>
    <button value="ano">Smazat</button>
  </form>
</dialog>
Code language: HTML, XML (xml)

Vyskakovací panely přes atribut popover, kde propojení spouštěče a obsahu obstará samo HTML:

<button popovertarget="napoveda">?</button>
<div id="napoveda" popover>
  <p>Kód najdete na zadní straně karty.</p>
</div>
Code language: HTML, XML (xml)

Validace formulářů bez knihovny, tedy required, type="email", pattern, min, max, step, k tomu nabídka hodnot přes <datalist> a v CSS pseudotřída :user-invalid, která na rozdíl od :invalid nekřičí na uživatele dřív, než stihne cokoli napsat:

<label for="mail">E-mail</label>
<input id="mail" name="mail" type="email" required
       autocomplete="email">
Code language: HTML, XML (xml)

Obrázky s loading="lazy", decoding="async", srcset, sizes, fetchpriority a elementem <picture> pro volbu formátu. Celá kategorie lazy-loading knihoven se stala zbytečnou.

K tomu <progress>, <meter>, <output>, <search>, atribut inert pro vyřazení části stránky z interakce nebo hidden="until-found" pro obsah, který se rozbalí při vyhledávání v textu.

Jedna poznámka na okraj. Podpora se u nejnovějších přírůstků liší prohlížeč od prohlížeče a některé z těchto prvků mají svá specifika ve stylování, takže před nasazením se vyplatí ověřit aktuální stav v Can I Use nebo Baseline. Zásadní rozdíl oproti minulosti je ale v tom, že se dnes ptáme, jestli už tu funkci můžeme použít nativně, ne jestli pro ni existuje slušný plugin.

Hypermédia se vracejí

Druhá vlna návratu k HTML nepřichází ze specifikací, ale z architektury.

Knihovna htmx Carsona Grosse staví na jednoduché myšlence: pokud odkaz umí vyměnit celou stránku, proč by libovolný prvek neuměl vyměnit libovolnou část stránky? Server nadále odesílá HTML, ne JSON, a klient nepotřebuje znát datový model.

<button hx-post="/kosik/pridat/42"
        hx-target="#kosik"
        hx-swap="outerHTML">
  Do košíku
</button>
Code language: HTML, XML (xml)

Žádný stav na klientovi, žádná serializace, žádná duplicitní šablona. Ke stejnému závěru došly nezávisle na sobě další projekty: Hotwire a Turbo v ekosystému Ruby on Rails, Unpoly, Phoenix LiveView v Elixiru, částečně i Alpine.js. Anglicky se tomu říká HTML over the wire a jde vlastně o návrat k principu HATEOAS, který byl ve Fieldingově disertaci o REST od začátku a který jsme kolektivně přeskočili.

Podobným směrem tlačí i moderní generátory a metaframeworky. Astro standardně posílá nulový JavaScript a interaktivitu přidává jen na ostrůvky, kde je opravdu potřeba. Serverové komponenty v Reactu vracejí značnou část renderování zpátky na server. Ve všech těchto případech se HTML vrací do role jednotky přenosu, místo aby bylo vedlejším produktem běhu aplikace.

Malý web

Souběžně existuje kulturní hnutí, které jde ještě dál. Kluby jako 512KB Club a 1MB Club sdružují weby, jejichž celková velikost nepřekročí danou hranici. Neocities navazuje na tradici GeoCities a hostuje desetitisíce osobních stránek psaných ručně v HTML. Protokol Gemini z roku 2019 nabízí radikálně zjednodušenou alternativu k webu, kde neexistuje styl ani skript. Manifest brutalistického webdesignu odmítá všechno, co není obsah. K tomu patří renesance RSS, hnutí IndieWeb a návrat osobních blogů mimo cizí platformy.

Idealizovat se to nedá, jde o subkulturu a většina těchto stránek by v komerčním provozu neobstála. Tlak, který vytváří, je ale zdravý a některé jeho argumenty se do hlavního proudu dostávají překvapivě rychle.

Jak dnes napsat stránku jen v HTML

Zkusme praktické cvičení. Napište stránku, která je plně použitelná s vypnutým JavaScriptem i bez jediného řádku CSS. Teprve pak začněte přidávat.

<!doctype html>
<html lang="cs">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nadpis stránky | Název webu</title>
  <meta name="description" content="Krátký popis obsahu.">
</head>
<body>
  <header>
    <nav aria-label="Hlavní navigace">
      <a href="/">Domů</a>
      <a href="/clanky/">Články</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Nadpis stránky</h1>
      <p>První odstavec textu.</p>
      <h2>Podnadpis</h2>
      <p>Další odstavec s <a href="/zdroj/">odkazem</a>.</p>
    </article>
  </main>
  <footer>
    <p>© 2026 Autor</p>
  </footer>
</body>
</html>
Code language: HTML, XML (xml)

Tenhle dokument se otevře v jakémkoli prohlížeči, přečte ho čtečka obrazovky, správně ho vyhodnotí vyhledávač, zvládne ho režim čtení i překladač a bude fungovat i za dvacet let. Váží něco přes jeden kilobajt.

Základní pravidla, která za tím stojí, se dají shrnout do pěti bodů:

• lang a charset patří na každou stránku. Bez nich selhává dělení slov, výslovnost ve čtečkách i strojový překlad.
• Nadpisy tvoří strukturu, nikoli velikost písma. Po h2 nesmí následovat h4.
• Každý ovládací prvek formuláře potřebuje svůj <label>. Atribut placeholder popisek nenahradí.
• Na cokoli, co provádí akci, patří <button>. Na cokoli, co vede jinam, <a href>.
• Atribut alt popisuje funkci obrázku v kontextu, ne jeho vzhled. U čistě dekorativního obrázku patří alt="".

Výchozí styly prohlížeče přitom nejsou zdaleka tak ošklivé, jak se traduje. Jejich hlavní vada je nekonečně dlouhý řádek na širokém monitoru. Tu spraví pár deklarací:

body {
  max-width: 70ch;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.6;
  font-family: system-ui, sans-serif;
}
Code language: CSS (css)

Pět řádků CSS a máte dokument, který se čte lépe než většina toho, co dnes potkáte na webu.

Kdy to nestačí

Bylo by hloupé skončit tvrzením, že máme všichni psát statické HTML. Editor obrázků, tabulkový procesor, mapová aplikace, nástroj pro spolupráci v reálném čase nebo cokoli s netriviálním klientským stavem prostě potřebuje JavaScript a žádná nostalgie na tom nic nezmění. Frameworky vznikly z reálné potřeby a řeší reálné problémy.

Otázka není v tom, jestli JavaScript používat, ale co bude výchozí volba. Jestli začínáme dokumentem a interaktivitu přidáváme tam, kde ji potřebujeme, nebo jestli začínáme aplikací a text do ní dodatečně vkládáme. První přístup dává stránku, která funguje vždy a někdy funguje lépe. Druhý dává stránku, která funguje, když všechno vyjde.

Pro drtivou většinu toho, co na webu skutečně je, tedy pro články, dokumentaci, katalogy, formuláře, firemní prezentace a e-shopy, platí stejná odpověď jako v roce 1991.

Závěr

Web vznikl proto, aby si fyzici mohli předávat dokumenty mezi nekompatibilními počítači. Za pětatřicet let z něj vyrostla nejrozšířenější aplikační platforma v dějinách a nikdo soudný by si nepřál vrátit se do doby spacer.gif a <blink>.

Vrátit se ale můžeme k něčemu jinému než k technologii, totiž k původnímu předpokladu. Že dokument nese význam, ne vzhled. Že klient rozhodne, jak to zobrazí. Že chybějící kus nemá zbořit celek. Že nejmenší možný nástroj je ten nejlepší.

Začátek internetu není muzejní exponát, ale funkční základní vrstva. Stavěli jsme na ní tak dlouho a tak vysoko, až jsme přestali vidět, co všechno sama unese. Zkuste si otevřít vlastní stránku a vypnout v prohlížeči JavaScript. To, co zbyde, o vašem projektu leccos napoví.