Každá webová stránka, kterou otevřeš, je obyčejný textový soubor. Prohlížeč ho přečte a podle značek v něm pozná, co je nadpis, co odstavec a co menu.
Tím jazykem značek je HTML. Kdo ho umí, postaví kostru jakéhokoli webu. Na ni se pak navlékne vzhled (CSS) a chování (JavaScript).
<h1>Rozvrh</h1> říká: „Rozvrh“ je hlavní nadpis.<p> něco otevírá, koncová </p> (s lomítkem) to zavírá.<p> a </p><p>Ahoj</p> je element odstavce. <br> je prázdný element (zalomení řádku).název="hodnota".<html lang="cs"> – atribut lang říká, že stránka je česky.HTML dokument je jako dům. Na začátku je nápis „tady stojí dům podle současných norem“. Pak celý dům, v něm technická místnost, kam návštěva nechodí, a obytné patro, které všichni vidí.
| Dům | HTML | Co tam patří |
|---|---|---|
| nápis o normě | <!DOCTYPE html> | prohlížeč ví, že jde o HTML5 |
| celý dům | <html lang="cs"> | všechno ostatní |
| technická místnost | <head> | kódování, název stránky, odkaz na styly; na stránce se nezobrazí |
| obytné patro | <body> | všechno, co uživatel vidí |
<p><strong>Pozor</strong></p>, špatně <p><strong>Pozor</p></strong>.<!DOCTYPE html> / <html lang="cs"> / <head> / <meta charset="utf-8"> / <title>Moje stránka</title> / </head> / <body> / <p>Ahoj světe.</p> / </body> / </html>. Lomítka tu jen oddělují řádky. meta charset zajistí správnou češtinu, title je text v záložce prohlížeče.<nav> = navigace. Je jasnější než <div class="menu">.<div class="karta">…</div><header> – hlavička stránky nebo článku (logo, název)<nav> – hlavní navigace (menu s odkazy)<main> – hlavní obsah stránky, jen jednou<article> – samostatný celek, který dává smysl i sám (článek, příspěvek)<section> – tematický oddíl, obvykle s nadpisem<aside> – doplňkový obsah vedle (boční panel, poznámka)<footer> – patička (kontakt, autor, copyright)Ke každé značce si nejdřív řekni, k čemu je, a pak kartičku otoč.
<header>, menu do <nav>. Novinky do <main>, každá jako <article>. Kalendář je doplněk, tedy <aside>. Kontakt do <footer>.<h4>.<h1> hlavní nadpis, pod ním <h2>, pod tím <h3>. Velikost se nastaví v CSS.HTML popisuje význam, ne vzhled. Čtečky obrazovky a vyhledávače podle úrovní nadpisů poznávají osnovu stránky.
<!DOCTYPE html>, pak <html> s částmi <head> (údaje o stránce) a <body> (viditelný obsah). Sémantické značky jako header, nav, main, article a footer říkají, co obsah znamená; div je jen krabice bez významu.Vývojář čte cizí kód každý den. Proto si vezmeme hotovou malou stránku a projdeme ji řádek po řádku. U každého řádku zjistíme, proč tam je.
<p> = odstavec, <h1> = hlavní nadpis.<p> nebo </p>. Element je celý kus <p>text</p>. Atribut je doplňující údaj v počáteční značce, název="hodnota".V <a href="/kontakt">Kontakt</a> je a element, href atribut a „Kontakt“ obsah.<meta charset="utf-8"> se může místo „ř“ zobrazit nesmysl.<!DOCTYPE html> – deklarace typu dokumentu. Prohlížeč použije standardní režim HTML5.<html lang="cs"> – kořenový element. lang pomůže čtečce správně vyslovovat a překladači poznat jazyk.<head> – hlavička dokumentu. Údaje o stránce, ne obsah.<meta charset="utf-8"> – kódování znaků; má být na začátku hlavičky.<title>Kroužek robotiky</title> – název v záložce, v záložkách i ve výsledcích vyhledávání.<body> – tělo, vše viditelné.<h1>Kroužek robotiky</h1> – hlavní nadpis stránky.<p>Scházíme se ve středu.</p> – odstavec textu.Nadpisy jsou <h1> až <h6>. Tvoří osnovu jako v učebnici: kapitola, podkapitola, oddíl. Úrovně se nemají přeskakovat (po h2 nemá přijít rovnou h4).
Roztřiď elementy: co popisuje stránku a co je vidět.
header (hlavička), nav (navigace), main (hlavní obsah, jen jednou), article (samostatný celek), section (oddíl s nadpisem), aside (doplněk), footer (patička).<nav><a href="/">Domů</a></nav>div je blokový (začíná na novém řádku), span řádkový (uvnitř textu).<span class="cena">250 Kč</span>| Bez sémantiky | Se sémantikou |
|---|---|
<div class="hlavicka"> | <header> |
<div class="menu"> | <nav> |
<div class="obsah"> | <main> |
<div class="clanek"> | <article> |
<div class="paticka"> | <footer> |
<p>Cena: <strong>250 Kč</p></strong>strong byl otevřen uvnitř p, musí se tedy zavřít dřív: <p>Cena: <strong>250 Kč</strong></p>.<h1> a pod nimi rovnou <h4>. Co opravíš?<h1>. Pod ním <h2>, pod ním <h3>. Pokud chceš menší písmo, uprav ho v CSS, ne skokem na <h4>.alt u obrázku.Každý prohlížeč může chybu „opravit“ jinak a čtečky obrazovky se pak v rozbité struktuře ztrácí.
<!DOCTYPE html>, <html lang>, <head> s meta charset a title, <body> s obsahem. Nadpisy tvoří osnovu h1–h6, elementy se správně vnořují a místo samých div se používají sémantické značky.