Div a span

Tyto dvě značky jsou jako neviditelné krabice, které nám pomáhají uspořádat a stylovat obsah na stránce. Samy o sobě nic nedělají, ale jsou super, když k nim přidáme CSS (nebo atribut style).

<div> (Dělicí krabice - Block-level)

<div> (division - dělení) je jako velká krabice, která si vždycky vytvoří svůj vlastní řádek. Je to takový "kontejner" pro jiné HTML elementy.

Používáme ho, když chceme seskupit více věcí dohromady (např. nadpis, odstavec a obrázek) a pak je třeba všechny najednou obarvit, posunout nebo jim dát rámeček. Říkáme tím vlastně, že tyhle věci patří k sobě.

<div style="background-color: #c8e6c9; padding: 20px; border: 2px solid #388e3c; border-radius: 10px;">
    <h3>Moje Zelená Sekce</h3>
    <p>Tohle je text uvnitř zelené krabice. Všechno, co je uvnitř tohoto divu, patří k sobě.</p>
    <img src="obrazky/list.png" alt="Zelený list" width="100">
</div>
<p>Tohle je text, který je už mimo zelenou krabici a bude na novém řádku.</p>

Všimněme si, že <div> se vždycky začne na novém řádku a zabere celou šířku, pokud mu neřekneme jinak (pomocí CSS).

<span> (Malá krabice - Inline)

<span> je jako malá krabička, která se nevytváří nový řádek. Můžeme ji použít k obarvení nebo ostylování jen části textu uvnitř odstavce nebo nadpisu, aniž by se text rozbil na nový řádek.

<p>Mám rád <span style="color: blue;">modré</span> nebe a <span style="color: green;">zelenou</span> trávu.</p>

Vidíme? <span> je skvělé, když chceme změnit vzhled jen několika slov nebo písmen, aniž by to ovlivnilo zbytek odstavce.