// htmltahak/ · 02 z 09

Struktura dokumentu

body, div, span — základní stavební kameny každé stránky. Kdy použít div a kdy sémantický tag. Jak se vyhnout "div polévce".

// Block vs Inline — vizuální přehled

div — blokový element (zabírá celý řádek) p — blokový element (zabírá celý řádek) Text s span — inline a dalším span — inline textem na stejném řádku. section — blokový element (nový řádek)

BLOCK elementy: div, p, h1–h6, ul, ol, table, header, main, section, article, footer, nav, aside, form, pre, blockquote, hr

INLINE elementy: span, a, strong, em, code, img, input, button, label, abbr, time, mark, del, ins, sub, sup, br

<body>

Tělo dokumentu

Obaluje veškerý viditelný obsah stránky. Jen jeden body na stránku.

BLOCK

body je kontejner pro veškerý obsah, který uživatel vidí na stránce. Vše co chcete zobrazit — texty, obrázky, formuláře, navigace — musí být uvnitř body. Je pouze jeden body na stránku.

// data-theme trikPřidejte data-theme="dark" na body a přepínejte JS — celá stránka změní téma jednou CSS změnou. Uložte preferenci do localStorage.

Atributy

class / id	Pro globální stylování a JS targeting	string
data-theme	Oblíbený vzor pro přepínání motivu	dark / light
onload	Spustí JS po načtení (raději addEventListener)	JS

Pouze jeden body na celou stránku
data-theme="dark" na body = snadné přepínání motivu
class="no-js" na body, JS odstraní = detekce bez JS
Moderně: document.body.classList.add("loaded")

Příklad — témata

HTML + CSS

<body data-theme="light">
  ...
</body>

<!-- CSS -->
<style>
[data-theme="light"] {
  --bg: #ffffff;
  --text: #111111;
}
[data-theme="dark"] {
  --bg: #0A0A0F;
  --text: #E8E8F0;
}
body {
  background: var(--bg);
  color: var(--text);
}
</style>

<!-- JS přepínač -->
<script>
const btn = document.getElementById('theme-btn');
btn.addEventListener('click', () => {
  const t = document.body.dataset.theme;
  document.body.dataset.theme =
    t === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme',
    document.body.dataset.theme);
});
</script>

<div>

Generický blokový kontejner

Nejpoužívanější tag. Blokový kontejner bez sémantického významu — čistě pro layout a stylování.

BLOCK

div (division) nemá žádnou sémantiku — screen readery ho ignorují, Googlu nic neříká. To je v pořádku pro čistě layoutové kontejnery. Ale pokud existuje sémantický tag (section, article, nav, header...), použijte ho místo div.

// Zlaté pravidloPtejte se: "Má tento kontejner sémantický význam?" Záhlaví? → <header>. Navigace? → <nav>. Hlavní obsah? → <main>. Článek? → <article>. Sekce s nadpisem? → <section>. Zbytek? → <div>.

Div polévka vs sémantika

❌ Div polévka

</div>

</div>

✅ Sémantický HTML

<nav>

</nav>

</header>

<main>

</article>

</main>

Atributy

class	CSS třídy pro stylování (Flexbox/Grid kontejner)	string
id	Unikátní identifikátor pro JS nebo anchor	string
data-*	Vlastní datové atributy pro JS	string

Kdy div, kdy sémantický tag

<header> pro záhlaví <main> pro hlavní obsah <nav> pro navigaci <section> pro tematické sekce <article> pro samostatný obsah <aside> pro sidebar <footer> pro zápatí

div pro čistě layoutové kontejnery (Flexbox/Grid)
Příliš mnoho divů = "div soup" — kód nepřehledný
div.container = centrovat obsah (max-width + margin auto)
Vkládat lze cokoli — blokové i inline elementy

Správné použití div

HTML

<!-- ✅ div pro layout grid -->
<div class="grid">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- ✅ div.container pro centrování -->
<div class="container">
  <header>...</header>
  <main>...</main>
</div>

<!-- ✅ div pro wrapper s data atributy -->
<div
  class="modal"
  data-modal-id="confirm"
  aria-modal="true"
  role="dialog"
>
  ...
</div>

<!-- ❌ div místo sémantického tagu -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- ✅ Správně -->
<header>
  <nav>...</nav>
</header>

CSS pro div layouty

CSS

/* Centrování obsahu */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Flex layout */
.flex { display: flex; gap: 1rem; }

/* Grid layout */
.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Karta */
.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1.5rem;
}

<span>

Generický inline kontejner

Inline verze div. Pro stylování části textu nebo inline elementů bez přerušení toku textu.

INLINE

span je neviditelný dokud mu nepřidáte CSS nebo JS. Nezalamuje na nový řádek — teče s okolním textem. Podobně jako div nemá sémantiku, ale je inline. Preferujte sémantické alternativy pokud existují.

// span vs sémantické inline tagyExistuje sémantická alternativa? Důležitý text? → <strong>. Emfáze? → <em>. Kód? → <code>. Zvýraznění? → <mark>. Zkratka? → <abbr>. Datum? → <time>. Smazáno? → <del>. Jinak: <span>.

Kdy span, kdy sémantický tag

<strong> pro důležitost <em> pro emfázi <code> pro kód <mark> pro zvýraznění <abbr> pro zkratky <time> pro datum/čas <del> / <ins> pro změny <sub> / <sup> pro indexy

Atributy

class	CSS třída pro stylování	string
id	Unikátní identifikátor	string
data-*	Vlastní datové atributy pro JS	string

span nezalamuje (inline) — pro víceřádkový obsah použijte div
Vyhýbejte se prázdným span bez účelu
span[data-user-id] = oblíbený vzor pro JS targeting
Pokud existuje sémantický inline tag, použijte ho!

Příklady správného použití

HTML

<!-- ✅ Stylování části textu -->
<p>Cena:
  <span class="price">299 Kč</span>
</p>

<!-- ✅ Ikona v textu tlačítka -->
<button type="button">
  <span class="icon" aria-hidden="true">
    🛒
  </span>
  Do košíku
</button>

<!-- ✅ Data atribut pro JS -->
<p>Uživatel:
  <span data-user-id="42"
    class="username">
    Jana Nováková
  </span>
</p>

<!-- ✅ Barevné zvýraznění syntaxe -->
<pre><code>
  <span class="keyword">function</span>
  <span class="fn-name">greet</span>() {}
</code></pre>

<!-- ❌ span místo sémantického tagu -->
<span class="important">POZOR!</span>
<!-- ✅ Správně -->
<strong>POZOR!</strong>

✅ <span class="price">299 Kč</span>

✅ <em>toto je důležité</em>

❌ <span class="em">toto je důležité</span>

// Pravidla blokových a inline elementů

BLOCK elementy

▸ Začínají na novém řádku
▸ Zabírají plnou šířku rodiče
▸ Přijímají width, height, margin, padding
▸ Mohou obsahovat blokové i inline elementy
▸ Příklady: div, p, h1, ul, table, section

INLINE elementy

▸ Tečou s textem (nový řádek pouze při přetečení)
▸ Ignorují width a height
▸ Margin/padding funguje jen vlevo/vpravo
▸ Mohou obsahovat jen inline elementy
▸ Příklady: span, a, strong, em, code, img

CSS display: Každý element lze změnit pomocí CSS — display: block, display: inline, display: inline-block, display: flex, display: grid.