Marcadores de links HTML: como criá-los

Neste artigo, discutiremos o que são marcadores de links HTML , como criá-los e por que são úteis.

Os links HTML são uma ótima maneira de conectar páginas e criar uma experiência de usuário coesa. No entanto, ao lidar com páginas da Web mais longas, pode ser um desafio para os usuários navegar até o conteúdo específico de que precisam.

É aqui que os marcadores de links HTML são úteis. Os favoritos permitem que os usuários pulem para uma seção específica de uma página da Web com apenas um clique.

Ao vincular os links entre as seções ou outras páginas da Web relevantes, os marcadores HTML são usados ​​pelos designers da Web para controlar o fluxo de suas páginas da Web.

Índice-

Marcadores de Links HTML

O marcador de links HTML, também conhecido como links de âncora , são links clicáveis ​​que levam os usuários a uma seção específica de uma página da web.

Eles funcionam atribuindo um ID a um elemento específico na página, como um título, e criando um link que aponta para esse ID.

Quando o link é clicado, o navegador rola automaticamente para o elemento especificado.

Sintaxe

Para criar um marcador, devemos usar o atributo id

<h1 id="id name or number">content</h1>

Em seguida, adicione um link ao marcador que permitirá que você pule dentro do conteúdo da mesma página ou para outra página em links HTML .

<a href="#section id">Name of the Heading</a>

Exemplo detalhado de marcador de HTML

O exemplo abaixo mostra o trabalho detalhado de como os favoritos funcionam e como podemos usá-los em nossas páginas extensas dos sites no que diz respeito a links HTML :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
</head>
<body>
<p><a href="#SEC1">Jump to Section 1</a></p>
<p><a href="#SEC2">Jump to Section 2</a></p>
<p><a href="#SEC3">Jump to Section 3</a></p>
<h2 id="SEC1" style="margin-bottom:0;">Section 1</h2>
<div class="div-text" style="padding-bottom:40%">Amazon, one of the most valuable companies in the world, was founded in 1994
by Jeff Bezos. Initially an online marketplace, the company started to produce its own technological devices and offer
cloud services over time. As well as ranking as the world's 6th largest company in Forbes' list, it's listed among the
top 25 tech and IT companies to work for -a.k.a. best workplaces! </div>
<hr style="margin-bottom:150px">
<h2 id="SEC2" style="margin-bottom:0;">Section 2</h2>
<div class="div-text" style="padding-bottom:40%">Launched by Mark Zuckerberg in 2004 to connect Harvard students with
one another, Facebook was an instant hit. In 2 years, it became open to public use. In 2010, more than 400 million people were
using it monthly. In 2021, Facebook Inc. changed its name to Meta Platforms to emphasize its orientation to the metaverse.
Virtual/augmented reality is the future, and Meta claims to help people exist there. </div>
<hr style="margin-bottom:150px">
<h2 id="SEC3" style="margin-bottom:0;">Section 3</h2>
<div class="div-text" style="padding-bottom:40%">Oracle is an American computer software company. It was founded in 1977, in California,
but the corporate headquarters are in Austin, Texas now. They have more than 400,000 customers across the world, including FedEx,
Xerox, and Siemens Healthineers, as they provide specific solutions for different industries. You can manage your restaurant,
modernize your finances, secure network infrastructure solutions, connect HR/product management/marketing and increase client
satisfaction. </div>
<hr style="margin-bottom:150px">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplos de favoritos HTML

A criação de um marcador começa com o atributo id nos links HTML :

<h2 id="MXC4">Mr examples chapter 4</h2>

Em seguida, na mesma página, adicione um link ao marcador que diz: “Ir para o capítulo 4 dos exemplos do Sr”:

Example:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<a href="#MXC4">Jump to Mr examples chapter 4</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Aqui está outro exemplo de marcador:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C2">Jump to Heading 2</a>
</p>
<h2>Section 1</h2>
<p>This Heading explains Section 1</p>
<h2 id="C2">Section 2</h2>
<p>This Heading explains Section 2</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Marcação Visão geral
<a> Representa um hiperlink.
Visite nossa referência de tags HTML para obter uma lista abrangente de todas as tags HTML possíveis .

Benefícios dos marcadores HTML

Os marcadores HTML têm vários benefícios para proprietários e usuários de sites.

Aqui estão alguns:

Experiência do usuário aprimorada

Os marcadores tornam mais fácil para os usuários navegar em longas páginas da Web, permitindo que eles pulem rapidamente para seções específicas.

Maior engajamento

Ao tornar mais fácil para os usuários encontrarem o conteúdo que procuram, os favoritos podem ajudar a manter os usuários em seu site por períodos de tempo mais longos.

Motor de Otimização de Busca

Os favoritos também podem ajudar no SEO, fornecendo conteúdo adicional aos mecanismos de pesquisa. Quando os mecanismos de pesquisa rastreiam seu site, eles podem usar o conteúdo marcado para entender melhor o contexto de sua página.

Acessibilidade

Os marcadores também podem ser úteis para usuários com deficiências, pois podem permitir que eles naveguem nas páginas da web com mais facilidade.

Conclusão

Os marcadores de links HTML são um recurso simples, mas poderoso, para melhorar a experiência do usuário em seu site.

Ao permitir que os usuários pulem rapidamente para seções específicas de uma página da web, os favoritos podem aumentar o engajamento, melhorar a acessibilidade e até mesmo impulsionar o SEO do seu site.

Esteja você criando um artigo longo ou um aplicativo da Web complexo, os marcadores são uma técnica útil a ser lembrada.

Deixe sua reação abaixo para apreciar nossos esforços ou para nos sugerir algumas melhorias para a melhoria deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.