Tag HTML <tt>
Il tag HTML <tt> è obsoleto e rimosso da HTML5. Scopri quali tag moderni e CSS usare al suo posto per il testo monospace.
Il tag <tt> (telescrivente) è obsoleto ed è stato rimosso da HTML5 — non usarlo. Un tempo rendeva il testo inline con un carattere monospace a larghezza fissa, come appariva su una telescrivente o una macchina da scrivere. I browser moderni potrebbero ancora visualizzarlo, ma non ha alcun significato semantico e non è HTML valido. Usa invece un elemento semantico o CSS.
<tt> è un tag HTML deprecato. È elencato solo come riferimento. I nuovi documenti non devono utilizzarlo.
I termini monotipo, monospace e non-proporzionale sono intercambiabili: descrivono tutti un carattere tipografico i cui caratteri occupano la stessa larghezza orizzontale, in modo che le colonne di testo si allineino.
Cosa usare al posto di <tt>
<tt> era puramente presentazionale — non indicava perché il testo fosse in monospace. HTML5 lo sostituisce con elementi che portano un significato, più CSS per i casi in cui si vuole solo l'aspetto monospace.
| Vuoi contrassegnare… | Usa | Esempio |
|---|---|---|
| Codice sorgente, un tag, un comando | <code> | <code>git commit</code> |
| Input da tastiera che l'utente deve digitare | <kbd> | <kbd>Ctrl</kbd> |
| Output prodotto da un programma | <samp> | <samp>Build passed</samp> |
| Il nome di una variabile o segnaposto | <var> | <var>filename</var> |
| Monospace puramente per la presentazione | una classe CSS con font-family: monospace | vedi sotto |
<pre> non è un sostituto diretto: il tag <pre> preserva gli spazi bianchi e le interruzioni di riga (testo preformattato). Riguarda il layout, non il significato del testo, ed è spesso combinato con <code> per i blocchi di codice.
Scegliere l'elemento giusto
- Usa un elemento semantico (
<code>,<kbd>,<samp>,<var>) ogni volta che il testo significa qualcosa — questo migliora l'accessibilità e permette di stilizzare ogni tipo in modo diverso. Tutti e quattro vengono visualizzati con un carattere monospace per impostazione predefinita. - Usa il CSS solo quando si vuole l'aspetto monospace senza alcun significato speciale. Applicalo tramite una classe o una regola
<style>, non un attributostyleinline, in modo che la presentazione rimanga nel foglio di stile.
Sostituzioni semantiche in uso
Questo esempio mostra <code>, <kbd> e <samp> che lavorano insieme in un'istruzione realistica:
<!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 solo per la presentazione
Quando hai bisogno solo dell'aspetto monospace — senza alcun significato semantico — definisci una classe in CSS invece di usare <tt> o uno stile inline:
<!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>Consulta la proprietà CSS font-family per saperne di più sugli stack di font.
Sintassi legacy <tt> (da non usare)
Solo per riferimento, il vecchio elemento <tt> si scriveva come una coppia di tag con il contenuto tra di essi:
<!-- 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>