Každý HTML dokument je vhodné přehledně formátovat a dělit do strukturovaných bloků. V návodu se podíváme, jakým způsobem lze toto strukturování provést.

<div> vs. <span>

Základní strukturu celého dokumentu lze určit pomocí bloků <div>. Tyto bloky neviditelně rozdělují celou stránku na drobnější části, které lze lépe formátovat. Každý <div> blok se automaticky v základním nastavení zalamuje pod sebe na nový řádek. Abychom rozlišili různé <div> bloky lze jim přiřadit třídy .class nebo identifikátory #id. Díky tomu lze poté nastavovat vlastnosti v kaskádových stylech pro jednostlivé bloky zvlášť. <div> bloky lze do sebe libovolně vnořovat.

Když potřebujeme obalit pouze část textu v odstavci, musíme použít řádkový element <span>. Ten také neviditelně obalí označený prvek, ale nijak neovlivní odřádkování nebo pozici okolních prvků na rozdíl od blokového elementu <div>. Tento způsob se hodí především na změnu vlastností slova nebo znaku v řádku odstavce <p>.

Nadpisy a odstavce

Samotný text v HTML dokumentu lze formátovat do odstavců <p>. Každý odstavec obalený párovým tagem <p> se automaticky odřádkuje na nový řádek. V případě že musíme odřádkovat text a nechceme dělat další odstavec, lze si vypomoct tagem <br>. Tento tag zalomí text a přesune další slovo na žačátek řádku.

Pokud nepoužijeme zalomení řádku pomocí tagu <br> nebo pomocí nového odstavce <p>, tak prohlížeče text zalamují automaticky podle volné šířky. V některých případech se nám tento způsob nemusí hodit, proto lze přidat tzv. nedělitelnou mezeru  . Díky této HTML entitě, prohlížeče nedovolí ponechat část textu na konci řádku samostatně a zalomí jej hned na nový řádek. Toto lze využít například u spojek nebo předložek, které nesmí v textu končit na konci řádku.

Nadpisy v HTML dělíme do šestí úrovní. Od <h1> do <h6>. Nadpis 1.úrovně má největší důležitost a zvýšením čísla za znakem H důležitost nadpisu klesá. Nadpisy, stejně jako odstavce, automaticky odřádkují text na nový řádek. Je doporučováno, aby v každém HTML dokumentu byl uveden pouze jeden nadpis úrovně <h1> a pod ním následovaly další nadpisy. Ty se již mohou vyskytovat ve větším množství, ale i zde je doporučováno, aby bylo zachováno stupňování nadpisů.

Občas je potřeba vypsat v HTML dokumentu zdrojový kód nebo tabulku tak, aby byly zachovány mezery nebo konce řádků a nebyl vzhled textu ovlivněn pravidly HTML. K tomu slouží párový tag <pre>, který zobrazí vepsaný text pomocí neproporciálního písma. Tento typ písma zaručí u každého znaku stejnou šířku.

<div>

Párový tag, vytvářející blokový element a obvykle i strukturu HTML dokumentu. Do bloku lze umístit odstavce, obrázky i další prvky stránky. Každý blok se zalomí na nový řádek.

<span>

Párový tag, vytvářející na rozdíl od tagu <div> řádkový element, který se nijak nezalamuje. Hodí se například k obalení malé části textu v řádku odstavce. 

<p>

Párový tag obklopující odstavec textu. Každý odstavec obalený do tagu <p> se automaticky vloží pod sebe.

<h1> - <h6>

Párové tagy definující nadpisy. Podle důležitosti se dělí do šesti úrovní <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, kdy tag <h1> je nejdůležitější nadpis na stránce a tag <h6> má nejmenší důležitost. Nadpisy se automaticky odřádkují pod sebe.

<br>

Tag <br> slouží k zalomení řádku, pokud potřebujeme text uvést na nový řádek, ale nechcete vytvářet nový odstavec.

<pre>

Párový tag hodící se k zobrazení předformátovaného textu. Text uvedený mezi tagy <pre> se zobrazí včetně všech mezer a konců řádků, bez ovlivnění pravidly HTML. Pro zobrazení uvedeného textu se používá tzv. neproporciální písmo, které zaručí stejnou šíří každého znaku.