Passo 1 de 5
Identifique os elementos de destino
Adicione identificadores válidos a títulos e parágrafos para prepará-los como destinos de navegação.
Trilha de aprendizado · Nível 2 · Tutorial 7
Crie destinos identificados no conteúdo e links que levem diretamente a esses trechos, na mesma página ou em outro documento.
Identifique os elementos de destino
Adicione identificadores válidos a títulos e parágrafos para prepará-los como destinos de navegação. 2 min
Ligue um link a um trecho da mesma página
Use um fragmento no href para levar o usuário até um elemento identificado na página atual. 3 min
Aponte para um trecho de outra página
Combine o endereço de outro documento com o fragmento que identifica o trecho desejado. 2 min
Encontre e corrija destinos que não correspondem
Descubra por que um link não chega ao trecho esperado, corrija a referência e confira o resultado no navegador. 3 min
Aplique e revise os links para trechos
Complete dois documentos, corrija um fragmento incompatível e verifique os destinos no navegador. 3 min
Passo 1 de 5
Adicione identificadores válidos a títulos e parágrafos para prepará-los como destinos de navegação.
Para preparar um trecho como destino de navegação, adicione o atributo id ao elemento, como um título ou parágrafo. O identificador não substitui o texto visível nem aparece como conteúdo na página.
horario-de-atendimento identifica o elemento. O usuário continua vendo o título “Horário de atendimento”.
<h2 id="horario-de-atendimento">Horário de atendimento</h2>Dica
O valor de id não pode ser vazio nem conter espaços. Prefira nomes descritivos em minúsculas, com hífens entre palavras. Esse estilo é uma convenção prática, não uma exigência do HTML: id="Atendimento" também é válido.
Complete o valor de id usando as palavras perguntas e frequentes, nessa ordem, em minúsculas e separadas por um hífen. Digite apenas o valor que falta.
<h2 id="____">Perguntas frequentes</h2>Um mesmo valor de id só pode identificar um elemento em cada documento. Isso vale mesmo quando os elementos são de tipos diferentes: um título e um parágrafo não podem compartilhar o mesmo identificador na mesma página.
<h2 id="contato">Contato</h2>
<p id="mensagem-contato">Fale com nossa equipe.</p>Dica
Os arquivos loja.html e ajuda.html podem ter, cada um, um elemento com id="contato". A repetição só é proibida dentro do mesmo documento.
Em cada opção, considere que estes são os únicos elementos com id no documento. Qual delas atribui identificadores válidos aos dois elementos?
Passo 2 de 5
Use um fragmento no href para levar o usuário até um elemento identificado na página atual.
Para apontar para um trecho da página atual, use # seguido do identificador no href.
Em href="#programacao", o # marca o início do fragmento. No elemento de destino, mantenha id="programacao", sem acrescentar o #.
<a href="#programacao">Ver programação</a>
<h2 id="programacao">Programação do evento</h2>
<p>As atividades começam às 9h.</p>Dica
Ao clicar em “Ver programação”, o navegador localiza o elemento com id="programacao" e rola a página até ele quando necessário. Esse comportamento já faz parte do navegador.
Todos estes elementos estão na mesma página. Associe cada link ao elemento que ele alcança.
Toque em um item e depois no par correspondente.
O identificador depois do # deve ser exatamente igual ao valor do id, incluindo hífens, maiúsculas e minúsculas. Nomes parecidos não são equivalentes.
Exemplo
href="#perguntas-frequentes" corresponde ao destino.href="#Perguntas-frequentes" não corresponde: o P está maiúsculo.href="#pergunta-frequente" não corresponde: faltam as letras s.O navegador usa o identificador, não o texto visível do título, para encontrar o trecho.
<a href="#oficinas">Ver oficinas</a>Todos os elementos abaixo estão na mesma página. Qual deles é o destino desse link?
Passo 3 de 5
Combine o endereço de outro documento com o fragmento que identifica o trecho desejado.
Para chegar a um trecho de outra página, monte o href nesta ordem: endereço do documento + # + identificador. O endereço indica qual documento abrir; o fragmento indica o elemento a localizar dentro dele.
<h2 id="prazos-de-entrega">Prazos de entrega</h2>Neste exemplo, os dois arquivos estão na mesma pasta.
<a href="ajuda.html#prazos-de-entrega">Ver prazos de entrega</a>Exemplo
Em inicio.html:
href="#prazos-de-entrega" procura o destino na própria página.href="ajuda.html#prazos-de-entrega" procura o destino em ajuda.html.Você está em inicio.html. Tanto essa página quanto ajuda.html têm um elemento com id="contato". Qual é o destino de um link com href="ajuda.html#contato"?
A ordem é a mesma com uma URL absoluta. Em um exemplo fictício, se o documento em https://example.com/ajuda.html contém o título com id="prazos-de-entrega", acrescente o fragmento depois do endereço:
<a href="https://example.com/ajuda.html#prazos-de-entrega">Ver prazos de entrega</a>O caminho fornecido para outra página é guias/visita.html. Nela, o trecho desejado começa neste título:
<h2 id="como-chegar">Como chegar ao museu</h2>Use o caminho fornecido para completar o link. Digite apenas o valor de href, sem aspas.
<a href="_____">Como chegar ao museu</a>
Passo 4 de 5
Descubra por que um link não chega ao trecho esperado, corrija a referência e confira o resultado no navegador.
Uma página pode abrir normalmente sem que o trecho seja encontrado — e sem exibir mensagem de erro.
Confira o documento indicado no href. Nele, localize o elemento pretendido e compare seu id com o identificador após o #, caractere por caractere.
<a href="#inscricao">Veja como se inscrever</a>
<h2 id="inscricoes">Como se inscrever</h2>Dica
#inscricao não corresponde a id="inscricoes". Corrija o link para href="#inscricoes"; não é preciso mudar o texto do título.
Se o trecho desejado ainda não tiver id, atribua um valor único a ele e use esse valor no fragmento.
O link de index.html deveria abrir “Prazo de entrega”, em prazos.html. Em vez disso, abre ajuda.html, que não contém esse trecho. Os arquivos estão na mesma pasta.
<a href="ajuda.html#Entrega">Consulte o prazo de entrega</a><h2 id="entrega">Prazo de entrega</h2>Escolha o href que chega ao título pretendido sem alterar seu id.
Se dois títulos usam id="duvidas", o link href="#duvidas" leva ao primeiro deles, que pode não ser o pretendido.
Dê um identificador diferente a cada destino e atualize os links afetados. Veja uma versão corrigida:
<a href="#duvidas-pagamento">Dúvidas sobre pagamento</a>
<a href="#duvidas-entrega">Dúvidas sobre entrega</a>
<h2 id="duvidas-pagamento">Dúvidas sobre pagamento</h2>
<h2 id="duvidas-entrega">Dúvidas sobre entrega</h2>Dica
Salve os arquivos alterados, atualize as páginas envolvidas e clique novamente nos links a partir da página de origem. Confira se cada um chega ao trecho pretendido — não apenas se o documento abre sem erro.
Nesta página, os dois links deveriam levar a títulos diferentes. Estes são os únicos elementos com id no documento.
<a href="#programacao">Programação de palestras</a>
<a href="#programacao">Programação de oficinas</a>
<h2 id="programacao">Palestras</h2>
<h2 id="programacao">Oficinas</h2>Mantenha id="programacao" em Palestras. Reescreva apenas o link de Oficinas e seu h2 para eliminar a duplicação. Diga também como verificará o resultado no navegador.
Escreva pelo menos 30 caracteres (0/30).
Passo 5 de 5
Complete dois documentos, corrija um fragmento incompatível e verifique os destinos no navegador.
Salve os códigos abaixo como index.html e guia.html, na mesma pasta. Você vai transformar dois textos em links, identificar seus destinos e corrigir um link existente, sem mudar os textos visíveis.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Oficina de desenho</title>
</head>
<body>
<h1>Oficina de desenho</h1>
<p>Ver a programação</p>
<p>Conferir os materiais</p>
<p><a href="guia.html#Local">Consultar o local</a></p>
<h2>Programação</h2>
<p>A oficina começa às 14h.</p>
</body>
</html><!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Guia da oficina</title>
</head>
<body>
<h1>Guia da oficina</h1>
<h2>Materiais</h2>
<p>Traga papel e lápis.</p>
<h2 id="local">Local</h2>
<p>A atividade será na sala de artes.</p>
</body>
</html>Faça estas alterações nos arquivos:
id válido ao título “Programação” e outro ao título “Materiais”. Confira a unicidade em cada documento.guia.html.id="local" no destino.Salve os arquivos. Cole abaixo apenas os três parágrafos com links e os dois títulos alterados, indicando o arquivo de cada trecho.
Escreva pelo menos 60 caracteres (0/60).
Dica
Como os documentos são curtos, pode não haver rolagem perceptível. Confira também se o fragmento corresponde ao id do título no arquivo aberto. A mudança no endereço, sozinha, não prova que o destino foi encontrado.
Abra ou atualize index.html no navegador. Clique em cada link, voltando à página inicial entre os testes.
Registre, para cada link: o arquivo aberto, o fragmento exibido e o título cujo id corresponde a ele. Confira também se todos os ids são válidos e únicos em seus documentos.
Se encontrar uma falha, corrija, salve, atualize e teste novamente antes de registrar o resultado.
Escreva pelo menos 40 caracteres (0/40).
Resumo
Use esta lista como conferência final da sua solução.
Parabéns! Você concluiu: Links para trechos de documentos com id
Tutorial concluído! Você praticou a criação de destinos, a ligação entre páginas e trechos e a correção de fragmentos incompatíveis.
Você concluiu este nível!
Agora você vai iniciar: Estrutura semântica de páginas
Organizar as regiões da página com HTML semânticoOrganizar o conteúdo de uma página em regiões com header, nav, main, aside e footer, escolhendo cada elemento pela função do conteúdo, não pela posição visual.Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks