Výpis zdrojového kódu

Ze sémantického hlediska jsou důležité hlavně dvě značky:

• <code>
• <pre>
• <var>

Značka <code>

Slouží pro zdrojový kód zapsaný v řádku. Výchozí zobrazení značky <code> je řádkové a zobrazuje se neproporcionálním písmem (font-family: monospace).

Příklad řádkového použití <code>:

<p>
  Pro nastavení rámečku slouží 
  CSS vlastnost <code>border</code>
</p>

Značka <pre>

Pokud se jedná o blok kódu, obalí se <code> ještě do značky <pre>:

<pre><code>zdrojový kód
přes více řádků</code></pre>

Značka <pre> slouží pro text, u kterého záleží na bílých znacích (mezery, tabulátory, odřádkování). Není nutné ji tedy používat spolu s <code>, pokud v ní není kód, ale předformátovaný obsah.

Standardní chování v HTML bere jakékoliv bílé znaky (i v několika opakování za sebou) jako jednu mezeru.

<p>
  Text s    hodně mezerami,
  tabulátory a novými
  řádky.
</p>

Proto tento kód bude ve výsledku celkem normální.

Z pohledu CSS má ale <pre> nastaven vlastnost white-space na pre, což způsobí zachování všech bílých znaků.

Změnit nastavení bílých znaků

Toto chování je ale u zdrojových kódů žádoucí.

Značka <var>

Řádková značka <var> slouží k označení proměnné. Zobrazuje se kursivou.

Proměnná může být v matematickém vzorci:

<p>
  <var>x</var> = <var>y</var> + 1
<p>

Případně i ve zdrojovém kódu. Příklad JS kódu:

var <var>promenna</var> = 1;

Značka <var> se moc často nepoužívá.

Ošetření HTML řídicích znaků

Aby prohlížeče neinterpretovaly zdrojový kód jako HTML, je potřeba odstranit (převést na entity) tzv. řídicí znaky. Ty v praxi existují dva:

• < – slouží pro otevření/uzavření HTML značky
• & – označuje začátek entit

Znak < se zapíše entitou „<“, & potom jako „&“.

V PHP jde tento převod zajistit funkcí htmlspecialchars.

<xmp>

Značky <xmp> a i <textarea> mají jednu společnou a zajímavou funkci – HTML kód, který bude uvnitř, nebude interpretován jako HTML – s výjimkou ukončovacích značek (</xmp>, respektive </textarea>) těchto elementů.

<xmp>
  <p>Zde může být HTML, které <b>nebude</b> interpretováno.</p>
<xmp>

Živá ukázka

<plaintext>

Značka <plaintext> potom funguje jako <xmp> jen ji není možné uzavřít. Veškerý obsah za ní až do konce dokumentu se nebude interpretovat jako HTML.

Živá ukázka

<listing>

Ještě existuje další zastaralá značka – <listing> – v ní se HTML kód normálně objeví, chová se hodně podobně jako <pre>.

Živá ukázka

Podobné značky

V HTML existují ještě podobné značky.

<samp>

Zobrazuje se jako řádkový neproporcionálním písmem, tedy obdobně jako <code>.

V překladu znamená vzorek (z anglického sample). Hodí se pro obalení výstupu z počítačového programu – tedy například chybové hlášky, výstupu z příkazové řádky a podobně.

Pro použití jako bloku je třeba <samp> zkombinovat s <pre>.

<pre><samp>Fatal error: Maximum execution time of 5 seconds exceeded in</pre></samp>

<tt>

Značka <tt> je už obsolete – tj. zastaralá, překonaná a neměla by se používat. Zobrazuje se stejně jako <code> nebo <span> v řádku a neproporcionálním písmem.

Yuhů ji popsal následovně:

Teletypový terminál. Že nevíte, co to je? Já také ne. (Nabízí se výraz "dálnopis", což ale problematiku spíše zatemňuje. Asi je to text konzoly vzdáleného připojení terminálu.) Zobrazováno strojopisem, tedy obvykle písmem Courier (ale ne vždy).

Yuhů, Úprava textu

Příklad z DevDocs:

<p>
  Enter the following at the telnet 
  command prompt: <code>set localecho</code>
  <br>
  The telnet client should display: 
  <tt>Local Echo is on</tt>
</p>