WordPress & Webwork

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>

7 Reaktion(en)

  1. Garvin Hicking

    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. Matthias

    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. Michael

    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: PukiWiki/TrackBack 0.1

  5. Perun

    @Garvin, Matthias, Michael, danke für die Tipps.

    @Beate, kein Problem. Der TB ist OK. Ich bin bezüglich TBs nicht so empfindlich wie manche Blogger.

  6. Pingback: Matthias Webblogg

Die Kommentare in diesem Beitrag sind geschlossen.