HTML/Tutorials/Code in HTML darstellen

20min

leicht

HTML

Dieses Tutorial zeigt, wie man Quelltext (englisch: source code) und HTML-Markup in Webseiten präsentieren kann.

Unter den 18 Ur-Elementen befand sich schon ein listing-Element. Genau wie beim ebenfalls obsoleten xmp-Element wird darin enthaltener HTML-Code nicht gerendert. Beide Element galten schon in HTML 3 als missbilligt und sind nicht mehr zu verwenden.

Code-Blöcke

Neben der Auszeichnung durch semantisch passende Elemente ist es für Programmlistings wichtig, dass sie in dicktengleicher Schrift dargestellt werden, und dass Whitespace wie Zeilenumbrüche und Einrückungen durch mehrere Leerzeichen oder Tabs so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

pre

Das Element pre repräsentiert einen vorformatierten (engl.: preformatted) Textblock, der im Browser genau so darzustellen ist, wie er im HTML Quellcode vorgefunden wird. In <pre>-Elementen enthaltene HTML Elemente werden weiterhin interpretiert, allerdings dürfen längst nicht alle verwendet werden. Nur diejenigen, die als phrasing content gelten, sind zulässig.

Weil der Browser in pre-Elementen nach HTML Tags sucht, müssen Codebeispiele, die in einem pre-Element dargestellt werden sollen, die HTML Sonderzeichen <, > und & maskieren. Dazu verwendet man die HTML Symbole <, > und &.

Ausgabe von php-Code ansehen …

<pre> mit selfhtml finden Sie die &lt; energie &gt; des verstehens </pre>

code

pre-Elemente werden häufig eingesetzt, um Quelltext darzustellen. In diesem Fall ist es semantisch korrekt, den den Inhalt mit einem code-Element zu umfassen. Es zeichnet einen Teil eines Fließtextes als Quelltext, engl. code aus. Das code-Element ist für kurze Codestücke gedacht. Wenn Sie ein längeres Stück Quellcode darstellen wollen, dann wird empfohlen, jede Zeile in <code>...</code> einzuschließen. Aber auch innerhalb von code wird weiterhin HTML interpretiert und Sie müssen die HTML Steuerzeichen maskieren.

Beispiel ansehen …

<pre> <code class="language-php"> &lt;?php echo "Hello World\n"; ?&gt; </code> </pre>

Der code-Block ist in ein pre-Element geschachtelt.

Das pre-Element im Beispiel erhält einen blauen Hintergrund, gelbe Schriftfarbe, und als Schriftart wird "Fixedsys" gewünscht, oder, falls nicht verfügbar, die vom Browser vorgesehene monospace-Schrift. Damit der Text nicht so am Rand klebt, wird außerdem ein horizontales Padding von 1em definiert. Vertikal ist es nicht notwendig, die Zeilenumbrüche im HTML reichen bereits aus.

Der Einsatz eines pre-Elements ist nicht unbedingt erforderlich. Die Effekte, die Sie dadurch erhalten, können Sie mit Hilfe von CSS auch direkt dem code-Element zuweisen. Dabei handelt es sich um die Eigenschaften white-space:pre und display:block. Je nach Browser erhält ein pre-Element auch automatisch einen linken Randabstand.

Beispiel ansehen …

code {
  display: block;
  font-family: monospace;
  white-space: pre;
  padding: 0 1em;
  background-color: #eee;
}

<code class="language-pascal">
Program Lesson1_Program3;
Var       
    Num1, Num2, Sum : Integer;

Begin {no semicolon}
	Write('Input number 1:'); 
	Readln(Num1);
	Writeln('Input number 2:');
	Readln(Num2);
	Sum := Num1 + Num2; {addition} 
	Writeln(Sum);
	Readln;
End.     
</code>

Im Beispiel ist ein Programm in TurboPascal aufgelistet. Durch white-space:pre wird die Formatierung des Listings erhalten. Dazu wird mit font-family eine nicht-proportionale Schrift verwendet.

Sprachkennzeichnung

Wenn Sie das code-Element um eine Angabe der Programmiersprache erweitern möchten, könnten Sie versucht sein, dafür das HTML Attribut lang zu verwenden. Dieses Attribut ist aber nur für gesprochene Sprachen vorgesehen. Eine vom Browser oder von Assistenztechniken erkannte Angabe der Programmiersprache ist in HTML nicht möglich.

Empfehlung: Verwenden sie zur Kennzeichnung des Codes ein class-Attribut mit dem Wert language-...

var und samp

Einzelne Variablen, Konstanten und Größen können Sie mit dem var-Element auszeichnen.

Das var-Element am Beispiel des Satz des Pythagoras

<p> <var>a</var>² + <var>b</var>² = <var>c</var>² </p>

Im Beispiel werden die Variablen a, b und c in var-Elementen ausgezeichnet. Dabei wäre es zu überlegen, die gesamte Formel in MathML auszuzeichnen.

Das Element samp zeichnet einen Teil eines Fließtextes als beispielhafte Ausgabe eines Programms aus, engl. sample output.

HTML-eigene Zeichen maskieren

HTML wird häufig auch für Sprachdokumentationen verwendet, auch und gerade für Internet-Technologien, die selber wiederum HTML oder XML-basierte Sprachen beschreiben. Dabei tritt das Problem auf, dass für zusammenhängende Beispiele oftmals massenweise HTML- oder XML-Code dargestellt werden soll. HTML-Markup in HTML wird aber immer vom Browser geparst, auch wenn er innerhalb von code und pre-Elementen notiert wird.

Durch die Verwendung von Unicode ist es nicht mehr nötig, Umlaute zu maskieren. Wenn in Ihrem Text jedoch Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren:

• Ersetzen Sie das Zeichen & durch die Zeichenfolge & ("Ampersand")
• Ersetzen Sie das Zeichen < durch die Zeichenfolge < ("lower than")
• Ersetzen Sie das Zeichen > durch die Zeichenfolge > ("greater than")
• das Zeichen " durch die Zeichenfolge ".
  Dies ist vor allem in Attributwerten sinnvoll.

Beispiel

• Das ist ein &lt;HTML-Tag&gt;
• GmbH &amp; Co. KG
• <a href="https://example.com/?id=5&amp;foo=bar">
• <strong title="bekannt durch den Ausspruch &quot;Ich weiß, dass ich nichts weiß.&quot;">der griechische Philosoph Sokrates</strong>

Beachten Sie vor allem die spitze öffnende Klammer (<). Wenn Sie dieses Zeichen nicht wie vorgeschrieben maskieren, bringen Sie den Web-Browser mit ziemlicher Sicherheit durcheinander, weil er glaubt, nun würde ein HTML-Tag folgen. Außerdem müssen Sie in href-Attributen das Ampersand maskieren.

Das ist eine Menge Codier-Arbeit, bei der einen viele Software-Produkte auch allein lassen.

Anwendungsbeispiele

HTML-Maskierer

Um solche Kodier-Arbeiten zu beschleunigen, kann ein kleines Tool hilfreich sein, das einem diese Arbeit abnimmt. Der ursprüngliche Artikel von Stefan Münz aus dem aktuell.de.selfhtml-Bereich enthielt ein Perl-Script, das als CGI-Script HTML-Code maskiert.

Tatsächlich ist es aber viel einfacher, diese Maskierung mit Hilfe des DOM durchzuführen. Jedes HTML Element, das die Zeichen <, > oder & als Text enthält, maskiert diese Zeichen beim Lesen der innerHTML-Eigenschaft automatisch. So auch eine textarea:

Beispiel

<textarea id="input">
  <h2>HTML-Maskierer</h2>
  <p>Fügen Sie Ihren Text hier ein</p>
</textarea>
<button type="button" id="button">Los!</button>

<code id="output">
</code>

Das <textarea>-Element im Formular dient zum Hineinkopieren des gewünschten Codes, der in HTML dargestellt werden soll.
Das erzeugte maskierte Markup wird in ein <code>-Element übertragen.

HTML-Maskierer ansehen …

  document.getElementById('button').addEventListener('click', function() {
    let str = document.querySelector('#input').innerHTML;
    document.getElementById('output').textContent = str; 
  });

Beim Klick auf den "Los!"-Button wird das innerHTML der <textarea> ausgelesen. HTML Sonderzeichen sind darin bereits maskiert. Das gelesene HTML wird dann einfach als textContent in das <code>-Element geschrieben. Beim Schreiben des textContent findet keine HTML-Interpretation statt, so dass alle Maskierungszeichen ausgegeben werden. Das <code>-Element benötigt noch ein paar CSS-Angabe, wie weiter oben beschrieben. Klicken Sie auf "ausprobieren", um das vollständige Beispiel zu sehen.

Beachten Sie:
Sollten Sie PHP verwenden, so können Sie die Funktionalität des oben vorgestellten Scripts mit der Funktion htmlspecialchars() erreichen. Hauptartikel: Programmiertechnik/Kontextwechsel/erkennen_und_behandeln#HTML

ASCII-Art

Mit dem pre-Element ist es auch möglich ASCII-Art in seinen richtigen Proportionen darzustellen:

Beispiel ansehen …

<pre>
   .
   |
   |   
   |
   #         +------------------------------+
  (=)        |           ACHTUNG!           |
   H         |      PRÄFORMATIERTER TEXT!   |            =o=
   H         |                           __;                 ~^
   H         +------------TT-----------°            _               _ _  
   H                      ||    ________________   | |             | (_)   
   H                      ||    | SELF-Treffen >   | |__   ___ _ __| |_ _ __ 
   M       oÖo            ||    |°°°°°°°°°°°°°°°   | '_ \ / _ \ '__| | | '_ \ 
   M        |  ö          ||    |                  | |_) |  __/ |  | | | | | |  
  / \~"""~"""~"""~"""~"""~"""~"""~~"""~"""~"""~""""|_.__/ \___|_|  |_|_|_| |_|
</pre>

Das pre-Element enthält ein Bild, dass aus einzelnen Zeichen „gemalt“ wurde. Hierbei sind die einzelnen Positionen innerhalb des Rasters aus Zeilen und Spalten wichtig.