<h1>Hlavní nadpis</h1>
<h2>Nadpis kapitoly</h2>
<h3>Běžný nadpis</h3>
<h4>Místní nadpis</h4>
<div class="center">
<h4>Místní nadpis na střed</h4>
</div>

<header>
<h2>Hlavní nadpis</h2>
<div>
<p>Volitelná metadata, typicky datum</p>
<a href="#">Volitelný štítek</a>
<a href="#">Volitelný štítek</a>
</div>
<p class="perex">Pro stránky s dlouhým nebo velmi důležitým obsahem používáme perex, který řekne, o čem stránka je, a dodá motivaci ke ...</p>
<p>odstavec...</p>
</header>

<figure>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="460" scrolling="no" src="https://www.youtube.com/embed/OFm-lCk4k6c" width="817">
</iframe>
<figcaption>
Volitelný popisek volitelného hlavního obrázku nebo videa.
</figcaption>
</figure>

<h3>
Seznam odrážky:
</h3>
<ul>
<li>první</li>
<li>druhá</li>
<li>...</li>
</ul>
<h3>
Seznam číslovaný:
</h3>
<ol>
<li>první</li>
<li>druhá</li>
<li>...</li>
</ol>
<h3>
Seznam vnořený:
</h3>
<ul>
<li>první</li>
<li>druhá
<ul>
<li>první v druhé</li>
<li>druhá v druhé</li>
</ul>
</li>
</ul>

<h3>
Seznam kompaktní
odrážky:
</h3>
<ul class="compact">
<li>první</li>
<li>druhá</li>
<li>...</li>
</ul>
číslovaný seznam:
<ol class="compact">
<li>první</li>
<li>druhá</li>
<li>...</li>
</ol>
Vnořený seznam:
<ul class="compact">
<li>první</li>
<li>druhá
<ul>
<li>první v druhé</li>
<li>druhá v druhé</li>
</ul>
</li>
</ul>

<div class="image">
<img alt="" src="//via.placeholder.com/302x302" />
<h2>
Obtékané obrázky
</h2>
<p>
Obtékaný odstavec...
</p>
<p>
Obtékaný odstavec...
</p>
</div>

<img alt="" src="//via.placeholder.com/816x126" />

<h3>Běžná tabulka
</h3>
<table>
<thead>
<tr>  první řádek tabulky (tučně)
<th> 
</th>
<th>Volitelný název sloupce je tučně
</th>
<th>A platí pro něj to, co pro název řádku
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volitelný název řádku je tučně
</td>
<td>Obsah všech buněk tabulky je odsazen o ekvivalent 2 linek vertikální mřížky od všech okrajů bunky (tj. 24 px).
</td>
<td>Texty v buňkách pokud možno neformátujeme, hlavně nechceme používat tučný text (konkuroval by názvům řádků a sloupců).
</td>
</tr>
<tr>
<td>A měl by být co nejkratší
</td>
<td>Do buněk můžeme vedle textu vkládat také obrázky (ideálně s bílým pozadím) nebo kompaktní sezn...
</td>
<td>Ve výchozím nastavení jsou všechny běžné sloupce tabulky stejně široké (kromě sloupce s názvy řá....
</td>
</tr>
<tr>
<td>Případná tlačítka ve výchozí tabulce budou velikosti M
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
</tr>
</tbody>
</table>

<h3>Kompaktní tabulka
</h3>
<table class="compact">
<thead>
<tr>  první řádek tabulky (tučně)
<th> 
</th>
<th>Volitelný název sloupce je tučně
</th>
<th>A platí pro něj to, co pro název řádku
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volitelný název řádku je tučně
</td>
<td>Obsah všech buněk tabulky je odsazen o ekvivalent 2 linek vertikální mřížky od všech okrajů bunky (tj. 24 px).
</td>
<td>Texty v buňkách pokud možno neformátujeme, hlavně nechceme používat tučný text (konkuroval by názvům řádků a sloupců).
</td>
</tr>
<tr>
<td>A měl by být co nejkratší
</td>
<td>Do buněk můžeme vedle textu vkládat také obrázky (ideálně s bílým pozadím) nebo kompaktní sezn...
</td>
<td>Ve výchozím nastavení jsou všechny běžné sloupce tabulky stejně široké (kromě sloupce s názvy řá....
</td>
</tr>
<tr>
<td>Případná tlačítka ve výchozí tabulce budou velikosti M
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
</tr>
</tbody>
</table>

<footer>
<div>
<img src="//via.placeholder.com/48x48" alt=""/>
<span>garant obsahu</span>
<a href="#">Mgr. Andrea Ivaničová</a>
<p>odbornice na dentální produkty, redakce Nazuby.cz</p>
</div>
</footer>

<hr />

<hr class="left" />

Toto je infobox. Používáme jej jen výjimečně..... V textu může být odkaz.

<div class="row">
<div class="infobox">
<p>Toto je infobox. Používáme jej jen výjimečně..... V textu může být <a href="#">odkaz</a>.</p>
</div>
</div>

<ul class="benefits">
<li>Benefit</li>
<li>Benefit</li>
<li>Benefit</li>
<li>Benefit</li>
</ul>

<div class="center">
<a href="#" class="button">Tlačítko primární akce</a>
</div>
<div class="center">
<a href="#" class="button arrow">Tlačítko do jiné části webu</a>
</div>
<div class="center">
<a href="#" class="button" target="_blank">Tlačítko vedoucí pryč z webu</a>
</div>

<ul class="compact">
<li><a href="#" target="_blank">Odkaz</a></li>
<li><a href="#" target="_blank">Další odkaz</a></li>
<li><a href="#" target="_blank">A další odkaz</a></li>
</ul>

<div class="pros-cons">
<ul class="pros">
<li>Výhody</li>
<li>Výhody</li>
<li>Výhody</li>
</ul>
<ul class="cons">
<li>Nevýhody</li>
<li>Nevýhody</li>
</ul>
</div>

<ul class="pros">
<li>Výhody</li>
<li>Výhody</li>
<li>Výhody</li>
</ul>
<ul class="cons">
<li>Nevýhody</li>
<li>Nevýhody</li>
</ul>