2 tags HTML que no conocías <base> y <abbr>

- 👤 Andrés Cruz

🇺🇸 In english

2 tags HTML que no conocías <base> y <abbr>

En la API de HTML existen muchas tags o elementos muy poco usados por tener funciones muy específicas y por lo tanto no son tan famosos pero que son iguales útiles; hoy veremos un par de tags HTML que puede que no conozcas:

Antes aprendiste a incrustar de manera nativa audio y videos con HTML.

La etiqueta<base>

Este elemento define una URL y/o target global al documento que permite sobrescribir los atributos target y/o href que no se encuentren especificados en un elemento <a>.

¡IMPORTANTE! solo puede haber un elemento <base> en el head del documento.

Si alguna vez has trabajado con enlaces relativos, rutas largas o montones de páginas que comparten la misma estructura, seguro que en algún momento te has preguntado si existe una manera más cómoda de gestionar todo eso. Y sí: existe. Se llama etiqueta <base> y, aunque muchos la pasan por alto, puede ahorrarte horas de trabajo y dolores de cabeza.

En este artículo te cuento qué es, cómo funciona y te muestro ejemplos reales (incluyendo uno en el que me encontré con un enlace vacío que terminó abriéndose en Bing por la URL base… sí, pasó).

Qué es la etiqueta <base> y para qué sirve

La etiqueta <base> permite definir una URL base y/o un target global para todos los enlaces y recursos relativos del documento. Dicho de forma simple: establece “de dónde parten” los enlaces que no tienen una ruta completa.

Cómo interpreta el navegador la URL base

Cuando el navegador encuentra <base href="https://ejemplo.com/">, cualquier enlace relativo como about.html se convierte automáticamente en:

https://ejemplo.com/about.html

Esto aplica a enlaces, imágenes, scripts o cualquier recurso que use rutas relativas.

En qué casos conviene usarla

  • Sitios grandes con muchas páginas.
  • Proyectos donde quieres que todos los enlaces se abran igual (misma pestaña o nueva pestaña).
  • Documentación o demos que usan rutas relativas cortas.
  • Evitar duplicación de rutas largas en cada enlace.

Sintaxis de <base>: atributos href y target

Como comentamos antes, solo puede haber un único <base> en el head. Además, es un elemento vacío, así que no tiene etiqueta de cierre.

<base href="https://ejemplo.com/seccion/" target="_blank">

href: cómo define la ruta base de enlaces y recursos

El atributo href marca la URL que se utilizará como base para todos los enlaces relativos.

Por ejemplo, al dejar un enlace vacío así:

<a href="">Google.com</a>

El navegador usó directamente la URL del <base>. En mi caso terminaba enviándome a Bing sin querer, porque lo había definido como base en el head.

target: cómo controla la apertura de enlaces

target define dónde se abrirán los enlaces que no tengan target propio.

Valores más usados:

  • _self → en la misma pestaña.
  • _blank → nueva pestaña (el que suelo usar cuando quiero que la navegación no distraiga de la página principal).
  • _parent y _top → menos comunes, útiles con frames.

En uno de mis ejemplos, al usar:

<base href="https://www.bing.com/" target="_blank">

Todos los enlaces sin target explícito se abrían en una pestaña nueva gracias a este atributo.

Ejemplos rápidos de uso correcto

<head>
 <base href="https://miweb.com/blog/" target="_self">
</head>
<body>
 <a href="post-1.html">Ver post</a>
 <img src="img/portada.png">
</body>

Resultados:

  • post-1.html → https://miweb.com/blog/post-1.html
  • img/portada.png → https://miweb.com/blog/img/portada.png

Cómo funciona <base> en la práctica (con ejemplos reales)

Qué pasa cuando un enlace no tiene href

Un <a href="">Texto</a> adoptó directamente la URL base y terminaba llevándome a esa URL exacta. Si <base href="https://www.bing.com/">, entonces el enlace apunta a Bing, aunque el texto diga “Google.com”.

Qué ocurre si el enlace sí tiene href absoluto, aquí no hay sorpresas: la ruta absoluta siempre gana.

<base href="https://www.bing.com/">
<a href="https://google.com/">Google</a>

Este enlace te llevará a Google. Sin trucos.

Cómo afecta al target cuando no se especifica en el enlace

Esto también lo viví al probar ejemplos: si <base target="_blank"> y el enlace no incluye target, dicho enlace hereda _blank.

Por eso, incluso enlaces internos se abrían en nueva pestaña.

Buenas prácticas, errores comunes y cómo evitarlos

  • Solo puede haber un <base>: por qué y qué pasa si agregas más
  • Los navegadores solo usan el primero. Cualquier <base> adicional es ignorado.
    • Por eso es importante colocarlo bien y solo una vez.

