✔ Unterschied zwischen code und pre

Status
Nicht offen für weitere Antworten.
SilentWarrior

SilentWarrior

Erfahrenes Mitglied
’nabend

Ich hab mich jetzt mal etwas genauer mit den beiden im Titel genannten Tags beschäftigt, aber ich werde einfach nicht schlau daraus – wann verwendet mann denn pre? Ich wüsste da ehrlich kein Einsatzgebiet. Bei SELFHTML steht »wenn Sie keine Tabellen verwenden wollen« – häh? Was hat denn das zu bedeuten. Was spricht für die Verwendung des einen, was für die des anderen?

Ich bitte um Aufklärung!

SilentWarrior
 
Der Unterschied liegt in der Bedeutung.
Bei code handelt es sich, Du wirst es ahnen, um Quelltexte. Das Element beschreibt also sehr spezifisch, was der Text dazwischen bedeutet.
pre sagt lediglich aus, dass es sich um vorformatierten Text handelt. Das sind z.B. ASCII-Grafiken oder Text-Tabellen.
Über die tatsächliche Bedeutung von dem, was dort drinnen steht, erfährt der Browser (im Sinne von semantischem Markup) jedoch nichts.
Rein optisch lässt sich pre natürlich auch für Quelltexte verwenden, aber eindeutig als solcher gekennzeichnet ist Quelltext durch code.

Gruß hpvw

EDIT: Text-Tabelle (hier natürlich mit Code gemacht):
Code: 
|         | Spalte 1  | Spalte 2  |
|---------+-----------+-----------|
| Zeile 1 | Zelle 1/1 | Zelle 1/2 |
| Zeile 2 | Zelle 2/1 | Zelle 2/2 |
|---------+-----------+-----------|
 
Zuletzt bearbeitet:
Hmm … ok, danke mal für die Informationen. Wobei mir ehrlich gesagt schleierhaft ist, wieso man tabellarische Daten nicht in eine Tabelle packen sollte. :confused: ASCII-Art ist da schon sinnvoller – allerdings erstaunt es mich, dass das W3C dafür einen eigenen Tag entwickelt hat.

Nujo, ich werd dann mal weiterhin code verwenden.
 
Zuletzt bearbeitet:
Naja.... <code> zeichnet Code zwar als solchen aus, mit <pre> lässt sich solcher aber hervorragend darstellen, da Steuerzeichen berücksichtigt werden....davon ausgehend halt ich <pre> für ein sehr nützliches Element.
 
Getestet mit IE 6, FF 1, OP 8 und NS 7.1:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type"
            content="application/xhtml+xml; charset=UTF-8" />
        <title></title>
        <style type="text/css" media="all">
            code {
                display:block;
                white-space: pre;
                border:1px #000 solid;
                padding:2px;
            }
        </style>
    </head>
    <body>
        <div><code>&lt;?
if (isset($_GET['foo'])) {
    echo "foo ist gesetzt";
    if (empty($_GET['foo'])) {
        echo "aber leer";
    }
}
?&gt;</code></div>
    </body>
</html>
Du kannst also beruhigt semantisches Markup verwenden.
Das div dient der Valididität in der Strict-Variante. display:block ist definiert, um den Rahmen nicht zeilenweise darstellen zu lassen. display, Rahmen und Innenabstand dienen somit nur der Optik. white-space: pre funktioniert auch ohne diese drei Angaben.

gruß hpvw

EDIT: Uuups, durch das div ist mir jetzt der Unterschied aufgefallen:
code ist ein Inline-Element und pre ist ein Block-Element.
Es geht also auch so:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type"
            content="application/xhtml+xml; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        <pre><code>&lt;?
if (isset($_GET['foo'])) {
    echo "foo ist gesetzt";
    if (empty($_GET['foo'])) {
        echo "aber leer";
    }
}
?&gt;</code></pre>
    </body>
</html>

Und noch ein Edit:
Zeilennummerierung, erfolgreich in OP 8 getestet:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type"
            content="application/xhtml+xml; charset=UTF-8" />
        <title></title>
        <style type="text/css" media="all">
            pre {
                counter-reset:code;
            }
            pre code:before {
                display:block;
                float:left;
                content:counter(code) " ";
                counter-increment:code;
                width:3em;
                text-align:right;
                background:#eee;
                margin-right:2px;
            }
            code {
                white-space:pre;
                margin:0;
            }
            pre {
                border:1px #000 solid;
                padding:2px;
            }
        </style>
    </head>
    <body>
        <pre><code>&lt;?</code>
<code>if (isset($_GET['foo'])) {</code>
<code>    echo "foo ist gesetzt ";</code>
<code>    if (empty($_GET['foo'])) {</code>
<code>        echo "aber leer";</code>
<code>    } else {</code>
<code>        echo "und enth&auml;lt ".$_GET['foo'];</code>
<code>    }</code>
<code>}</code>
<code>?&gt;</code></pre>
        <pre><code>&lt;?</code>
