HTML+CSS Easy to Get Started with Anchor Links

What is an anchor link?

The link in HTML, the correct term should be called "anchor", which names the anchor link (also called Bookmark links) are often used on web pages with large and complex content. By clicking on the named anchor, we can not only point to the document, but also to a specific paragraph in the page. It can also be used as a convenient tool for "precise linking" to let the link object Close to focus. It is convenient for viewers to view the content of the web page. It is similar to the table of contents page numbers or chapter reminders when we read books. Tag anchors are the best method when you need to target a specific part of the page.

How to create an anchor link

Step 1: Create a named anchor

To create a named anchor, In the Dreamweaver editing view, place the cursor where you want to name the anchor. Select the "Insert Record" toolbar and select the "Named Anchor" option. The Named Anchor dialog box appears.

Create a named anchor dialog box. Enter the name of the anchor in the "Anchor Name" text box. Generally, if the anchor is at the top of the web page, you can enter top; the anchor name cannot contain spaces and should not be placed within a layer.

Step 2: Link to the named anchor

After defining the anchor, you can link to the named anchor. Select the text or image you want to create a link from, such as the text "Back to top." Enter "#anchor name" in the "Link" text box of the property panel, such as: "#top". as shown in picture 2.

After linking to the anchor to save the webpage, press F12 to preview the webpage. When the link text (return to top) is clicked in the browser, the web page goes to the row with the named anchor marked "top".

PS: To link to an anchor named "top" in other documents, the format is: file absolute path + file name #top. Anchor names are case-sensitive.

The role of anchor links in SEO

Anchor links are a very important concept. Adding appropriate anchor links to web pages will Increase the importance of the web page and the web page it points to, thereby affecting the keyword ranking. The effect of anchor links on SEO is mainly reflected in the following aspects:

The effect on the page where the anchor link is located

Normally speaking, The link anchor links added to the page have a certain relationship with the page itself. Therefore, the anchor text can be used as an evaluation of the content of the page where the anchor link is located. For example: this article contains a link to "SEO", then it means that this article has a certain relationship with SEO.

Effects on the page pointed to by the anchor link

Anchor link can accurately describe the content of the pointed page, therefore, the anchor link can be used as an evaluation of the pointed page.

The impact of anchor links on keyword rankings

The significance of anchor links for keyword rankings is that it allows content pages to be randomly linked together, allowing spiders to crawl more pages. , the weight can also be transferred evenly, while enhancing the relevance of the page, and ultimately improving the keyword ranking of the website.

The difference between anchor links and hyperlinks

1. The difference in keyword ranking.

If we talk about the difference in ranking of keywords. We can use numbers to illustrate the difference in Baidu rankings. Suppose we make a link with anchor text: for example, we make the keyword "Webmaster Network". If this external link is included by Baidu. Assume that the weight given by Baidu to this link is represented by Arabic numerals. For example, if it is 5, then this external link may be assigned a ranking of 4 for the keyword Webmaster.com, and may be assigned a ranking of 4 for other keywords of our website.

2. The difference between backlinks

When we do SEO, we often pay attention to the backlinks of our own websites. Generally, everyone searches for their own websites through Yahoo backlinks and Baidu domain. If we make an anchor text link. Ask Yahoo to include it, and the anchor text link can be queried through Yahoo's backlink. If this link is included by Baidu, we cannot query it through Baidu domain. If we make a URL link and ask Yahoo to include it, we can query it through Yahoo's backlink. If we ask Baidu to include it, we can also query it through Baidu domain. So: Anchor text links can increase the number of Yahoo backlinks to our website. The number of Baidu domains cannot be increased. URL links can increase the number of Yahoo backlinks to our website, and can also increase the number of Baidu domains.

Anchor link example: Make an example of returning to the top. The code is as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>锚点链接</title>
</head>
<body>

		<a name="top">我们都一样</a>

		推开窗看见星星  一直守在夜空中<br>
		心中不免多了些暖暖的感动<br>
		一闪一闪的光  努力把黑夜点亮气氛如此安详<br>
		你在我的生命中是那最闪亮的星<br>
		一直在我深夜中守护着我们的梦<br><br>
		这世界那么大我的爱只想要你懂<br>
		陪伴我孤寂旅程<br>
		你知道我的梦你知道我的痛<br>
		你知道我们感受都相同<br>
		就算有再大的风也挡不住勇敢的冲动 <br><br>



		最美的太阳

		我的世界 因为有你才会美<br>
		我的天空 因为有你不会黑<br>
		给我快乐 为我伤心流眼泪<br>
		给我宽容 让我能展翅高飞<br>
		你的话你的泪 你的笑你的美<br>
		在我眼中胜过最美的玫瑰<br>
		抱着梦 往前飞 不逃避 不后退<br>
		你是我成功路上的堡垒<br>
		给我翅膀 让我可以翱翔<br>
		给我力量 是你让我变坚强<br>
		不怕受伤 因为有你在身旁<br>
		你的笑 你的泪 是我筑梦路上最美的太阳<br><br>



		明天过后<br>
		没有星星的夜空<br> 
		没有话题能补充 <br>
		太多承诺从指缝中溜走 <br>
		不敢奢求什么 <br>
		回忆将我们扣留 <br>
		一瞬间亲吻的时候 <br>
		一切就好像轮回般朦胧 <br>
		心动渐渐的失控 <br>
		是否两个人足够捕捉爱的镜头 <br>
		闭上了眼睛记得你的笑容 <br>
		幸福的从容将灵魂都掏空 <br>
		享受一分钟的感动 <br>
		是否爱上一个人不问明天过后 <br>
		山明和水秀不比你有看头 <br>
		牵着你的手，一直走到最后 <br>
		这一刻怎么回头 <br>




		明天过后<br>
		没有星星的夜空<br> 
		没有话题能补充 <br>
		太多承诺从指缝中溜走 <br>
		不敢奢求什么 <br>
		回忆将我们扣留 <br>
		一瞬间亲吻的时候 <br>
		一切就好像轮回般朦胧 <br>
		心动渐渐的失控 <br>
		是否两个人足够捕捉爱的镜头 <br>
		闭上了眼睛记得你的笑容 <br>
		幸福的从容将灵魂都掏空 <br>
		享受一分钟的感动 <br>
		是否爱上一个人不问明天过后 <br>
		山明和水秀不比你有看头 <br>
		牵着你的手，一直走到最后 <br>
		这一刻怎么回头 <br>






		<a href="#top">顶部</a>
</body>
</html>

When our web page has a lot of content, we keep looking down. Page, click to return to the top, thereby going directly to the head of the page