HTML5
Základy HTML

Normální text dokumentu je zarovnáván podle velikosti okna prohlížeče a je obvykle zobrazen proporcionálním písmem. Tento způsob zobrazování je však pro výpisy programů nebo textové tabulky nevhodný. V těchto případech potřebujeme, aby se text zobrazil přesně tak, jak je zapsán – aby se zachovaly konce řádků, všechny mezery a aby text se zobrazil neproporcionálním písmem. V HTML pro tyto účely nalezneme element pre. Krátký program v jazyce C, který slouží k výpočtu faktoriálu, můžeme zapsat takto:

<pre>
#include &lt;stdio.h&gt;

long f (long n) {
    return( n==0 ? 1 : n * f(n-1) );
    }

main() {
    printf("%ld\n", f(10));
    }
</pre>

Vidíme, že zápis textu programu mezi tagy <pre> a </pre> je téměř shodný s výsledkem v prohlížeči. Jediný rozdíl spočívá v nahrazení znaků menšítka a většítka příslušnými znakovými entitami.

Uvnitř elementu pre můžeme používat elementy pro změnu typu písma (např. i, b a u) a rovněž odkazy (<a ...>). Použití různých druhů písma umožňuje v zápisu zdrojových textů programů použít zvýraznění syntaxe a zlepšit tak jejich srozumitelnost. Následující kód v HTML:

<pre>
<b>function NSD</b> (A, B: Longint): Longint;
<i>{Funkce vrací největšího společného dělitele čísel A a B.}
{K výpočtu je použit modifikovaný Euklidův algoritmus.}</i>
<b>begin</b>
  A:= Abs(A);
  B:= Abs(B);
  <b>while</b> (A&lt;&gt;0) <b>and</b> (B&lt;&gt;0) <b>do</b>
  <b>begin</b>
    <b>if</b> A&gt;B <b>then</b> A:= A <b>mod</b> B
           <b>else</b> B:= B <b>mod</b> A;
  <b>end;</b>
  <b>if</b> A=0 <b>then</b> NSD:= B
         <b>else</b> NSD:= A;
<b>end;</b>
</pre>

zobrazí v prohlížeči úhledně zformátovaný prográmek:

Samozřejmě, že ruční doplňování tagů do textu programu není zrovna moc pohodlné a rychlé. Tento proces lze naštěstí zautomatizovat – existuje celá plejáda programů, které umějí zvýraznit syntaxi mnoha jazyků a výsledek uložit do HTML. Podobnou funkci umí obstarat i javascriptové knihovny, které lze připojit ke stránce.