soy Kseso y esto EsCSS

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.

avatar del Editor del blog

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