Caminhos de Arquivo HTML
Aprenda sobre caminhos de arquivo HTML, a diferença entre caminhos absolutos e relativos, com exemplos práticos e úteis.
Um caminho de arquivo descreve a localização de um arquivo dentro da estrutura de pastas de um site. Sempre que uma página precisa carregar ou apontar para outro recurso, ela usa um caminho de arquivo para encontrá-lo.
Esta página aborda os dois tipos de caminhos de arquivo — absoluto e relativo — as diferentes formas que um caminho relativo pode assumir, e qual usar na prática. Você usará caminhos de arquivo constantemente ao trabalhar com:
- páginas web (em links)
- imagens
- arquivos JavaScript
- folhas de estilo
Tipos de Caminho em Resumo
Todo caminho que você escreve é um dos seguintes. As mesmas regras se aplicam independentemente de o caminho aparecer em <a href>, <img src>, <link href> ou <script src>.
| Caminho | Tipo | Significado | Quando usar |
|---|---|---|---|
https://example.com/img/cat.jpg | URL absoluta | O endereço completo, incluindo o protocolo e o domínio. | Para vincular a um arquivo em outro site. |
/images/cat.jpg | Relativo à raiz | Começa na raiz do site (a / inicial), independentemente da localização da página atual. | Ativos globais (logotipos, CSS/JS global) compartilhados entre muitas páginas. |
images/cat.jpg | Relativo (mesmo diretório) | Começa a partir da pasta da página atual. Equivalente a ./images/cat.jpg. | Arquivos armazenados ao lado da página. |
../images/cat.jpg | Relativo (diretório pai) | .. sobe um nível na pasta e depois entra em images. | Para acessar um arquivo que está acima da página atual. |
Um caminho relativo à raiz é tecnicamente também um caminho relativo, mas a / inicial o torna relativo à raiz do site em vez da página atual — por isso vale a pena tratá-lo como uma categoria própria.
Caminhos de Arquivo Absolutos
Um caminho de arquivo absoluto é a URL completa usada para acessar um arquivo, incluindo o protocolo (https://) e o nome do domínio. Funciona a partir de qualquer página porque não depende de onde a página atual está localizada.
Exemplo de caminho de arquivo absoluto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
</body>
</html>Use uma URL absoluta quando o recurso estiver em um domínio diferente (por exemplo, uma imagem hospedada em um CDN ou em outro site).
Caminhos de Arquivo Relativos
Um caminho de arquivo relativo aponta para um arquivo em relação à página atual, em vez de especificar o domínio completo. Os caminhos relativos podem assumir algumas formas.
Mesmo diretório
Quando o arquivo de destino está na mesma pasta que a página atual, basta escrever o nome do arquivo. Adicionar ./ (que significa "pasta atual") é opcional e tem comportamento idêntico.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Same-Directory Path Example</h2>
<img src="images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Aqui, images/smile.jpg é resolvido a partir da pasta que contém a página atual.
Diretório pai
Use ../ para subir um nível na árvore de pastas. Cada ../ sobe mais uma pasta. Por exemplo, ../images/smile.jpg sai da pasta atual e depois procura dentro de uma pasta images que está um nível acima.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Parent-Directory Path Example</h2>
<img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Relativo à raiz
Um caminho que começa com uma barra (/) é relativo à raiz: o navegador o resolve a partir da raiz do site, ignorando onde a página atual está. Isso é útil para ativos compartilhados em todo o site, pois o caminho permanece o mesmo independentemente do nível em que a página esteja aninhada.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Root-Relative Path Example</h2>
<img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Caminhos Não São Apenas para Imagens
As mesmas regras de caminho se aplicam a todo atributo que referencia um arquivo. Um único documento frequentemente mistura todos eles:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- root-relative stylesheet, shared site-wide -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<!-- relative link to a page in the same folder -->
<a href="about.html">About us</a>
<!-- relative link to a page one level up -->
<a href="../index.html">Home</a>
<!-- absolute link to an external site -->
<a href="https://www.w3docs.com/">W3docs</a>
<!-- relative script next to the page -->
<script src="js/app.js"></script>
</body>
</html>Boas Práticas
Prefira caminhos relativos para recursos que vivem no seu próprio site. Como eles não codificam um domínio, o site continua funcionando quando você o move para um novo domínio, muda de http para https ou o executa localmente durante o desenvolvimento. Reserve URLs absolutas para arquivos hospedados em outros sites e use caminhos relativos à raiz para ativos globais compartilhados por muitas páginas.
Leia mais sobre como vincular páginas no capítulo Links HTML e sobre como incorporar imagens com a tag <img>.