<code>if (isset($_GET['foo'])) {</code>
<code>    echo "foo ist gesetzt ";</code>
<code>    if (empty($_GET['foo'])) {</code>
<code>        echo "aber leer";</code>
<code>    } else {</code>
<code>        echo "und enth&auml;lt ".$_GET['foo'];</code>
<code>    }</code>
<code>}</code>
<code>?&gt;</code></pre>
    </body>
</html>

Und noch ein Edit:
Zeilennummerierung in IE 6, FF 1, OP 8 und NS7.1
Leider nur in Transitional valide, wegen dem Start-Attribut.
Das Markup lässt natürlich etwas zu Wünschen übrig, ist aber auch mit deaktiviertem Stylesheet einigermaßen zu gebrauchen.
In OP 8 ist es genau, wie ich es mir vorgestellt habe.
In den anderen drei Browsern muss man leichte Abstriche beim verkleinern des Browserfensters machen, am schlimmsten im IE 6.
Im IE fehlt außerdem der Zeilen-Hover-Effekt.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
    body {
        font-family: Arial, sans-serif;
        background:#fff;
        margin:0;
        padding:10px;
    }
    div.code {
        border:#448 2px solid;
        display:block;
        background:#ddf;
        padding:0;
        margin:0 0 0 1em;
        font-size:0.9em;
    }
    div.code hr {
        display:none;
    }
    div.code ol {
        display:block;
        background:#ddf;
        color:#000;
        font-family:Courier New, monospace;
        font-size:1em;
        margin-top:0;
        margin-bottom:0;
    }
    div.code li {
        background:#fff;
        color:#000;
        font-family:monospace;
        font-size:0.95em;
    }
    div.code li.extra {
        font-weight:bold;
        background:#fff;
        color:#448;
    }
    div.code ol li pre.line {
        diplay:block;
        margin:0;
        padding:0;
        font-size:1.1em;
        background:#fff;
        color:#000;
        font-weight:normal;
        vertical-align:top;
        border-left:#448 2px solid;
        white-space:pre;
    }
    div.code ol li pre.line:hover {
        background:#eef;
    }
    div.codeTitle {
        background:#eef;
        margin:1em 0 0 1em;
        padding:4px 1em;
        border:#448 2px solid;
        border-width:2px 2px 0 2px;
        font-size:0.9em;
        text-align:left;
    }
    div.code code {
        white-space:normal;
        margin:0;
        padding:0;
    }
    div.codeTitle hr {
        display:none;
    }
    div.codeTitle img {
        border:none;
        padding:0 0.3em 0 0;
    }
</style>

</head>
<body>

<div class="codeTitle"><hr /><a href="#" title="Quelltext herunterladen"><img src="./document.save.gif" alt="Download" title="Quelltext herunterladen" /></a> demo.php<hr /></div>
<div class="code">
<ol start="1">
<li><pre class="line"><code>&lt;?</code></pre></li>
<li><pre class="line">    <code>if (isset($_GET['foo'])) {</code></pre></li>
<li><pre class="line">        <code>echo "foo ist gesetzt ";</code></pre></li>
<li><pre class="line">        <code>if (empty($_GET['foo'])) {</code></pre></li>
<li class="extra"><pre class="line">            <code>echo "aber leer";</code></pre></li>
<li><pre class="line">        <code>} else {</code></pre></li>
<li><pre class="line">            <code>echo "und enth&auml;lt ".$_GET['foo'];</code></pre></li>
<li><pre class="line">        <code>}</code></pre></li>
<li><pre class="line">    <code>} else {</code></pre></li>
<li class="extra"><pre class="line">        <code>echo "foo ist nicht gesetzt";</code></pre></li>
<li><pre class="line">    <code>}</code></pre></li>
<li><pre class="line"><code>?&gt;</code></pre></li>
</ol>
<hr /></div>

<div class="codeTitle"><hr /><a href="#" title="Quelltext herunterladen"><img src="./document.save.gif" alt="Download" title="Quelltext herunterladen" /></a> demo.php<hr /></div>
<div class="code">
<ol start="4">
<li><pre class="line">        <code>if (empty($_GET['foo'])) {</code></pre></li>
<li class="extra"><pre class="line">            <code>echo "aber leer";</code></pre></li>
<li><pre class="line">        <code>} else {</code></pre></li>
<li><pre class="line">            <code>echo "und enth&auml;lt ".$_GET['foo'];</code></pre></li>
<li><pre class="line">        <code>}</code></pre></li>
</ol>
<hr /></div>

</body>
</html>
 
Zuletzt bearbeitet:
Wow! Vielen Dank für die ausführlichen Recherchen, hpvw! Echt unglaublich! :eek:

Sven, was sind denn Steuerzeichen? Meinst du eckige Klammern und sowas? Oder Zeilenumbrüche?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück