How To Anchor HTML

Table of contents:

How To Anchor HTML
How To Anchor HTML

Video: How To Anchor HTML

Video: How To Anchor HTML
Video: HTML For Beginner : How to Use Anchor Tag 2024, April
Anonim

The anchor on the site is very useful if you want the articles on your site to have a convenient transition between the list items. They turn the page to the desired point or open the desired page, helping the user to quickly find the information he needs.

How to anchor HTML
How to anchor HTML

If you are writing your own site, you should have thought about how to make your site navigation more convenient. So that the user does not have to search for the information he needs among all the pages of your site, it is best to use the "anchor" technique. It will create a link to any information or document anywhere on your site.

Theory

To create an anchor, you need two elements:

  • The part of the code, which indicates the link to our anchor, left in another part of the site.
  • Any part of the code in which an identifier can be specified is our anchor.

First you need to create the first part of the anchor - a link to it. An anchor link has two parts: a page link and an anchor link.

  1. Create an "a" tag or any other tag that supports the "href" attribute
  2. In this tag create the "href" attribute
  3. Specify a link to the site page in the attribute value.
  4. After the link, indicate the link to the anchor using the "#" symbol and any name for the anchor (written together, for example: "#anchor")

If you skip point 3 and do not specify a link to the site page, the anchor will be searched for on the current page. That is, if you want to create a link to an anchor located on the same page, you can omit the link to the page itself.

It remains to create the second part of the anchor - the identifier. It refers to any tag in the site code that supports the id attribute. To create an anchor, you need:

  1. Create an "id" attribute in the required tag.
  2. In the "id" attribute, specify the value of the anchor name that was specified in the previous step. (example:)

After these two steps, a link appears on the site that will take you to the specified anchor.

Practice

Let's see how to create an anchor using a specific example.

We have a simple page like this:

Image
Image

We have text at the top and bottom of the page, lots of "br" tags that create space between the texts. We need to create an anchor so that we can quickly look at the text at the bottom.

To do this, create a new tag - "a" after the inscription "text at the top". In it we create the "href" attribute. To make the anchor more convenient, we will write "down" in the link.

Image
Image

Now we specify the value "#yakor" in the attribute - this will be a link to the name of the anchor.

Image
Image

The first part of the anchor - the link to it - is ready. Now all that remains is to create the anchor itself. We pass to the desired part of the page. In this case, it is "text at the bottom". Since this is simple text without a tag, we need to create it. To do this, enclose the text in a "paragraph" - tag "p".

In this tag we create the "id" attribute and enter the value "yakor" into it. The value "yakor" matches the anchor name that was specified in the link.

Image
Image

Now our anchor is working as it should.

Recommended: