Carregando...

Marcadores HTML

Títulos e alvos de links mudaram como um link abre. Os marcadores (links de fragmento) mudam onde na página você chega. Lições longas, FAQs e documentação muitas vezes precisam pular para “Preços”, “FAQ” ou “Voltar ao topo” sem carregar um documento novo. Esse padrão combina um id único no destino com um href que começa com #.

O que é um marcador na página

Um identificador de fragmento é a parte de uma URL depois de #. Em HTML você cria o ponto de chegada dando um id a um elemento. Depois, qualquer link cujo href seja #esse-id pede ao navegador que role até o primeiro id correspondente na página (ou na página nomeada antes do # se você incluir um caminho).

Resposta direta

  1. Dê ao destino um id, por exemplo <h2 id="pricing">.
  2. Linke com href="#pricing".
    O # significa “encontre este id”. Os ids devem ser únicos na página. Prefira nomes curtos sem espaços: pricing, não Our Pricing!!.

Sumário na página

Uma mini navegação no topo de uma página longa é a demo clássica para iniciantes: links de fragmento acima, ids correspondentes nos títulos abaixo, mais um link de retorno.

Marcadores na página

html
HTML Code 
<nav>
<a href="#intro">Intro</a> |
<a href="#pricing">Pricing</a>
</nav>

<h2 id="intro">Intro</h2>
<p>Welcome to the guide.</p>

<h2 id="pricing">Pricing</h2>
<p>Simple plans for learners.</p>

<p><a href="#intro">Back to intro</a></p>

Lendo o exemplo na página

  • #intro e #pricing são links de fragmento, não arquivos separados
  • O id de cada título deve coincidir com o fragmento depois de #
  • A nav pode ficar em qualquer lugar; sumários no topo da página são comuns em conteúdo longo
  • “Back to intro” mostra que os marcadores funcionam para baixo e para cima no mesmo documento

Linkar para uma seção em outra página

Você pode combinar um caminho relativo (ou absoluto) com um fragmento. O navegador carrega a página e depois salta para o id se ele existir.

Caminho mais fragmento

html
HTML Code 
<p>
<a href="guide.html#pricing">Open pricing in the guide</a>
</p>

Quando usar path#id

  • Saltos na mesma página: #pricing basta
  • Outro arquivo HTML no seu projeto: guide.html#pricing
  • Documentação externa em que você confia: uma URL completa terminando em #section-name quando esse site expõe ids estáveis
    Se o id estiver ausente na página de destino, o navegador geralmente abre a página no topo e ignora o fragmento desconhecido.

Hábitos de nomeação de id

  • Um valor de id por página — nunca duplique
  • Comece com uma letra quando possível; evite espaços e pontuação estranha
  • Use hífens para nomes com várias palavras: getting-started
  • Mantenha os nomes estáveis se outras páginas forem fazer deep-link para eles
    Ids são para máquinas e URLs; o texto visível do título pode permanecer legível e diferente da string do id.

Marcadores vs “favoritos” do navegador

As pessoas também dizem “bookmark” para salvar uma página no menu de favoritos do navegador. Esta lição significa links de fragmento na página. Os favoritos do navegador usam a URL do documento (e às vezes um fragmento se você copiou um). Mesma palavra, trabalhos cotidianos diferentes — deixe claro o significado em HTML ao ensinar outras pessoas.

Notas de acessibilidade e UX

Links de salto ajudam usuários de teclado e leitores de tela a percorrer páginas longas quando os destinos são marcos reais (títulos, seções). Não espalhe dezenas de ids vazios. Garanta que o alvo fique visível depois do salto — cabeçalhos fixos podem cobrir títulos mais tarde quando você aprender CSS; por agora, confirme que a seção correta aparece.

Pratique no seu editor

  1. Crie dois títulos com valores id diferentes.
  2. Acima deles, adicione links de fragmento com href="#…".
  3. Clique em cada link e confirme que a página salta para o título correspondente.
  4. Adicione um link “Voltar ao topo” apontando para um id no seu primeiro título ou um marco do topo.
  5. A partir de um segundo arquivo, linke com other.html#intro e confirme o salto entre páginas.
  6. Duplique temporariamente um id, observe a confusão e depois corrija a unicidade.

Erros fáceis

  • Usar o mesmo id duas vezes em uma página
  • Esquecer o # no href para que o navegador procure um nome de arquivo
  • Colocar espaços ou símbolos estranhos nos ids
  • Linkar para um id que não existe
  • Confundir marcadores de fragmento com target="_blank" (trabalhos diferentes)
  • Esperar que #pricing sozinho abra outro arquivo sem um caminho

Resumo

  • Marcadores na mesma página usam id mais href="#id"
  • Ids devem ser únicos, curtos e sem espaços
  • Ótimos para páginas longas e mini sumários
  • Use page.html#id para saltar para uma seção em outra página
  • Fragmentos ausentes costumam falhar em silêncio ficando no topo

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Html Tutorial