Tag HTML <basefont>
Il tag <basefont> specifica le dimensioni e il colore predefiniti del testo. Può essere usato più volte in <head> o <body>. Esempi.
Il tag <basefont> impostava la dimensione, il colore e il tipo di carattere predefiniti per tutto il testo di una pagina. Poteva essere inserito all'interno dei tag <head> o <body>, e ogni porzione di testo che non sovrascriveva il font ereditava quei valori.
Questa pagina spiega cosa faceva <basefont>, perché è stato rimosso dall'HTML e il CSS esatto da scrivere oggi per ottenere lo stesso risultato.
Il tag <basefont> è un tag HTML deprecato. È stato rimosso in HTML5 e non deve essere utilizzato nelle nuove pagine. Le sezioni seguenti mostrano la sostituzione moderna con CSS.
Perché <basefont> è deprecato
<basefont> è un tag presentazionale: mescola informazioni di stile direttamente nel markup HTML. L'HTML moderno segue il principio della separazione delle responsabilità — l'HTML descrive la struttura e il significato del contenuto, mentre CSS gestisce tutta la presentazione (font, colori, dimensioni, spaziature). Poiché <basefont> esisteva esclusivamente per impostare la presentazione, HTML5 lo ha eliminato del tutto a favore di CSS.
Due conseguenze pratiche:
- Il supporto dei browser è inaffidabile. Anche prima di HTML5, il comportamento variava tra i browser, e i browser moderni potrebbero ignorare completamente
<basefont>. Non si può fare affidamento sul fatto che esegua il rendering di qualcosa. - Non è HTML5 valido. Un documento che utilizza
<basefont>non supererà la validazione, e gli strumenti (linter, editor, framework) lo segnaleranno come errore.
Potresti ancora imbatterti in <basefont> quando si gestiscono siti web più vecchi, template email o sistemi di gestione dei contenuti scritti prima di HTML5. In tal caso, la mossa sicura è eliminare il tag e sostituirlo con il CSS equivalente mostrato di seguito.
Sintassi
Il tag <basefont> è vuoto, il che significa che il tag di chiusura non è necessario. Ma in XHTML, il tag (<basefont>) deve essere chiuso (<basefont/>).
Esempio del tag HTML <basefont>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<basefont color="green" face="Helvetica" size="14">
</head>
<body>
<h3>Title of the text.</h3>
<p>Paragraph of the text.</p>
</body>
</html>La sostituzione moderna con CSS
Per riprodurre esattamente ciò che faceva <basefont>, imposta le proprietà CSS corrispondenti sul selettore body. Ogni vecchio attributo corrisponde uno a uno a una proprietà CSS:
Attributo <basefont> | Proprietà CSS | Valore di esempio |
|---|---|---|
color | color | green |
face | font-family | Helvetica |
size | font-size | 14px |
Puoi anche scrivere tutte e tre insieme usando la proprietà abbreviata font.
Perché usare body come selettore? <basefont> funzionava impostando valori predefiniti a livello di pagina che ogni elemento ereditava, a meno che non specificasse il proprio font. CSS riproduce questo meccanismo attraverso la cascata: color, font-family e font-size sono proprietà ereditabili, quindi quando le imposti su body, ogni elemento discendente (intestazioni, paragrafi, elenchi e così via) eredita gli stessi valori automaticamente — a meno che una regola più specifica non le sovrascriva. Applicare lo stile a body fornisce quindi la stessa unica fonte di verità che un tempo offriva <basefont>, ma con HTML5 valido e un comportamento coerente tra i browser.
Esempio della sostituzione CSS per <basefont>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: green;
font-family: Helvetica;
font-size: 14px;
}
</style>
</head>
<body>
<h3>Title of the text.</h3>
<p>Paragraph of the text.</p>
</body>
</html>Questo produce lo stesso testo verde in Helvetica da 14px dell'esempio con il deprecato <basefont color="green" face="Helvetica" size="14"> mostrato sopra — ma è valido come HTML5 e viene renderizzato in modo coerente tra i browser.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| color | color | Imposta il colore predefinito del testo. Non supportato in HTML5. |
| face | font_family | Definisce il font del testo. Non supportato in HTML5. |
| size | number | Specifica la dimensione del font. Non supportato in HTML5. |