Problemas frecuentes con rutas relativas y cómo solucionarlos

  • Errores típicos:
    • Configurar un href de base incorrecto.
    • Usar rutas relativas que empiezan con /, lo cual ignora el <base>.
    • Mezclar rutas absolutas y relativas sin estrategia.
  • Solución:
    • Comprobar siempre con herramientas de inspección.
    • Probar enlaces e imágenes después de implementar <base>.
    • Revisar si las rutas relativas comienzan con / (eso rompe la lógica de base).

Cuándo NO deberías usar <base>

  • En aplicaciones SPA con routers (como React Router): puede interferir.
  • En sitios donde cada página tiene rutas muy distintas.
  • Cuando trabajas con muchas rutas absolutas: no aporta beneficio real.

Casos prácticos avanzados

Sitios con muchas páginas y rutas profundas

Si tu estructura es del estilo:

/blog/
/blog/articulos/
/blog/articulos/2025/

Tener:

<base href="https://miweb.com/blog/articulos/">

Simplifica enlaces como:

<a href="2025/post-1.html">

Comportamiento con imágenes, scripts y recursos estáticos

El <base> afecta:

  • imágenes
  • scripts
  • CSS
  • iframes
  • formularios con acción relativa

Por eso es importante definirlo pensando en todos los recursos, no solo los enlaces.

Cómo anular el comportamiento del <base> en un enlace concreto

Muy simple: usa href absoluto o agrega un target propio.

<a href="https://externo.com" target="_self">Ir a externo sin nueva pestaña</a>

Compatibilidad, especificación y comportamiento en navegadores

Qué dice la especificación HTML actual

  • Es un empty element.
  • Pertenece a la categoría de metadatos.
  • Debe estar dentro del <head>.
  • El DOM lo expone como HTMLBaseElement.
    • document.baseURI permite inspeccionar la URL base propuesta por el navegador.

Compatibilidad por navegador

Compatibilidad total:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Ejemplos

Si tenemos el siguiente código HTML:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Elemento base 1</title>
            <base href="https://www.bing.com/" target="_blank">
        </head>

        <body>
            <a href="">Google.com</a>
        </body>
    </html>

Veremos que al presionar sobre el enlace "Google.com" esta nos redirigirá al buscador de Microsoft en la siguiente dirección: https://www.bing.com/.

Ver ejemplo

Si por el contrario, si especificamos la URL en el atributo href del enlace:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Elemento base 2</title>
            <base href="https://www.bing.com/" target="_blank">
        </head>

        <body>
            <a href="http://www.google.com/">Google.com</a>
        </body>
    </html>

El enlace nos redirigirá a Google.com aunque al no especificar el target se abrirá el enlace en una pestaña nueva.

Ver ejemplo

La etiqueta <abbr>

La etiqueta <abbr> es una de esas pequeñas joyas de la semántica HTML que solemos pasar por alto, pero que aporta mucha claridad al contenido. Sirve para marcar abreviaturas y acrónimos, informando al navegador -y a los usuarios- de que esa palabra tiene una versión extendida.

Lo mejor es que mejora la accesibilidad, el SEO semántico y la experiencia del lector sin esfuerzo. Cuando la usé por primera vez para definir PHP con su expansión completa -PHP Hypertext Pre-processor-; con el tooltip aclaraba la lectura sin interrumpir el flujo del texto. Ese pequeño detalle marca la diferencia.

Cómo usar <abbr> paso a paso (con ejemplos reales)

Ejemplo básico

Este es el uso más sencillo: solo marcas el término abreviado.

<p>El término <abbr>Km</abbr> es una unidad de longitud.</p>

Sin atributos, simplemente señalas que “Km” es una abreviatura.

Ejemplo con atributo title

Aquí aportas la versión completa del término. Es la forma más común:

<p>El lenguaje de programación <abbr title="PHP Hypertext Pre-processor">PHP</abbr> es muy popular.</p>

Como comenté antes, cuando marqué “PHP” así en un proyecto, el navegador mostraba automáticamente la descripción al pasar el ratón. Es una forma sencilla de agregar contexto sin recargar el texto.

Uso combinado con <dfn>

Cuando defines un término nuevo, puedes combinar ambas etiquetas:

<p>
 El término <dfn><abbr title="Kilómetro">Km</abbr></dfn> es una unidad de longitud.
</p>

Esto deja claro que “Km” es la definición del concepto y, a la vez, una abreviatura.

Buenas prácticas desde la experiencia

A lo largo del tiempo, he aprendido estas reglas sencillas:

  • Si la abreviatura puede confundir, marca siempre con <abbr>.
  • Si ya la explicaste una vez, no necesitas repetir title.
  • Evita meter definiciones demasiado largas dentro del title.

Comprueba el tooltip en varios navegadores: algunos muestran punteado, otros versalitas, otros nada (lo he sufrido…).

Cuándo conviene usar <abbr> y cuándo no

Casos útiles para:

  • Para términos técnicos (HTML, CSS, JS, API…).
  • Para entidades oficiales (ONU, OMS, UE).
  • Para unidades y medidas (Kg, Km, ml).
  • Para conceptos largos cuyo significado quieras aclarar sin cortar la lectura.

