Ruta relativa en html

A menudo necesitamos agregar y acceder a archivos almacenados en el sistema en un documento HTML. Si el archivo necesario en un documento está en la misma carpeta que en la que se ha almacenado el archivo para el sitio web, en lugar de copiar la ruta del archivo completa y pegarla en el documento HTML, es una mejor práctica agregar la ruta relativa del archivo.

¿Qué es exactamente un camino relativo??

La ruta relativa significa que los archivos a los que se mencionan están en la misma carpeta que la estructura de la carpeta del sitio web. Para que el archivo se vuelva accesible incluso si solo se especifica su nombre de carpeta relativa antes del nombre del archivo, en lugar de agregar una ruta completa que incluya el nombre de todas las carpetas y directorios en los que se ha almacenado el archivo.

Cómo agregar rutas relativas en HTML?

La sintaxis para agregar la ruta relativa de un archivo mientras se usa HTML para formatear el documento es simple. Agregue una etiqueta de anclaje con un atributo HREF que contenga la ruta relativa (nombre de la carpeta y el nombre exacto del archivo con la extensión, ambos comenzando con el símbolo de corte). Entre las etiquetas de anclaje de apertura y cierre, agregue el texto que debe mostrarse en forma de un enlace en la interfaz de salida.

Sintaxis

La ruta relativa en HTML se agrega a través de la etiqueta de anclaje con el atributo HREF:

Enlace a la imagen

Ejemplo: Agregar imagen especificando la ruta relativa en HTML

Discutamos cómo agregar una ruta relativa en el HTML y cómo funciona en la interfaz gráfica con la ayuda de un ejemplo:

Enlace a la imagen

En la declaración anterior para agregar la ruta relativa en HTML:

• Hay una etiqueta de anclaje con el atributo href. Dentro de la etiqueta de anclaje de apertura, está el nombre de la carpeta "HTML y CSS,"Comenzando con el"/"(Símbolo de corte).
• Después de eso, existe el nombre de archivo exacto "img"Con la extensión del archivo".JPG", Cuyo contenido se mostrará en la interfaz.
• Y el "Enlace a la imagen"Es el texto que se mostrará en forma de un enlace haciendo clic en, lo que dirigirá al usuario al contenido del"JPG" archivo.

Esto mostrará la siguiente salida:

Beneficios de agregar ruta relativa en HTML

Agregar la ruta relativa en HTML tiene los siguientes beneficios:

• Agregar la ruta relativa en HTML puede acceder al archivo especificado directamente sin necesidad de agregar toda la ruta absoluta (la ruta que cubre todos los directorios en los que se almacena el archivo).
• Mientras usa las rutas relativas en HTML, los nombres de dominio se pueden cambiar fácilmente, y se vuelve fácil mover directorios completos en HTML mientras se usa las rutas relativas.

Conclusión

Agregar rutas relativas en HTML es una forma útil de acceder a un archivo almacenado en una carpeta o un directorio en el documento HTML. Todo lo que requiere es crear una etiqueta de anclaje y el atributo href dentro de la etiqueta de apertura con el nombre del directorio o la carpeta y luego el nombre y la extensión del archivo al que se supone que se accede.