El elemento html "base" Una ayuda para depurar códigos 18.9.13
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
Supó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':
- En su ausencia (no estar declarado) la base para resolver las rutas relativas es el directorio donde se encuentra el documento.
- Admite, además de los "atributos globales" (opcionales) el obligatorio 'href' y el atributo 'target' (opcional).
- 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 '/>'.
- Debe declararse antes de cualquier otro elemento que contenga una URI, excepto del elemento html.
- Es un elemento clasificado en el grupo de los "metadata content".
- Es un elemento de los llamados 'vacíos' (empty element).
- 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'
- Base en html 4.1. Especificación
- Base en Html 5. Candidate recomendation.
- whatwg.org
Lectura complementaria
No es lo mismo, no da igual, elemento que tag.
Kseso
the obCSServer ᛯ 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 Kseso
¡Las veces que habré invocado a la madre el elemento 'base'!
ResponderEliminarEs 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.
Buen día.
ResponderEliminarNo 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.