Nadpisy & Odstavce

<!-- Jeden h1 na stránku -->
<h1>Kapesní nože Victorinox</h1>

<section>
  <h2>Nejprodávanější modely</h2>

  <article>
    <h3>Victorinox Classic</h3>
    <h4>Technické parametry</h4>
    <p>Délka: 58 mm...</p>
  </article>

  <article>
    <h3>Victorinox Spartan</h3>
    <h4>Technické parametry</h4>
  </article>
</section>

<section>
  <h2>Péče o nůž</h2>
  <h3>Čištění</h3>
  <h3>Broušení</h3>
</section>

/* Velikost nastavte CSS, ne výběrem tagu */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

/* Všechny nadpisy — společné styly */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

<!-- Základní odstavec -->
<p>
  Toto je odstavec s
  <strong>tučným textem</strong>,
  <em>kurzívou</em> a
  <a href="/link">odkazem</a>.
</p>

<p>Druhý odstavec má automatickou
  mezeru nahoře.</p>

<!-- ❌ Prázdný p pro mezeru -->
<p></p>
<!-- ✅ Použijte CSS -->
<style>
  p { margin-bottom: 1rem; }
</style>

<!-- ❌ Blok uvnitř p = chyba -->
<!-- <p><div>...</div></p> -->

<!-- ✅ Správně -->
<p>Text před blokem.</p>
<div>Blokový obsah</div>
<p>Text za blokem.</p>

<!-- ✅ Adresa — zalomení je obsah -->
<address>
  Jana Nováková<br>
  Novákova 1<br>
  Praha 1, 110 00
</address>

<!-- ✅ Báseň / lyrika -->
<p>
  Byl pozdní večer — první máj —<br>
  večerní máj — byl lásky čas.
</p>

<!-- ❌ Mezery mezi odstavci -->
<p>Odstavec 1</p>
<br><br>
<p>Odstavec 2</p>

<!-- ✅ Správně — CSS margin -->
<style>
  p + p { margin-top: 2rem; }
</style>

<!-- Tematický předěl v článku -->
<section>
  <h2>O firmě</h2>
  <p>Jsme firma...</p>

  <hr>

  <h3>Naše hodnoty</h3>
  <p>Věříme v...</p>
</section>

<!-- Stylování hr -->
<style>
hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 2rem 0;
}

/* Dekorativní hr s gradientem */
hr.fancy {
  border: none;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent, #F7A25B, transparent
  );
  margin: 2rem auto;
  width: 60%;
}

/* Pro čistě vizuální čáru bez sémantiky */
.divider {
  border-top: 1px solid #eee;
  margin: 2rem 0;
}
</style>

<!-- Kódový blok (správně) -->
<pre><code class="language-js">
function greet(name) {
  return `Ahoj, ${name}!`;
}
console.log(greet('Jana'));
</code></pre>

<!-- Výstup terminálu -->
<pre><samp>
$ npm install
added 142 packages in 3.2s
</samp></pre>

<!-- ASCII art -->
<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

<!-- CSS pro kódové bloky -->
<style>
pre {
  background: #0d0d0d;
  color: #e8e8e8;
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.65;
}
code { font-family: 'Fira Code', monospace; }
</style>

<!-- Kompletní citace -->
<figure>
  <blockquote cite="https://zdroj.cz">
    <p>"Nejlepší investice je
    do vzdělání."</p>
  </blockquote>
  <figcaption>
    — Benjamin Franklin,
    <cite>
      <a href="https://zdroj.cz">
        Zdroj
      </a>
    </cite>
  </figcaption>
</figure>

<!-- Pull-quote uvnitř article -->
<article>
  <p>Úvod článku...</p>
  <aside>
    <blockquote>
      "Klíčová myšlenka článku."
    </blockquote>
  </aside>
  <p>Pokračování...</p>
</article>

<!-- CSS -->
<style>
blockquote {
  border-left: 4px solid #F7A25B;
  margin: 0;
  padding: 0.5rem 1rem;
  color: #666;
  font-style: italic;
}
figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #999;
}
</style>

<!-- Inline citace (auto uvozovky) -->
<p>
  Einstein řekl:
  <q cite="https://zdroj.cz">
    Bůh nehraje kostky.
  </q>
</p>

<!-- html lang="cs" → „Bůh nehraje kostky." -->
<!-- html lang="en" → "Bůh nehraje kostky." -->

<!-- Vnořená citace -->
<p>
  Řekl: <q>Slyšel jsem ho říct
  <q>to je skvělé</q>.</q>
</p>

<!-- CSS: vlastní uvozovky -->
<style>
/* Guillemets místo uvozovek */
q {
  quotes: "«\00A0" "\00A0»";
}
q::before { content: open-quote; }
q::after  { content: close-quote; }
</style>