Quelltext- und Code-Beispiele richtig einfügen

7 Kommentare

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>

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

  • Keine verwandten Beiträge

Über 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.

7 Kommentare

  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. WebDesign
    Webdesign ↑ Unterseiten WebDesignTNG (Doku u.a. für phpCMS) CascadingStyleSheets DocumentObjectModel (DOM, DHTML) FarbenGrafiken JavaScript (JS) CSS XML PHP WebAccessibility ContentUsability WYSIWYG CssHallOfFame (Toll…

  5. Sorry für den TB. Daß mein Wiki das automatisch macht, wusste ich nicht. Habe es nun ausgeschalten.

  6. @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.

  7. Wieder was gelernt
    Dank Peruns Artikel in seinen Blog habe ich wieder was gelernt, nämlich wie man html oder anderen Code in einem Blog richtig postet.

    er wird mittels:

    html code oder anderer

    richtig dargestellt.

    Dank an Perun.
    …

Kommentare sind geschlossen.