HTML <tt>-Tag
Das HTML <tt>-Tag ist veraltet und wurde aus HTML5 entfernt. Erfahren Sie, welche modernen Tags und CSS stattdessen verwendet werden sollten.
Das <tt>-Tag (Teletype) ist veraltet und wurde aus HTML5 entfernt — verwenden Sie es nicht. Es stellte einst Inline-Text in einer nichtproportionalen Schrift mit fester Breite dar, wie er auf einem Fernschreiber oder einer Schreibmaschine erschienen wäre. Moderne Browser zeigen es möglicherweise noch an, aber es hat keine semantische Bedeutung und ist kein gültiges HTML. Verwenden Sie stattdessen ein semantisches Element oder CSS.
<tt> ist ein veraltetes HTML-Tag. Es wird nur zur Referenz aufgeführt. Neue Dokumente dürfen es nicht verwenden.
Die Begriffe Monotype, Monospace und nichtproportional sind austauschbar: Sie beschreiben alle eine Schriftart, deren Zeichen dieselbe horizontale Breite einnehmen, sodass Textspalten aufeinander ausgerichtet sind.
Was statt <tt> verwenden
<tt> war rein präsentationsbezogen — es sagte nichts darüber aus, warum Text in Monospace dargestellt wurde. HTML5 ersetzt es durch Elemente mit Bedeutung sowie CSS für die seltenen Fälle, in denen man nur die Monospace-Optik wünscht.
| Ich möchte markieren… | Verwenden | Beispiel |
|---|---|---|
| Quellcode, ein Tag, ein Befehl | <code> | <code>git commit</code> |
| Tastatureingaben, die der Benutzer eintippen soll | <kbd> | <kbd>Ctrl</kbd> |
| Ausgabe, die ein Programm erzeugt | <samp> | <samp>Build passed</samp> |
| Ein Variablen- oder Platzhalternamen | <var> | <var>filename</var> |
| Monospace rein für die Darstellung | eine CSS-Klasse mit font-family: monospace | siehe unten |
<pre> ist kein direkter Ersatz: Das <pre>-Tag bewahrt Leerzeichen und Zeilenumbrüche (vorformatierter Text). Es geht um Layout, nicht um die Bedeutung des Textes, und wird häufig mit <code> für Codeblöcke kombiniert.
Das richtige Element wählen
- Verwenden Sie ein semantisches Element (
<code>,<kbd>,<samp>,<var>), wenn der Text etwas bedeutet — dies verbessert die Barrierefreiheit und ermöglicht es, jede Art unterschiedlich zu gestalten. Alle vier werden standardmäßig in einer Monospace-Schrift dargestellt. - Verwenden Sie CSS nur, wenn Sie die Monospace-Optik ohne besondere Bedeutung wünschen. Wenden Sie es über eine Klasse oder eine
<style>-Regel an, nicht über ein Inline-style-Attribut, damit die Präsentation in Ihrem Stylesheet bleibt.
Semantische Ersetzungen in der Praxis
Dieses Beispiel zeigt <code>, <kbd> und <samp> zusammen in einer realistischen Anweisung:
<!DOCTYPE html>
<html>
<head>
<title>Replacing the tt tag</title>
</head>
<body>
<p>
Stage your changes with <kbd>git add .</kbd>, then run
<code>git commit -m "message"</code>.
</p>
<p>
On success Git prints <samp>1 file changed</samp>.
</p>
</body>
</html>CSS-Monospace nur für die Darstellung
Wenn Sie nur die Monospace-Optik benötigen — ohne semantische Bedeutung — definieren Sie eine Klasse in CSS, anstatt <tt> oder einen Inline-Style zu verwenden:
<!DOCTYPE html>
<html>
<head>
<title>Monospace text with CSS</title>
<style>
.mono {
font-family: monospace;
}
</style>
</head>
<body>
<p>This is an ordinary text.</p>
<p class="mono">And this is monospaced text.</p>
</body>
</html>Weitere Informationen zu Schrift-Stacks finden Sie in der CSS-Eigenschaft font-family.
Legacy-Syntax <tt> (nicht verwenden)
Nur zur Referenz: Das veraltete <tt>-Element wurde als Paar von Tags mit dem Inhalt dazwischen geschrieben:
<!-- Obsolete: removed from HTML5. Shown for reference only. -->
<p>This is an ordinary text.</p>
<p><tt>And this is a teletype text.</tt></p>