Quelltext- und Code-Beispiele richtig einfügen

Was ich mich schon länger frage ist wie man semantsich richtig Quelltext- bzw. Code-Beispiele in einer Website einfügt. Klar, dafür gibt es <code>. Aber was mache ich wenn ich z. B. HTML-Quelltext oder den PHP-Code mit Einrückungen (“Tabstops”) darstellen will. Soweit ich weiß, ist dies nur mit <pre> möglich. Mal von diversen Tricksereien mit Tabellen und geschützten Leerzeichen abgesehen. Aber ist dies semantisch richtig?

Auch bei dem Einsatz von <code> bin ich mir nicht sicher wie man es richtig einsetzt. Vor allem bei mehrzeiligen Beispielen. Macht man es am besten so:

<code><html><br />
<head><br />
<title></title><br />
</head><br />
<body><br />
</body><br />
</html></code>

oder so:

<code><html></code><br />
<code><head></code><br />
<code><title></title></code><br />
<code></head></code><br />
<code><body></code><br />
<code></body></code><br />
<code></html></code>

Diesen Blogartikel teilen:

Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Verwandte Beiträge

7 Gedanken zu „Quelltext- und Code-Beispiele richtig einfügen“

  1. Wenn Du Code mittels [pre][code][/code][/pre] einrückst, ist es semantisch eigentlich völlig korrekt. Man könnte zwar einen Glaubenskrieg darüber führen, ob [code][pre][/pre][/code] nicht noch sinnvoller ist, aber das bleibt wohl eher Dir überlassen.

    Zu der zweiten Sache: Das [code]-Tag sollte nur einmal eingesetzt werden, um Usability-/Barrieregerecht zu sein. Natürlich musst Du innerhalb der Tags weitere darzustellende HTML-Tags escapen: Also nicht [body] da reinpflatschen, sondern %lt;body%gt; – wobei das % natürlich durch & ersetzt werden soll, aber ich weiß ja nicht wie das dann hier als Kommentarformatierung aussehen würde.

    Hoffe, das hilft weiter! 🙂

  2. Alternativ kannst du auch einen großen <code>-Block machen, mit Einrückungen usw. im HTML. Wenn du dem code-Tag dann ein Klasse, z. B. php zuweist, kannst du im CSS das folgende angeben:

    code.php { white-space:pre; }

    Dadurch hast du das PRE-Verhalten und die richtige Semantik. (Trennung Inhalt – Aussehen) Wenn dir die älteren Internetbrowser auch wichtig sind… siehe Garvins Kommentar.

  3. Zumindestens in XHTML 1.1 ist nur noch code innerhalb eines Block Level Elements zulässig, etwa

    <pre>
    <code>Code</code>
    </pre>

    oder zum Beispiel code innerhalb von p. Alles andere fände ich auch nicht so konsistent.

  4. Pingback: Matthias Webblogg

Kommentare sind geschlossen.