Situaciones donde es mejor evitarlo:

  • Cuando el contexto ya deja claro el significado.
  • Cuando la abreviatura aparece tantas veces que el tooltip se vuelve molesto.
  • Cuando la expansión completa esté justo en el texto; en ese caso, no uses title.

Accesibilidad: el gran motivo para usar <abbr>

Aquí es donde el tag <abbr> es más útil. Los lectores de pantalla pueden interpretar mejor la abreviatura cuando se incluye el atributo title. Esto ayuda a:

  • Personas que no conocen el término técnico.
  • Lectores con dificultades cognitivas.
  • Usuarios que no dominan el idioma.

Reglas recomendadas

  • Expón el término completo al menos una vez en la página.
  • Usa title solo si no has puesto la expansión en el texto.
  • Mantén la definición breve y exacta.

Errores comunes

  • Creer que title es obligatorio (no lo es).
  • Usar textos demasiado largos dentro del atributo.
  • Repetir la expansión en todas las apariciones.

Estilos y comportamiento visual del elemento

Por defecto, <abbr> es inline. El navegador puede:

  • Subrayarlo con puntos.
  • Mostrarlo en versalitas.
  • O no aplicarle ningún estilo especial.
  • Subrayados, versalitas y tooltips

Es normal que el tooltip del atributo title se muestre o no dependiendo del sistema. Me ha pasado que el estilo por defecto no se veía nada, así que suelo aplicar un pequeño indicativo:

abbr {
 text-decoration: underline dotted;
 cursor: help;
}

Personalización con CSS

Puedes estilizarlo como cualquier elemento inline:

abbr.api {
 font-weight: bold;
 color: #0055ff;
}

Comparativa: <abbr> vs <dfn>

  • <abbr> → Marca una abreviatura o acrónimo.
  • <dfn> → Señala el término que está siendo definido.

Puedes usarlos juntos o por separado. Si solo estás explicando una abreviatura, <abbr> basta. Si introduces una definición formal, incluye <dfn>.

Ejemplos prácticos listos para copiar

Abreviatura simple

<p>Estamos migrando la web a <abbr>HTTPS</abbr>.</p>

Con expansión clara

<p>El formato <abbr title="JavaScript Object Notation">JSON</abbr> es muy usado.</p>

En listas o tablas

<li><abbr title="Alemania">DE</abbr></li>
<li><abbr title="Brasil">BR</abbr></li>

Con interacción JavaScript

<abbr title="Canadá" onclick="alert('Canadá es el segundo país más grande del mundo.')">CA</abbr>

Preguntas frecuentes sobre <abbr>

  • ¿Es obligatorio el atributo title?
    • No. Puedes usar <abbr> sin title si la expansión aparece en el texto.
  • ¿Google usa la información del atributo title?
    • No directamente para ranking, pero sí mejora la semántica y la comprensión del contenido.
  • ¿Puedo usar <abbr> en cualquier parte del documento?
    • Sí, siempre que el elemento padre acepte contenido de texto.
  • ¿Cómo afecta a la accesibilidad?
    • Ayuda mucho, especialmente si introduces términos técnicos.

En pocas palabras:
<abbr> = abreviatura marcada con semántica + opción de explicación completa

En Resumen el elemento simplemente permite definir una abreviación como podemos ver en el siguiente ejemplo:

 <p>El lenguaje de programación <abbr title="PHP Hypertext Pre-processor">PHP</abbr>...</p>

El lenguaje de programación PHP...

Consulta la documentación oficial en los siguientes enlaces:

✔️ Conclusión

  • La etiqueta <abbr> es sencilla pero poderosa: aporta accesibilidad, claridad y semántica al contenido web. No solo mejora la experiencia del usuario, sino que ayuda a que tu HTML sea más limpio y profesional. En mi experiencia, marcar abreviaturas como “PHP”, “JSON” o “ONU” con sus expansiones correspondientes evita confusiones y da una impresión de cuidado editorial que siempre suma.
  • La etiqueta <base> es una de esas herramientas invisibles que, cuando entiendes bien, te simplifican el mantenimiento del sitio y te ayudan a tener rutas más limpias y coherentes. No es mágica, pero sí muy conveniente en estructuras complejas.
    • En mis pruebas (incluida aquella vez en la que enlacé sin querer a Bing con un <a href="">) confirmé que entender bien cómo heredan los enlaces la URL base y el target evita errores difíciles de detectar.
    • Úsala cuando tenga sentido, pruébala a fondo y aprovéchala para tener un HTML más ordenado y coherente.

Ahora aprende a usar la etiqueta de detalle y resumen en HTML.

Acepto recibir anuncios de interes sobre este Blog.

En la API de HTML existen muchas tags o elementos muy poco usados por tener funciones muy específicas y por lo tanto no son tan famosos pero que son iguales útiles; hoy veremos un par de tags HTML que puede que no conozcas.

| 👤 Andrés Cruz

🇺🇸 In english
🏷️HTML