You are currently viewing How to Create Link to Specific Section of the Webpage in HTML
  • Post category:HTML

How to Create Link to Specific Section of the Webpage in HTML

HTML Anchor Link Same Page

Some people think that hyperlink is only used to link from one webpage to another webpage. But we can link to jump specific part of a page. So, in this article, we will see how to add jump link to a specific part/section of same page using an HTML anchor tag.

Anchor links is also known as “jump links” or “named anchors,”. It can allows you to link to a specific section or content within the same web page. When you have a long page with multiple sections, you can link a specific sections for users to navigate without having to scroll through the entire page.

What is anchor tag?

The <a> tag in HTML is called anchor tag. This tag is a very important tag in HTML because only by using this tag we can create a hyperlink. A hyperlink (link) is a link from one webpage to another webpage or to content on the same webpage.

To create hyperlink in HTML, we have to use <a> tag and give the link we want to link in “href” attribute. Then Hypertext i.e. the text of the link we have to put inside the <a> tag. Our link is always displayed in hypertext, when users click on the hypertext the hyperlink works. If we don’t give hypertext then hyperlink won’t display.

READ ALSO  How to Create Loading bar HTML

Syntax:

<a href="Your link">Your HyperText </a>

Example:

<a href="https://wonderdevelop.com">WONDER DEVELOP</a>

In the above example code, we have gave the link in ‘href‘ attribute. And we have given the hypertext ‘WONDER DEVELOP’. So if users click on that hypertext, it will redirect to our webpage ‘wonderdevelop’.

Example of add jump link to a specific part of page

Click the below live preview link like Header, Menu, Body and Footer in the and see how the jump link works.

See the Pen
Same page link Demo by Wonderdevelop (@wonderdevelop)
on CodePen.

Click the HTML or CSS button above the preview to see the code

How to link to a specific part of the same page?

A webpage has multiple sections and they are separated by <div> tag. A page has several sections like Major heading(h1), heading(h2), subheading(h3), minor heading(h4), and paragraph(p). We can create jump link by giving idname of specific section using anchor tag. Follow these steps to add jump link to your content using an HTML anchor tag

1. Create your section:

A section should be created using the HTML <div> tag. Then we need to give id name using ID attribute only then we can add link in specific part/section. For example:

<div id="section1">Header</div>
<div id="section2">Navigation Menu</div>
<div id="section3">Body</div>
<div id="section4">Footer</div>

In this example, we have created a four section using <div> tag such as header, navigation menu, body and footer. Then we set the idnames for each section like section1, section2, section3, and section4. You can put whatever content and styles you want in your sections.

READ ALSO  Top 10 HTML Projects for Beginners 2023 [with Source Code]

We are going to add the link to the specific section using the ID name given in the div tag, so your idname should be simple and relevant words like in above code.

2. Create link using anchor tag

We need to create link using <a> tag. We put the hypertext between the opening <a> and closing </a> achor tags. To link the section, we need to use ‘href’ attribute of <a> tag and give the section id name with “#” hashtag like:

<a href="#sectionName">HyperTextName</a>

Example:

<a name="section1">Header</a>
<a href="#section2">Menu</a>
<a href="#section3">Body</a>
<a href="#section4">Footer</a>

3. Repeat for other sections

If you want to add anchor links to other sections on the same page, simply repeat steps 1 and 2 for each section.

Why should we create anchor links to jump to a specific part of the page?

  • When you have a long page with multiple sections, anchor links can provide a more efficient and user-friendly way for visitors to navigate your content.
  • Users can simply click on a link that takes them directly to that section Instead of scrolling through the entire page to find the section
  • If you have an article with several subheadings, you can create anchor links for each subheading, allowing readers to share a link that takes others directly to the section they want to reference.
  • It can help search engines index your content more accurately and increase your chances of appearing in relevant search results.
  • It makes easier to reference specific sections of your content, improve accessibility, and boost your search engine optimization.

Leave a Reply