How to assign and use HTML anchor?

Today's topic for discussion will be the HTML anchor. This element allows you to make quick transitions both inside the page and in external documents. Anchors are often used by web developers. Since they help to organize a site convenient for readers. The article will provide a detailed description of this element and examples of effective use.

html anchor

Description

An HTML anchor is a kind of unique bookmark for a web page. He always has his own individual name, which should not be repeated on one page. The main purpose of the anchor is a quick transition from one part of the document to another, to a specific location. This element is particularly effective when the web page is large. Because of this, users are not comfortable reading the contents of the site. And the anchor on the HTML page allows for a quick transition.

Assignment

You can use two different methods to create such a bookmark on a page. The first is to use the Name attribute, and in the second case, you must use the ID attribute. Next, we will consider each method individually. The transition in both cases occurs using the β€œa” tag, the attribute of which contains a name or identifier. For example: β€œa href =” # footer ””. The # symbol tells the browser that the link will anchor.

Name

The Name attribute was created specifically to create an anchor on the page. Any text can be its value. This HTML anchor can only be used with the β€œa” tag.

html page anchor

For example, you want to create a bookmark at the very end of your page. You need to put the tag β€œa name =” footer ”” β€œ/ a” in the part of the web document that you need. In another area of ​​the page you will have to create a link to the anchor, for this add the entry β€œa href =” # footer ”” link β€œ/ a”. When you click on this item, the browser will automatically take you to the part of the document where the Footer tab is.

ID

To begin with, it is worth saying that ID is an identifier that does not have a direct purpose for creating anchors. But it allows you to create bookmarks throughout the document without creating additional links. That is, you can apply the ID attribute to any HTML element. And then using the tag "a" refer to it. Here is an example: the p element is in the middle of the document. To go to it from the top of the page without using scrollbars, add the ID attribute: β€œp id =” centr ”” β€œ/ p”. Next, create a link: β€œa href =” # centr ”” Text β€œ/ a”. Thus, we get quick access to any part of the document. The value of the ID attribute can be arbitrary text.

html link anchor

Efficient use

In HTML, anchor link is often used to build document navigation. For example, a page has a huge amount of textual information, which in turn is divided into separate paragraphs or chapters. To make it convenient for visitors to use the site, you must assign bookmarks to quickly jump to a separate part of the document. To do this, in each chapter, create an anchor link, or use ID identifiers. And on top we’ll make a navigation bar with the contents of all the links. An interesting fact is that anchors can be referenced from other web pages. Just add the value of the Name or ID attributes to the end of the link. Remember to add the # character. The scheme in this case should look like this: main link # name (id).

Conclusion

An HTML anchor is a very useful and in some cases even necessary element. In the article, I presented only one example of its effective use. But in fact, this kind of bookmark can be used in many situations. The main thing is to understand their main idea.

Source: https://habr.com/ru/post/K22206/


All Articles