// htmltahak/ · kompletní HTML reference

HTML — Ultimátní Taháček

Všechny HTML tagy s vysvětlením, příklady, atributy a tipem kdy co použít. Pro začátečníky i pokročilé.

📋01

Meta & Hlavička

DOCTYPE, html, head, title, meta, link, style — tagy v <head>, SEO, OG tagy, favicon, preload.

8 tagů
🏗️02

Struktura dokumentu

body, div, span — základní stavební kameny. Kdy div a kdy sémantický tag. Jak se vyhnout "div polévce".

3 tagy
🏛️03

Sémantické HTML5

header, main, footer, nav, section, article, aside, address — struktura s významem pro SEO a přístupnost.

8 tagů
📝04

Nadpisy & Odstavce

h1–h6, p, br, hr, pre, blockquote, q — základní textové elementy. Hierarchie nadpisů a SEO.

8 tagů
✍️05

Inline textové tagy

strong, em, code, mark, del, ins, abbr, time, sub, sup, b, i — sémantické formátování textu.

12 tagů
🔗06

Odkazy & Média

a, img, picture, figure, video, audio, iframe — hyperlinkový element, obrázky a vložené médium.

8 tagů
📬07

Formuláře

form, input (všechny typy!), label, select, textarea, button, fieldset — průvodce formuláři.

9 tagů
📊08

Tabulky

table, thead, tbody, tfoot, tr, th, td, caption — tabulky pro data, přístupnost. NIKDY pro layout!

8 tagů
09

Skripty & Interaktivita

script, dialog, details, summary, template + globální atributy: data-*, aria-*, tabindex.

8 tagů + atributy
// Typy HTML elementů — co znamenají badge ikony v detailních stránkách
BLOCK INLINE VOID HTML5 SÉMANTICKÝ DEPRECATED

BLOCK — začíná na novém řádku, plná šířka rodiče: div, p, h1-h6, ul, table, section...
INLINE — teče s textem, ignoruje width/height: span, a, em, strong, code...
VOID — nemá zavírací tag ani obsah: <img> <input> <br> <hr> <meta> <link>
DEPRECATED — nepoužívat, zastaralé: <center> <font> <marquee> <blink>

// Globální atributy — platí na každém HTML elementu
id — unikátní identifikátor, CSS #id
class — CSS třídy oddělené mezerou
style — inline CSS (raději nepoužívat)
title — tooltip při najetí myší
lang — jazyk obsahu elementu (cs, en...)
dir — směr textu: ltr / rtl
hidden — skryje element (display:none)
tabindex — pořadí klávesnicového focusu
data-* — vlastní datové atributy pro JS
aria-label — popis pro screen readery
aria-hidden — skryje před screen readery
contenteditable — uživatel může editovat
draggable — přetažitelný prvek
spellcheck — kontrola pravopisu
translate — yes/no pro překladač
role — ARIA role pro přístupnost
// Rychlý přehled — hledejte pomocí pole výše ↑
<!DOCTYPE html>
Povinný první řádek — HTML5
<html lang="cs">
Kořenový element — lang povinný!
<head>
Metadata stránky (neviditelná)
<title>
Záložka + Google výsledky, SEO
<meta charset>
UTF-8 — první v head!
<meta viewport>
Responsivita — povinné pro mobily
<meta description>
SEO popis — max 155 znaků
<link rel="stylesheet">
Připojení CSS souboru
<link rel="icon">
Favicon v záložce
<body>
Viditelný obsah stránky
<header>
Záhlaví stránky nebo sekce
<main>
Hlavní obsah — jen jeden!
<footer>
Zápatí — copyright, kontakty
<nav>
Navigace s hlavními odkazy
<section>
Tematická sekce (s nadpisem!)
<article>
Samostatný obsah (blog, karta)
<aside>
Sidebar, vedlejší obsah
<div>
Blokový kontejner (bez sémantiky)
<span>
Inline kontejner (bez sémantiky)
<h1>–<h6>
Nadpisy — hierarchie, SEO
<p>
Odstavec — základní text
<br>
Zalomení řádku (void)
<hr>
Tematický předěl (void)
<pre>
Předformátovaný text — kód
<blockquote>
Blokový citát s cite atributem
<a href>
Odkaz — URL, mailto, tel, kotva
<img src alt>
Obrázek — alt POVINNÝ! (void)
<picture>
Responzivní obrázek, WebP fallback
<figure>
Obrázek nebo kód s popiskem
<video>
Video přehrávač — controls, poster
<audio>
Audio přehrávač
<iframe>
Vložení cizí stránky — YouTube, Mapy
<ul> <ol> <li>
Neuspořádaný / číslovaný seznam
<dl> <dt> <dd>
Definičný seznam — FAQ, metadata
<strong>
Důležitý text — sémanticky tučný
<em>
Emfáze — mění smysl věty
<code>
Inline kód — monospace font
<mark>
Zvýraznění — výsledky hledání
<abbr title>
Zkratka s vysvětlením v tooltip
<time datetime>
Datum/čas pro stroje i lidi
<form>
Formulář — action, method
<input type>
Vstupní pole — desítky typů (void)
<label for>
Popisek pole — pro přístupnost!
<button type>
Tlačítko — type vždy explicitní!
<select>
Rozbalovací seznam
<textarea>
Víceřádkové textové pole
<fieldset>
Skupina polí — povinné pro radio!
<table>
Tabulka — jen pro data, ne layout!
<th scope>
Záhlavní buňka — scope povinný!
<td>
Datová buňka — colspan, rowspan
<caption>
Název tabulky — jako label
<script defer>
JavaScript — defer/async vždy!
<dialog>
Nativní modal — showModal()
<details>
Accordion bez JS — summary
<template>
HTML šablona — klonuje se JS