Caminho relativo em HTML

Muitas vezes, precisamos adicionar e acessar arquivos armazenados no sistema em um documento HTML. Se o arquivo necessário em um documento estiver na mesma pasta em que o arquivo para o site foi armazenado, em vez de copiar o caminho completo do arquivo e colar isso no documento HTML, é uma prática melhor adicionar o caminho relativo do arquivo.

O que exatamente é um caminho relativo?

O caminho relativo significa que os arquivos mencionados estão na mesma pasta que a estrutura da pasta do site. Para que o arquivo se torne acessível, mesmo que apenas seu nome de pasta relativa seja especificado antes do nome do arquivo, em vez de adicionar um caminho inteiro que inclua o nome de todas as pastas e diretórios em que o arquivo foi armazenado.

Como adicionar caminhos relativos em html?

A sintaxe para adicionar o caminho relativo de um arquivo enquanto estiver usando HTML para formatar o documento é simples. Adicione uma tag de âncora com um atributo href que contém o caminho relativo (nome da pasta e o nome exato do arquivo com a extensão, ambos começando com o símbolo de barra). Entre as tags de abertura e fechamento, adicione o texto que deve ser exibido na forma de um link na interface de saída.

Sintaxe

O caminho relativo no HTML é adicionado através da tag de âncora com o atributo href:

Link para imagem

Exemplo: Adicionando imagem especificando o caminho relativo em HTML

Vamos discutir como adicionar um caminho relativo no HTML e como ele funciona na interface gráfica com a ajuda de um exemplo:

Link para imagem

Na declaração acima, para adicionar o caminho relativo em HTML:

• Há uma tag de âncora com o atributo href. Dentro da tag âncora de abertura, há o nome da pasta “HTML e CSS,"Começando com o"/”(Símbolo de barra).
• Depois disso, existe o nome exato do arquivo “img”Com a extensão do arquivo“.jpg”, Cujo conteúdo será exibido na interface.
• E a "Link para imagem”É o texto que será exibido na forma de um link clicando, que direcionará o usuário ao conteúdo do“jpg" arquivo.

Isso exibirá a seguinte saída:

Benefícios de adicionar caminho relativo em HTML

Adicionar o caminho relativo no HTML tem os seguintes benefícios:

• Adicionar o caminho relativo no HTML pode acessar o arquivo especificado diretamente sem a necessidade de adicionar todo o caminho absoluto (o caminho que abrange todos os diretórios em que o arquivo é armazenado).
• Ao usar os caminhos relativos no HTML, os nomes de domínio podem ser alterados facilmente e fica fácil mover diretórios inteiros em html enquanto usam os caminhos relativos.

Conclusão

Adicionar caminhos relativos em HTML é uma maneira útil de acessar um arquivo armazenado em uma pasta ou um diretório no documento HTML. Tudo o que ele exige é criar uma etiqueta de âncora e o atributo href dentro da etiqueta de abertura com o nome do diretório ou da pasta e depois o nome e a extensão do arquivo que deve ser acessado.