Html anchor link

      113

An anchor links is a link that helps lớn link to the content on the same page that has an anchor attached. It is a quality id (identifier) attached khổng lồ the nội dung block or specific element. To add an anchor, you must be able lớn edit element CSS or have tools that allow you to vị that.

Bạn đang xem: Html anchor link


In this article, we will look inlớn all you need khổng lồ know about anchor links:

Anchor liên kết can significantly improve user experience by introducing quiông chồng navigation options across your nội dung. Your site visitors can get to lớn the desired information in a matter of seconds và skip scrolling through the nội dung they are not interested in. It can also help you lead the visitors towards your ‘Call lớn Action’ và reach better results in your page goals.

What Is an Anchor Link

In the very essence, you can look inlớn anchor links from two different perspectives. An individual anchor links can be considered as a marker that helps you reach the desired information without searching the whole page.

On the other hand, the mix of anchor link can be seen as an interactive sầu table of content. Just like a book where you see all sections listed. The only exception is that you actually cliông xã on the sections to get there.

From the SEO perspective, anchor links & anchor liên kết sets play a significant role. They help to emphaform size the importance of the nội dung, define the structure of your page, and improve on-page SEO analysis data. Google ain’t no fool, which means it will get a lot more information about your content by checking the anchor liên kết structure.

As we have some clues about what are anchor links, let’s see how we can actually create anchor liên kết.

How to Create Anchor Links

From a technical point of view, an anchor links consists of two parts. The first part is the anchor itself – a unique identifier you can attach lớn your page elements. In CSS, the anchor is represented as id=”unique-id” & can be used as a reference khổng lồ the element in CSS or JavaScript.

The second part consists of an actual link. The difference is that the URL consists of the hash symbol và your quality id – #unique-id.

As an example, let’s imagine we have sầu a paragraph placed somewhere at the bottom of the page. We want lớn create an anchor links to this paragraph.

The first thing we need khổng lồ add a chất lượng ID to the paragraph, for example, ‘full-description’. Locate the element và add an id=”full-description” khổng lồ the element opening tag.


Next, we need to lớn create a liên kết from the top of our page. As you create a links, you will need to specify an anchor together with the hash symbol.

Full Description

.Done? Congrats, you have sầu your first anchor link added và running.

How to lớn Create Anchor Links in WordPress

Creating an anchor liên kết in WordPress is not that different.

Note: We will use the WordPress Classic Editor with TinyMCE.

First, we will need khổng lồ create an anchor on our page:Switch to lớn the Text mode of the TinyMCE;Navigate to the nội dung part where you want to lớn have an anchor attached;Add an ID with a quality anchor name (ex. id=”anchor-name”). You can apply an ID lớn any element within your layout.

*

Now, it is time to liên kết to the anchor you have created:

Select the text that will work as a links and click ‘Select/Edit link’;You will see a popup lớn edit links parameters;Add a hash symbol together with the anchor name you have sầu created;Save the changes.

*

Your anchor link has been created. You can now Pnhận xét the changes lớn check how it works.

If you want to link lớn the anchor from your navigation:

Go lớn Appearance – Menus in your WordPress Admin Dashboard;Select lớn add a new section lớn your menu;Add a liên kết lớn your destination page;Save the changes.

If you are working with the Gutenberg editor, make sure to kiểm tra which Gutenberg blocks have an element id attribute. Although you can still add an anchor khổng lồ the text blochồng, having an id option for the element can exp& your capabilities.

As for the rest, follow the same principles of inserting a links with the hash symbol và element id specified.

How khổng lồ Create Anchor Links in Visual Composer

Visual Composer allows you to add anchors to any element of your layout. This means you create anchor link to your sections, images, pricing tables, you name it.


The triông chồng is that every element of Visual Composer has an Element ID attribute available out of the box.

Xem thêm: Các Lệnh Trong Excel 2007 2010 Bạn Phải Biết Để Thành (Pro), Tổng Quan Về Các Công Thức Trong Excel

To add an anchor khổng lồ the element or section:

Choose the element you want khổng lồ ‘jump’ to (a.k.a. the destination);Open the element edit window;Add a chất lượng ‘Element ID’ (don’t use spaces).

*

Once you have sầu your Element ID added, it is time to lớn add an anchor link:

mở cửa the edit window for the element where the anchor link is going lớn be added (ex. Basic Button);Cliông chồng on ‘Select URL’;Add the unique ‘Element ID’;Note: make sure khổng lồ use only letters & numbers without spacing.Choose “custom” at the URL drop-down.

*

That’s it. You have created an anchor link with the Visual Composer Website Builder.

As we know how lớn create anchor link, it is time lớn look into some good examples and cases on when to lớn use it.

When To Use Anchor Links

There are certain places và cases when it is a good idea to use anchor liên kết. Let’s look into lớn examples when you should consider linking to lớn the same page.

Table of Content

Just like in books, it is easier to lớn navigate across the article with a table of nội dung in place.

*
Table of contents example by InVision

The difference is that you can make your table of content clickable. If your site visitors are looking for a specific section to lớn read, they will be able to lớn get there by simply clicking on it in the table of content.

In addition, it will help Google lớn properly index your site and probably rank a bit higher in the search results.

Hotline lớn Action

As you build a sales funnel, all your site actions must lead to lớn the next step.

Anchor links can help you to push the user towards completing this next step. As a site owner, you can place various call khổng lồ kích hoạt blocks on your page that link to the desired action.

*
Điện thoại tư vấn to lớn kích hoạt anchor example by Elivi Hotels

For example, let’s imagine we have a tương tác size lớn collect e-mails. On your page, you can insert several Điện thoại tư vấn to Action blocks that push the user khổng lồ complete the khung. As they click on the link, the anchor link will instantly take them lớn the liên hệ khung located at the bottom of the page.

The same principles can be applied to lớn the pricing tables or order forms.

In fact, as you browse through the web, you will see many sites using anchor liên kết khổng lồ tư vấn their funnel.

Landing Pages & One Page Layouts

A typical trang đích cần seo and one-page sites consist of multiple sections reaching thousands & thousands of pixels to scroll through.

*
An example of a one-page site with anchor by Vegoshi

To ease the life of your visitors, it is a good idea khổng lồ incorporate navigation (menu) at the top of the page to help them navigate. Such an approach will improve user experience and also help khổng lồ structure the information.

Yet, since we are talking about a one-page layout, standard links will not work there. Instead, we will need lớn create anchors & use anchor liên kết in our navigation.

Scroll khổng lồ Top

While all of the examples above are using a top-down approach, we can go in the opposite direction. Rethành viên the case when you scrolled down to the bottom of the page và realized that there is something at the top? To get baông xã, you had to scroll all up …

*
Scroll lớn top example by CN100 website

With anchor links, you can add an anchor at the very top of the page và links to it from the bottom. This will help your site visitors navigate baông chồng khổng lồ the top faster.

In fact, a lot of e-commerce stores use the Scroll khổng lồ Top approach khổng lồ improve user experience.

Conclusions

Anchor liên kết can be a powerful instrument at your fingertips. It is easy to implement & can improve sầu your conversion rate, UX, & SEO.

The use of anchors can help you lead your customers through the sales funnel, access various parts of your page quickly, introduce navigation on one-page sites, and more.

Do you know any other places where anchor liên kết could be a good fit? Let me know in the comments below.