HTML je značkovací jazyk používaný k vytváření a strukturování obsahu na webových stránkách. Není to programovací jazyk, ale jazyk, který říká prohlížeči, jak má zobrazit jednotlivé části obsahu – například nadpisy, odstavce, obrázky nebo odkazy.
HTML je základ každé webové stránky. Bez něj by nebylo možné správně uspořádat a zobrazit informace na internetu. Pomocí HTML určujeme, co je nadpis, co je odstavec, co je seznam a jaký text má být klikací odkaz. Umožňuje tak logicky a přehledně strukturovat informace.
HTML je potřeba k tomu, aby prohlížeče jako Chrome, Firefox nebo Safari věděly, jak obsah zobrazit uživateli. Díky HTML může vývojář vytvářet přehledné, funkční a přístupné weby, které jsou základním kamenem moderního internetu.
Každý HTML dokument má základní strukturu, která říká prohlížeči, jak
má stránku zobrazit. Dokument vždy začíná deklarací
<!DOCTYPE html>, která určuje typ dokumentu a verzi
HTML.
Hlavní část HTML stránky tvoří párové značky
<html> a </html>. Uvnitř nich se
nachází dvě klíčové části: <head> a
<body>.
Element <head> obsahuje tzv. metadata – tedy
informace o stránce, které nejsou přímo viditelné uživateli (např.
název stránky, odkazy na CSS nebo znakovou sadu).
Element <body> obsahuje vše, co se skutečně zobrazí
na stránce – nadpisy, odstavce, obrázky, formuláře a další prvky.
Jednoduchý příklad základní struktury:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Moje stránka</title>
</head>
<body>
<h1>Ahoj světe</h1>
</body>
</html>
HTML obsahuje řadu značek určených pro práci s textem. Tyto elementy pomáhají nejen vizuálně strukturovat text, ale i určit jeho význam. To je důležité jak pro čtenáře, tak i pro vyhledávače nebo asistivní technologie.
Základním stavebním kamenem textu je odstavec, který se zapisuje
pomocí značky <p>. Pro nadpisy se používají značky
<h1> až <h6>, kde
<h1> označuje hlavní nadpis stránky a
<h6> nejméně důležitý podnadpis.
Chceme-li v textu něco zdůraznit, použijeme značky jako
<strong> pro důraz (zpravidla tučné písmo) nebo
<em> pro kurzívu. Tyto značky neslouží jen pro
vzhled, ale i pro význam – například čtečky obrazovky je interpretují
odlišně.
Pro zalomení řádku bez začátku nového odstavce slouží značka
<br>. Tu využiješ třeba v básních nebo adresách.
Když chceš část textu zvýraznit například jako upozornění, můžeš
použít značku <mark>, která daný text zvýrazní
obvykle žlutým podbarvením.
Seznamy jsou v HTML velmi důležité pro přehlednou prezentaci informací.
Existují tři hlavní typy seznamů:
- nečíslovaný
(
<ul>) - číslovaný (
<ol>) - seznam popisný (
<dl>)
Nečíslované seznamy se používají tam, kde pořadí položek není důležité – například pro výčet vlastností. Naopak číslované seznamy se hodí tam, kde záleží na pořadí, například pro postupy nebo návody. Popisné seznamy se pak využívají pro párové zobrazení termínu a jeho vysvětlení, například ve slovnících.
Každý prvek seznamu je zapsán pomocí značky
<li> (list item). U popisných seznamů se místo toho
používají značky <dt> (definovaný termín) a
<dd> (definice termínu).
Ukázka nečíslovaného seznamu:
<ul>
<li>Jablko</li>
<li>Hruška</li>
<li>Banán</li>
</ul>
Tabulky v HTML slouží k přehlednému zobrazení dat v řádcích a
sloupcích. Používají se pro rozvrhy, výsledkové listiny, srovnávací
tabulky nebo finanční přehledy. Základem tabulky je značka
<table>.
Pro vytvoření řádků se používá značka <tr> (table
row). Každý řádek obsahuje buňky, které jsou buď datové
<td>, nebo záhlaví <th>. Záhlaví
se obvykle používá v prvním řádku k označení sloupců a bývá tučně a
zarovnané na střed.
Pro srozumitelnější strukturu tabulky je možné využít i značky
<thead> (hlavička),
<tbody> (tělo) a
<tfoot> (zápatí). Tyto značky nejsou povinné, ale
pomáhají kód zpřehlednit.
Ukázka tabulky se záhlavím a řádky:
<table>
<thead>
<tr>
<th>Jméno</th>
<th>Věk</th>
<th>Město</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna</td>
<td>28</td>
<td>Praha</td>
</tr>
<tr>
<td>Jan</td>
<td>35</td>
<td>Brno</td>
</tr>
</tbody>
</table>
Formuláře v HTML slouží ke sběru dat od uživatelů. Umožňují návštěvníkům zadávat informace, jako jsou jméno, e-mail, heslo, komentáře nebo výběry z možností.
Každý formulář začíná tagem <form>, který může obsahovat různé vstupní prvky jako:
<input type="text">– pro jednorázový textový vstup<textarea>– pro víceřádkový text (např. komentáře)<select>– pro výběr z možností
Ukázka formuláře:
<form>
<input type="text">
<textarea rows="3"></textarea>
<select>
<option>Možnost 1</option>
<option>Možnost 2</option>
</select>
</form>
Sémantické elementy v HTML jsou takové značky, které svým názvem jasně určují význam obsahu, který obalují. Pomáhají lépe strukturovat web nejen pro lidi, ale i pro vyhledávače nebo čtečky obrazovky.
Místo běžného <div>, který nemá žádný význam sám o sobě, se používají například <header>, <nav>, <main>, <article>, <section>, <footer> a další.
Například <nav> označuje navigaci stránky, <article> samostatný kus obsahu (např. článek) a <footer> patičku stránky. Díky těmto prvkům je kód přehlednější, srozumitelnější a přístupnější.
Příklad jednoduché struktury se sémantickými značkami:
<header>Hlavička stránky</header>
<nav>Hlavní menu</nav>
<main>
<article>Článek</article>
<section>Sekce obsahu</section>
</main>
<footer>Patička stránky</footer>