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>
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! 🙂
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.
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
codeinnerhalb vonp. Alles andere fände ich auch nicht so konsistent.Sorry für den TB. Daß mein Wiki das automatisch macht, wusste ich nicht. Habe es nun ausgeschalten.
@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.