Jak jednoduše formátovat text pomocí HTML

Jak si vyladit popisky na webu, aby byly pro zákazníky přitažlivé? Je důležité zaměřit se na několik klíčových aspektů formátování jako je jasná hierarchie textu pomocí odstavců, krátké a přehledné odstavce, seznamy a odrážky, důraz na klíčová slova a jasné a výstižné odkazy.

Ukážeme si, jak jednoduše formátovat text pomocí HTML a docílit přehledných popisků.

V HTML existuje několik značek, které vám pomohou upravit vzhled textu. Podívejme se na některé z nejběžnějších:

1. Nadpisy: <h1> až <h6>

Pokud chcete text označit jako nadpis, použijete značky <h1>, <h2>, až <h6>. Tyto značky určují velikost nadpisu – <h1> je největší, zatímco <h6> je nejmenší.

<h1>Toto je hlavní nadpis</h1>

<h2>Toto je podnadpis</h2>

<h3>Toto je menší nadpis</h3>

2. Odstavce: <p>

Pro běžný text, který chcete mít v odstavci, použijete značku <p>. Každý odstavec bude mít automaticky mezery nad a pod sebou.

<p>Toto je text v odstavci. Je to základní způsob, jak napsat delší blok textu.</p>

3. Tučný text: <strong>

Pokud chcete, aby nějaký text vypadal tučně, můžete použít značku <strong>, která nejen že text tučně zobrazuje, ale také naznačuje, že je důležitý i z hlediska SEO optimalizace.

Otevíracím a uzavíracím tagem označte <strong>tučný text</strong>, který chcete zvýraznit.

4. Kurzíva: <em>

Značku <em> zobrazí text kurzívou.

<em>Tento text je zdůrazněný a v kurzívě.</em>

5. Zalomení řádku: <br>

Značka <br> je v HTML velmi užitečná, když chcete vložit zalomení řádku. Tato značka nevyžaduje žádné uzavírací tagy, jednoduše se použije jako samostatná značka, a prohlížeč ji použije k tomu, aby přenesl text na nový řádek. V praxi to můžete využít např. u adres nebo kontaktních informací.

<br>Toto je první řádek

<br>Toto je druhý řádek

<br>Toto je třetí řádek

6. Seznamy: <ul>, <ol>, a <li>

Pokud chcete text seřadit do seznamu, můžete použít nečíslovaný seznam s odrážkami (s použitím značky <ul>) nebo číslovaný seznam (s použitím značky <ol>). Každý položka v seznamu je označena značkou <li> (list item).

Odrážky

<ul>

<li>První položka seznamu</li>

<li>Druhá položka seznamu</li>

<li>Třetí položka seznamu</li>

</ul>

Číslovaný seznam

<ol>

<li>První krok</li>

<li>Druhý krok</li>

<li>Třetí krok</li>

</ol>

7. Vytváření odkazů: <a>

Značka <a> v HTML se používá k vytváření odkazů. Odkaz může směřovat na jinou stránku, soubor, e-mailovou adresu, nebo i jinou část téže stránky. Tato značka je jedním z nejdůležitějších nástrojů pro navigaci na webu.

Základní syntaxe pro použití značky <a> vypadá takto:

<a href="URL">Text odkazu</a>

href (Hypertext Reference) je atribut, který určuje cílovou adresu, na kterou odkaz směřuje.

Text odkazu je to, co uvidí uživatel na stránce a na co může kliknout.

Příklad použití značky <a> pro odkazování na jinou webovou stránku:

<a href="https://www.conviu.cz">Navštivte naši stránku!</a>