Referencia de etiquetas

Etiqueta basefont en HTML: obsoleta y reemplazo con CSS

La etiqueta <basefont> está obsoleta y no debe usarse en páginas nuevas. Servía para definir valores base de fuente, tamaño y color en documentos antiguos; hoy ese trabajo corresponde a CSS. Esta guía ayuda a reconocerla al mantener una página heredada y a reemplazar su presentación sin cambiar el significado del texto. El HTML Living Standard la incluye entre las funciones que los autores no deben utilizar.

Ejemplo histórico: qué pretendía configurar

Este fragmento se muestra únicamente como código de referencia:

<basefont face="Arial" size="3" color="#222222">
<p>Texto de una página antigua.</p>

La intención era establecer Arial, el nivel de tamaño 3 y un gris oscuro para el texto. No se garantiza que un navegador actual aplique esos atributos. <basefont> tampoco producía texto visible por sí misma.

Era un elemento vacío: no contenía el párrafo ni llevaba </basefont>. En la DTD Transitional de HTML 4.01, pertenecía al contenido en línea admitido en el cuerpo, y size era obligatorio. El párrafo del ejemplo es su hermano, no su hijo. No debe confundirse con una configuración de metadatos en <head>.

Tamaño base y cambios locales con font

La explicación histórica de HTML 4.01 sobre FONT y BASEFONT distinguía dos funciones: <basefont> establecía el tamaño base y  modificaba la presentación del texto encerrado entre sus etiquetas. Los cambios relativos de , como size="+1", se calculaban sobre esa base; sin <basefont>, la base era 3.

La escala iba de 1 a 7 y su representación dependía del navegador. Por eso size="3" no significa 3px ni permite deducir un tamaño fijo en píxeles. La fuente histórica también advertía que el tamaño base no se aplicaba a los encabezados, salvo modificaciones relativas con .

Estas etiquetas mezclaban presentación con contenido. CSS permite organizar esos estilos en reglas reutilizables; sustituirlas requiere elegir una tipografía legible, no conservar mecánicamente sus números.

Atributos antiguos y propiedades actuales

Atributo de `<basefont>`	Función histórica	Sustitución en CSS
`size`	Tamaño base de la escala antigua; obligatorio en la DTD Transitional	`font-size`, con una unidad o un valor CSS válido
`color`	Color del texto	`color`
`face`	Lista de nombres de fuentes, en orden de preferencia	`font-family`, con alternativas y una familia genérica

La DTD citada declara esos atributos de presentación y también id. Este último identifica el elemento; no selecciona una tipografía. No hay que trasladar a <basefont> todos los atributos admitidos por .

En HTML actual, atributos globales como class, id o lang cumplen otras funciones en elementos válidos. En el ejemplo siguiente, lang declara el idioma y class permite aplicar una regla local. font-family y font-size son propiedades CSS, no atributos HTML ni instrucciones de JavaScript.

Migración completa con CSS heredable

Guarda este documento como pagina.html en UTF-8 y ábrelo en el navegador. Incluye todo el HTML y CSS necesario; usa fuentes locales y no requiere imágenes, JavaScript ni servidor.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Información de la biblioteca</title>
    <style>
      body {
        margin: 0;
        padding: 1rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
        color: #222222;
        background-color: #ffffff;
        line-height: 1.6;
      }

      main {
        max-width: 60ch;
        margin-inline: auto;
      }

      .destacado {
        font-size: 1.25em;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Biblioteca del barrio</h1>
      <p>Consulta libros y participa en los talleres de lectura.</p>
      <p class="destacado">La inscripción a los talleres es gratuita.</p>
    </main>
  </body>
</html>

Verás un encabezado y dos párrafos sobre fondo blanco, con texto oscuro y espacio entre líneas. El segundo párrafo tiene un tamaño un 25 % mayor que el heredado. No comunica una importancia especial por ese tamaño: si el mensaje necesitara importancia semántica, habría que expresarla con el HTML adecuado.

font-family, font-size y color se heredan de padres a hijos cuando el elemento no tiene un valor propio que los sustituya. Por eso los párrafos reciben la configuración de <body>. Los encabezados pueden conservar reglas de tamaño y peso del navegador. Consulta la herencia en CSS para esta distinción.

1rem toma como referencia el tamaño de fuente del elemento raíz; aquí no se fija ese tamaño en píxeles. En font-size, 1.25em se calcula respecto al tamaño heredado. Son unidades relativas definidas por CSS, sin equivalencia automática con la antigua escala.

La lista de familias de CSS ofrece respaldo: si Arial no está disponible, se intenta Helvetica y después la familia genérica sans-serif. La apariencia exacta puede variar entre sistemas.

Cómo comprobar la migración

Abre el archivo a anchura de móvil y de escritorio. El texto debe ajustarse sin quedar cortado.
Amplía con el zoom del navegador al 200 %. Comprueba que puedes leer todo el contenido y desplazarte hasta el último párrafo. WCAG explica la ampliación sin pérdida de contenido.
Revisa el contraste entre #222222 y #ffffff: es aproximadamente 15,91:1, superior al mínimo de 4,5:1 para texto normal. Si cambias cualquiera de los dos colores, vuelve a calcularlo.
Cambia body a font-size: 1.125rem: los párrafos deben crecer, incluido el cambio local relativo. Retira después .destacado y ambos párrafos tendrán el mismo tamaño.

Al quitar <basefont> de una página antigua, su texto permanece, pero los efectos que dependieran de ella pueden desaparecer. Establece primero el CSS necesario y revisa también los cambios locales con . En la migración anterior no queda ninguna dependencia de la etiqueta obsoleta.

Errores frecuentes y preguntas

¿Basefont se sigue usando? Puede aparecer en archivos heredados; para contenido nuevo está obsoleta. Que un navegador reconozca su nombre no demuestra que aplique su presentación ni la convierte en HTML válido para autoría actual.

¿Cómo defino la fuente de toda la página? Aplica font-family a body y revisa las reglas locales que puedan sobrescribirla. Para una sola zona, utiliza un contenedor adecuado.

¿Por qué no cambia nada al editar basefont? Reemplaza sus atributos por CSS y examina los estilos calculados del texto. Comprueba qué regla fija la fuente o el tamaño antes de aumentar números de la escala antigua.

Evita añadir un cierre a este elemento vacío, copiar size="3" como font-size: 3px o impedir el zoom para conservar el diseño. <style> contiene reglas CSS dentro del documento; <link rel="stylesheet"> enlaza una hoja externa. Ninguna de las dos necesita <basefont> para configurar la tipografía.

Compatibilidad y fuentes

Estado revisado el 3 de octubre de 2026: <basefont> está obsoleta en la norma vigente. HTML 4.01 y su DTD documentan sintaxis y comportamiento históricos; no son una garantía de reproducción en navegadores actuales. Para mantener una página, usa la migración con CSS y verifica su resultado en los navegadores de tu proyecto.