Localizadores Uniformes de Recursos HTML

Um Localizador Uniforme de Recursos (URL), comumente chamado de endereço web, é uma referência a um recurso web que especifica sua localização na rede de computadores e um mecanismo para recuperá-lo. Um URL é um tipo especial de Identificador Uniforme de Recursos (URI), embora esses dois termos sejam às vezes usados de forma intercambiável. Na maioria dos navegadores web, o URL de uma página web é exibido acima da página em uma barra de endereços.

Um URL pode ser composto por palavras ou por um endereço de Protocolo de Internet (IP). Em geral, os usuários digitam o nome porque é mais fácil de lembrar do que números.

Esta página explica a anatomia de um URL, como URLs absolutas e relativas se comportam em atributos HTML, como funcionam as partes de consulta e fragmento, a codificação de URL e os esquemas mais comuns.

Sintaxe de URL

A sintaxe geral de um endereço web completo é:

scheme://host:port/path?query#fragment

Anatomia de um URL

De acordo com a RFC 3986 — a especificação que define URLs — um URL possui os componentes abaixo. Não há um componente separado para "nome de arquivo": um nome de arquivo é simplesmente o último segmento do caminho.

Um URL completo, detalhado

Considere este endereço:

https://www.w3docs.com:443/learn-html/page.html?tab=1#intro

Ele é composto pelas seguintes partes:

URLs Absolutas vs. Relativas

Em HTML, um URL pode ser escrito de forma completa (absoluta) ou parcial (relativa). Para uma URL relativa, o navegador preenche as partes ausentes — esquema, host e o diretório base — a partir do URL da página atual.

Isso é relevante em qualquer lugar em que você referencie outro recurso: em links <a href>, imagens <img src> e folhas de estilo <link href>.

Suponha que a página atual seja https://example.com/learn-html/page.html:

<!-- Absolute URL: includes the scheme and host -->
<a href="https://example.com/page">External page</a>

<!-- Root-relative: starts at the site root -->
<img src="/images/logo.png" alt="Logo" />

<!-- Relative: relative to the current page's folder -->
<link rel="stylesheet" href="../css/style.css" />

Use URLs relativas para criar links dentro do seu próprio site (elas continuam funcionando se o site for movido para um novo domínio) e URLs absolutas para apontar para recursos externos. Consulte Links HTML para saber mais sobre links.

O Componente de Consulta

A string de consulta vem após um ? e carrega dados para o recurso como pares key=value. Múltiplos parâmetros são unidos com &:

https://www.w3docs.com/search?q=html&page=2

Aqui, q=html e page=2 são dois parâmetros separados. Servidores (e JavaScript) leem esses valores para decidir o que retornar — por exemplo, um termo de busca e um número de página.

O Fragmento (Âncora)

O fragmento vem após um # e aponta para uma parte específica de uma página. O navegador rola até o elemento cujo id corresponde ao fragmento. É processado inteiramente no navegador e nunca é enviado ao servidor.

<!-- Links to the element with id="section2" on the same page -->
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

Codificação de URL

URLs só podem ser transmitidas pela Internet usando o conjunto de caracteres ASCII. Se um URL contiver caracteres fora desse conjunto — ou caracteres que têm um significado especial em uma URL — esses caracteres devem ser codificados.

Na codificação de URL (também chamada de codificação percentual), um caractere é substituído por % seguido de seu valor hexadecimal de dois dígitos. URLs não podem conter espaços, então um espaço se torna %20 (ou, em strings de consulta, um sinal de +):

Before:  https://www.w3docs.com/search?q=hello world
After:   https://www.w3docs.com/search?q=hello%20world

Caracteres reservados como ?, &, =, # e / possuem significado estrutural em uma URL, portanto, quando aparecem dentro de um valor, também devem ser codificados em percentual (por exemplo, & se torna %26). Algumas substituições comuns:

Esquemas Comuns

O esquema informa ao navegador qual protocolo ou serviço utilizar. Os mais comuns estão abaixo.

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

Por razões de segurança, os navegadores modernos restringem os esquemas ftp: e file:: o suporte a ftp: foi removido da maioria dos navegadores, e links file: para arquivos locais geralmente não funcionam em páginas servidas via http/https.

Prática