Caminho de arquivo HTML

Caminho Descrição
<img src="picture.jpg"> picture.jpg está no mesmo diretório da página atual
<img src="images/picture.jpg"> picture.jpg está na pasta images do diretório atual
<img src="/images/picture.jpg"> picture.jpg está na pasta images do diretório raiz do site atual
<img src="../picture.jpg"> picture.jpg está na pasta images do diretório superior ao diretório atual

Caminho de arquivo HTML

O caminho do arquivo descreve a localização de um arquivo em estrutura de diretórios do site.

O caminho do arquivo é usado ao linkar arquivos externos:

  • Página da Web
  • Imagem
  • Folha de Estilo
  • JavaScript

Caminho de Arquivo Absoluto

O caminho de arquivo absoluto é uma URL completa que aponta para um arquivo da Internet:

Exemplo

<img src="https://www.codew3c.com/images/picture.jpg" alt="flower">

O tag <img> e as propriedades src e alt são explicadas no capítulo de Imagem do HTML.

Caminho Relativo

Os caminhos relativos apontam para arquivos relativos à página atual.

Neste exemplo, o caminho do arquivo aponta para um arquivo na pasta images do diretório raiz do site:

Exemplo

<img src="/images/picture.jpg" alt="flower">

Neste exemplo, o caminho do arquivo aponta para um arquivo na pasta images do diretório atual:

Exemplo

<img src="images/picture.jpg" alt="flower">

Neste exemplo, o caminho do arquivo aponta para um arquivo na pasta images do diretório superior ao diretório atual:

Exemplo

<img src="../images/picture.jpg" alt="flower">

Hábito Bom

Usar caminhos relativos é um hábito bom (se possível).

Se você usar um caminho relativo, sua página da web não ficará vinculada ao URL de base atual. Todos os links funcionarão corretamente no seu computador (localhost) ou em domínios públicos futuros.