Etiqueta HTML <basefont>
La etiqueta <basefont> especifica el tamaño y color de fuente predeterminados del texto. Puede usarse dentro de <head> o <body>. Ver ejemplos.
La etiqueta <basefont> establecía el tamaño de fuente, el color y el tipo de letra predeterminados para todo el texto de una página. Podía colocarse dentro de las etiquetas <head> o <body>, y cualquier fragmento de texto que no sobrescribiera la fuente heredaba esos valores.
Esta página explica qué hacía <basefont>, por qué fue eliminada de HTML, y el CSS exacto que debes escribir hoy para obtener el mismo resultado.
La etiqueta <basefont> es una etiqueta HTML obsoleta. Fue eliminada en HTML5 y no debe usarse en páginas nuevas. Las secciones a continuación muestran el reemplazo moderno con CSS.
Por qué <basefont> está obsoleta
<basefont> es una etiqueta presentacional: mezcla información de estilo directamente en el marcado HTML. El HTML moderno sigue el principio de separación de responsabilidades — HTML describe la estructura y el significado del contenido, mientras que CSS gestiona toda la presentación (fuentes, colores, tamaños, espaciado). Como <basefont> existió únicamente para definir la presentación, HTML5 la eliminó por completo en favor de CSS.
Dos consecuencias prácticas:
- El soporte en navegadores es poco fiable. Incluso antes de HTML5, el comportamiento variaba entre navegadores, y los navegadores modernos pueden ignorar
<basefont>por completo. No puedes confiar en que renderice nada. - No es HTML5 válido. Un documento que use
<basefont>fallará la validación, y las herramientas (linters, editores, frameworks) lo marcarán como error.
Es posible que aún te encuentres con <basefont> al mantener sitios web antiguos, plantillas de correo electrónico o sistemas de gestión de contenido escritos antes de HTML5. Cuando eso ocurra, la solución segura es eliminar la etiqueta y reemplazarla con el CSS equivalente que se muestra a continuación.
Sintaxis
La etiqueta <basefont> está vacía, lo que significa que la etiqueta de cierre no es obligatoria. Pero en XHTML, la etiqueta (<basefont>) debe cerrarse (<basefont/>).
Ejemplo de la etiqueta 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>El reemplazo moderno con CSS
Para reproducir exactamente lo que hacía <basefont>, establece las propiedades CSS equivalentes en el selector body. Cada atributo antiguo se corresponde uno a uno con una propiedad CSS:
Atributo de <basefont> | Propiedad CSS | Valor de ejemplo |
|---|---|---|
color | color | green |
face | font-family | Helvetica |
size | font-size | 14px |
También puedes escribir los tres a la vez con la propiedad abreviada font.
¿Por qué apuntar a body? <basefont> funcionaba estableciendo valores predeterminados para toda la página que cada elemento heredaba a menos que especificara su propia fuente. CSS reproduce esto mediante la cascada: color, font-family y font-size son propiedades heredadas, de modo que cuando las defines en body, todos los elementos descendientes (encabezados, párrafos, listas, etc.) heredan automáticamente los mismos valores, a no ser que una regla más específica los sobrescriba. Aplicar estilos a body te proporciona así la misma fuente única de verdad que ofrecía <basefont>, pero con HTML5 válido y un comportamiento fiable entre navegadores.
Ejemplo del reemplazo CSS para <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>Esto produce el mismo texto verde en Helvetica a 14px que el ejemplo obsoleto <basefont color="green" face="Helvetica" size="14"> anterior, pero valida como HTML5 y se renderiza de forma consistente en todos los navegadores.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| color | color | Establece el color de texto predeterminado. No compatible con HTML5. |
| face | font_family | Define la fuente del texto. No compatible con HTML5. |
| size | number | Especifica el tamaño de fuente. No compatible con HTML5. |