URLs absolutas vs relativas
Compreender a diferença entre caminhos absolutos e relativos.
URLs absolutas vs relativas é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que é uma URL?
Uma URL (Localizador Uniforme de Recursos) é o endereço completo de um recurso na web.
Uma URL tem estas partes:
https://example.com:443/products/widget?color=red#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment
│ │ │ │ └─ Query string
│ │ │ └─ Path
│ │ └─ Port
│ └─ Domain
└─ ProtocolURLs absolutas
Uma URL absoluta contém o endereço completo — protocolo, domínio e caminho:
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->URLs relativas
Uma URL relativa é relativa à localização da página atual — não precisa de protocolo nem domínio:
<!-- Current page: https://example.com/blog/post.html -->
<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->
<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->
<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->Três tipos de URLs relativas
As URLs relativas têm três formas:
<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>
<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>
<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">Navegação com ../ --
Use ../ para subir um nível de diretório:
<!-- File structure:
/
├── index.html
├── about.html
└── blog/
├── post1.html
└── post2.html
-->
<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a> <!-- same folder -->
<a href="../">Home</a> <!-- up one level -->
<a href="../about.html">About</a> <!-- up then file -->Quando usar URLs absolutas ou relativas
Orientação:
- Recursos externos — sempre absolutos:
https://... - Recursos de CDN — absolutos ou relativos ao protocolo
- Navegação interna — relativa à raiz (
/page) é a opção mais segura - Mesmo diretório — relativa (
page.html) é conveniente
Relativa à raiz é portátil
URLs relativas à raiz (/path) continuam funcionando quando as páginas são movidas:
<!-- If this page moves from /blog/post.html to /articles/post.html -->
<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a> <!-- always → example.com/contact -->
<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a> <!-- different result in new location -->O elemento base
O elemento <base> em <head> define a URL base para todos os links relativos:
<head>
<base href="https://example.com/docs/">
</head>
<body>
<!-- This resolves to: https://example.com/docs/guide.html -->
<a href="guide.html">Guide</a>
</body>Codificação de URLs
Os caracteres especiais em URLs devem ser codificados com porcentagem:
<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>
<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>
<!-- Common encodings:
space → %20
& → %26
= → %3D
# → %23
-->URLs canônicas
Quando uma página pode ser acessada por várias URLs, use uma tag canônica para declarar a preferida:
<head>
<!-- Prevents duplicate content SEO penalty -->
<link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->Boas práticas para URLs
Siga estas convenções para URLs:
- Use apenas letras minúsculas
- Use hífens, não sublinhados, para separar palavras
- Mantenha as URLs curtas e descritivas
- Evite caracteres especiais — codifique-os
- Use URLs relativas à raiz para links internos
Verificação rápida
Você tem um arquivo em /blog/post.html e quer criar um link para /about.html. Qual é a URL relativa mais segura?
Recapitulação: URLs absolutas e relativas
Resumo dos tipos de URL:
- Absoluta — URL completa, incluindo protocolo e domínio
- Relativa à raiz — começa com
/e é relativa à raiz do domínio - Relativa — relativa à localização do arquivo atual
../— sobe um nível de diretório<base href>— define a base para todas as URLs relativas
Perguntas Frequentes
A aula “URLs absolutas vs relativas” é grátis?
Sim — o texto completo de “URLs absolutas vs relativas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “URLs absolutas vs relativas”?
Compreender a diferença entre caminhos absolutos e relativos. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “URLs absolutas vs relativas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O elemento anchor e o atributo href
- URLs absolutas vs relativas
- Abrir ligações em novos separadores e o atributo download
- Ligações para secções e identificadores de fragmentos