El elemento html "base" Una ayuda para depurar códigos

El elemento html BASE. Características y particularidades en la documentación Html (4 y 5) y xHtml con ejemplos de uso.

El elemento html "base" Una ayuda para depurar códigos

Por Kseso ✎ 2

Elemento base de htmlSupón que tienes que depurar una parte de una web alojada sabe dios dónde que falla o que símplemente quieres comprender cómo ha hecho alguien algo que ha captado tu atención.

Sigue suponiendo. En ese trocito de código confluyen un montón de recursos: imágenes, enlaces a recursos como hojas de estilos, scripts... Ahora puedes optar por usar:

  • La técnica del salvaje: usar cualquier herramienta que esnife todos y cada uno de esos recursos y se descargar a local todo. Y todo es todo. Después ya verá qué no y qué sí necesita, además de netiquete.
  • La técnica del artesano: Copiar el código html y cambiar a mano las URI´s (direcciones) de los distintos elementos. Paciencia y tiempo sobran.
  • La técnica de quien sabe: Copiar sólo la parte del html que le interesa tal como está y usar el elemento html <BASE>.

El elemento html <base>

Al elemento Html <base> lo define la especificación como:

El valor del atributo 'href' del elemento 'base' especifica la URI base empleada para resolver todas las URIs relativas que haya en el documento.

URI: 'Uniform Resource Identifier' o identificador uniforme del recurso. Cadena de texto que identifica inequívocamente un recurso. Tales como el href o destino de un enlace, el src de una imagen, la url o ruta a una imagen en Css...

Veamos un ejemplo. Supón un documento html alojado en cualquier dominio (dominio1.com), y dentro de él en cualquier directorio. No importa su profundidad. Las rutas relativas dentro de ese documento tomarán como punto de partida (referencia) el directorio donde se encuentre el documento html. Declaremos el elemento base:

<head> <base href='http://www.otro-dominio.es/recursos'> ... </head> <<body> ... <img src='miimagen.jpg' alt='' />

En ausencia del elemento 'base' la imagen sería buscada en el mismo directorio donde se encontrase el documento html. Pero al estar declarado la ruta relativa 'miimagen.jpg' se convierte en http://www.otro-dominio.es/recursos/miimagen.jpg. Así que el navegador pedirá 'miimagen.jpg' al directorio 'recursos' del dominio 'www.otro-dominio.es'.

Particularidades del elemento html 'base'

Algunos aspectos a tener presentes en el uso del elemento html 'base':

  1. En su ausencia (no estar declarado) la base para resolver las rutas relativas es el directorio donde se encuentra el documento.
  2. Admite, además de los "atributos globales" (opcionales) el obligatorio 'href' y el atributo 'target' (opcional).
  3. No se cierra. Está prohibido por la especificación de Html 4.1 terminar el elemento con la barra invertida (/) precediendo al > final. Html5 no menciona este aspecto y en HTML es requerido terminar con ella '/>'.
  4. Debe declararse antes de cualquier otro elemento que contenga una URI, excepto del elemento html.
  5. Es un elemento clasificado en el grupo de los "metadata content".
  6. Es un elemento de los llamados 'vacíos' (empty element).
  7. Si se declaran varios elementos 'base' serán ignorados todos menos el primero que aparezca en el DOM.

Amplía info sobre el elemento html 'base'

  1. Base en html 4.1. Especificación
  2. Base en Html 5. Candidate recomendation.
  3. whatwg.org

Lectura complementaria

No es lo mismo, no da igual, elemento que tag.

Amigos que hacen cosas

Dronic Servicios AéreosDronic Servicios Aéreos
Dronic Servicios Aéreos: imágenes aéreas de calidad

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 2

  1. ¡Las veces que habré invocado a la madre el elemento 'base'!

    Es que no muchos sitios lo usan y yo siempre me olvido de que existe (o puede existir).

    El caso es que tengo la costumbre de bajarme documentos *.htm para referencia futura, y para verlos desconectado; pero suele pasar que debo editarlos (artesanalmente) para reemplazar (por ejemplo) un thumbnail por su imagen final, ya que si lo estoy guardando no tiene mucho sentido obligarme a estar conectado para ver el destino ese enlace.
    Y después de editar no me anda.

    Empiezo a revisar lo más obvio que se me pueda pasar ... y nada, la imagen no aparece.
    Claro, después de un buen rato de renegar, se me ocurre ver el comienzo del código fuente ¡y ahí lo encuentro!.
    Ya sé que es mi culpa por no mirar bien desde el principio, pero el elemento 'base' no me simpatiza. XD

    Ahora hablando en serio: es una buena ayuda para los desarrolladores que sepan usarlo.
    Esto no será CSS, pero es un buen artículo.

    ResponderEliminar
  2. Buen día.

    No sé qué es mejor, si la información que publicas o el increíble diseño intuitivo del sitio y la fácil navegación que me produce ganas de hacer clic en todos los botones :D Te felicito y muchas gracias por la información que compartes, es de gran ayuda.

    Un saludo.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap