Especificar la URL de base de documentos con el elemento HTML

Los sitios web están construidos con una serie de enlaces que apuntan a páginas y fuentes como imágenes y hojas de estilo. Hay dos maneras de Especifique la URL que enlaza con estas fuentes.: use una ruta absoluta o una ruta relativa.

La ruta absoluta se refiere a un destino específico, normalmente se inicia con el nombre de dominio (junto con HTTP) como www.dominio.com/destination/source.jpg. La ruta relativa es la opuesta: el destino del enlace depende de la ubicación raíz o, en la mayoría de los casos, del nombre de dominio de su sitio web.

Una ruta relativa típica se vería a continuación:

Si el dominio de su sitio web es, por ejemplo., hongkiat.com la ruta de la imagen se resolvería a hongkiat.comimages_2 / specifying-document-base-url-with-html-base-element.png. Debe comprender esto si ha estado desarrollando un sitio web por un tiempo..

Pero la mayoría de ustedes probablemente no han oído hablar de la elemento. Esta etiqueta HTML ha existido desde HTML4, pero se ve muy poco de su implementación en la naturaleza. W3C describe este elemento como:

“El elemento base permite a los autores especificar la URL base de documentos a los fines de resolver las URL relativas, y el nombre de el contexto de navegación predeterminado A los fines de los siguientes hipervínculos..”

Esta El elemento básicamente decide la URL base para la ruta relativa en las páginas web. En lugar de depender de la ubicación raíz o del dominio de su sitio web, puede señalarlo en otro lugar, tal vez como la URL donde residen sus recursos en CDN (Red de entrega de contenido). Veamos cómo funciona realmente..

Usando el elemento base

los se define a lo largo del lado del y etiquetas dentro del . Dado el siguiente ejemplo, configuramos la URL base para Google.

Esta especificación afectará a todas las rutas dentro del documento, incluyendo una que se especifica dentro del href atributo y el src de las imagenes. Entonces, asumiendo que tenemos una hoja de estilo, imágenes y enlaces en el conjunto de documentos con una ruta relativa como esta, por ejemplo:

  Enlace de anclaje  

Aunque nuestra página web está bajo demo.hongkiat.com el camino relativo se referirá a hongkiat.maxcdn.com, siguiendo el camino base especificado en el etiqueta. Intente desplazarse por el enlace y el navegador le mostrará dónde se dirige exactamente la ruta.

Todos los caminos relativos serán eventualmente:

  Enlace de anclaje  

Configuración del destino de enlace predeterminado

Aparte de definir la URL base, la etiqueta también puede establecer el objetivo de enlace predeterminado a través de la objetivo atributo. Di que quieres que todo el enlace en el documento se abra en la pestaña nueva del navegador, selecciona el objetivo con _blanco, al igual que.

Limitaciones

los etiqueta, sin embargo, tiene un par de advertencias en algunas circunstancias:

Primero el el soporte del navegador es genial; funciona en IE6. Pero, IE6 cree que requiere una etiqueta de cierre . Esto podría causar un problema de jerarquía en el documento, si la etiqueta de cierre se deja sin especificar. Una forma rápida y sencilla de abordar este problema es agregar cerrando dentro de un comentario, .

Si estas usando # en conjunción con el para enlazar con secciones dentro del documento, es posible que encuentre un problema en Internet Explorer 9. En lugar de saltar a la sección referida, Internet Explorer 9 volverá a cargar la página.

Además, un espacio en blanco. href resultará en la URL base en lugar de vincularse al directorio actual donde reside la página (este es el comportamiento predeterminado del navegador), lo que podría causar problemas de referencia inesperados.

Envolver

los es una útil función HTML que puede simplificar las referencias de enlaces en un documento web. Use la etiqueta de manera considerable para minimizar los escollos. Siga estas referencias a continuación para obtener más información sobre el etiqueta:

• URL absolutas y relativas - MSDN
• Elemento base HTML - W3C