#1 Dělení
Blok
Prvek typu blok vždy začíná na novém řádku a má nějakou formu odsazení (margin) před a za daným prvkem a vždy se snaží roztáhnout na co největší šířku, přičemž v základu nedovoluje ostatním prvků být vedle něj.
Nejčastějšími blokovými prvky jsou odstavec <p> a sekce <div>. Následující kód se na stránce tedy zobrazí tak, že všechny prvky budou pod sebou.
<p>Odstavec textu</p>
<div>Nějaký text</div>
<p>Další odstavec textu</p>
Inline
Inline prvky nezačínají na novém řádku, ale vkládají se vedle nebo do existujících prvků a zabírají pouze takovou šířku, jakou potřebují. Nejčastěji se jedná o prvky <span> a odkaz <a>, nebo jakýkoliv formátovací prvek.
<span>Text</span>
#2 Kombinování
Na většině stránek se běžně kombinují oba typy dohromady.
<h1>Nadpis</h1>
<div>
<p>Odstavec textu, který je <span style="color: blue;">barevný</span></p>
<p>Další odstavec textu</p>
</div>
Příklad výše tedy bude vypadat následovně – nadpis první úrovně, pod nímž se nachází obal <div>, který není vidět, pouze spojuje prvky odstavce (<div> lze nastylovat pomocí CSS, například aby byly odstavce vedle sebe), které jsou pod sebou, jelikož se jedná o blokové prvky. Prvek <span>, který je inline prvkem, barví pomocí atributu style slovo „barevný“ na modrou barvu.
Prvek <div>
Prvek <div>, neboli sekce („division“), je často používaný prvek, kterým se obalují ostatní prvky. Jelikož se jedná o blokový prvek, jeho základní chování je se roztahovat na šířku, ale často se používá s CSS (potažmo s identifikátory id a class), aby se tomuto chování zabránilo.
<div>
<h2>Nadpis</h2>
<div>
<p>Odstavec textu spolu s obrázkem</p>
<img src="img/obrazek1.png">
</div>
</div>
Prvek <span>
Prvek <span>, jakožto inline prvek, je používán často k formátování (barvení, zvýraznění, změna fontu…) části textu nebo části dokumentu.
<p>
Odstavec textu s
<span style="color: red;">červeným</span>
slovem
</p>