How do I link to a specific part of a page in HTML?

Question

In today’s world, people want to access the piece of information they look for with only one click. When you enter a URL in the address bar, the browser takes you to the top of the webpage. In order not to waste time navigating the whole page, you can link to a specific part of it. By doing so, you not only save time but also help your business grow. Below you can find how to effectively link to a specific part of a page.

Table of Contents Show

Steps to be Followed to Link to a Specific Part of a Page
Conclusion of How to Link to a Specific Part of a Page
HTML Links - The target Attribute
Absolute URLs vs. Relative URLs
Absolute URLs
Relative URLs
HTML Links - Use an Image as a Link
Link to an Email Address
Button as a Link
Link Titles
How do I link to a specific part of a different page in HTML?
How do you make a hyperlink go to a specific part of a page?
How do you go to a specific section in HTML?
How do I link to a specific part of a page without an anchor?

Steps to be Followed to Link to a Specific Part of a Page

It is very practical to jump to a specific part of a page and start reading what you want directly. Here are the steps you can follow:

1. Give a name to the part you want to link to.

Normally, when you want to link to something, you just need its URL. Yet, when you want to link to a specific part of the same page, you need to come up with a name for the link’s destination. While creating the name, make sure that there are no spaces in between. You can separate the words by using dashes or underscores. For example, if you are writing an article about Thomas Hardy and want to link to his biography, a suggested name could be “his_biography”.

2. Insert the name you have created into an opening HTML anchor link tag. It will show as below:

<a id=“his_biography”>

3. Place the complete opening <a> tag before the object or text you want to link to and, add a closing </a> tag after. When you do it, your code will look like this:

<a id=“his_biography”>This is the biography I want to link to.</a>

4. Create the hyperlink which will lead you to that object or text.

Go to the part of the post you want to have the hyperlink in. You might add a typical hyperlink HTML mark-up. However, you need to include the pound symbol (#) and then the name of the object you link to in the part where you normally include a URL. Here is how it looks:

<a href=“#his_biography”>Click here to see the biography of Thomas Hardy.</a>

Congratulations! Now you have a functioning hyperlink between the two contents on the same page.

Conclusion of How to Link to a Specific Part of a Page

In this article, we have covered the steps as to how to link to a specific part of a page in this article. We have explained the rules that must be applied while forming an ID. Also, we showed the ways to link to a specific content we want to read on social media websites and on Wikipedia. We hope you enjoy and benefit from this article!

Example

This example shows how to create a link to W3Schools.com:

Visit W3Schools.com!

Try it Yourself »

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window or tab:

Visit W3Schools!

Try it Yourself »

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):

Example

Absolute URLs

W3C

Google

Relative URLs

HTML Images

CSS Tutorial

Try it Yourself »

HTML Links - Use an Image as a Link

To use an image as a link, just put the 0 tag inside the tag:

Example

Try it Yourself »

Link to an Email Address

Use 2 inside the href attribute to create a link that opens the user's email program (to let them send a new email):

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

HTML Tutorial

Try it Yourself »

Link Titles

The 4 attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

How do I link to a specific part of a different page in HTML?

How to link to a specific part of a page.

Give a title to the text you'd like to link. First, make a title or name to the text you'd like to link on your webpage. ... .

Put the title into an opening HTML anchor link tag. ... .

Insert the anchor tags around the text you want to link to. ... .

Create a hyperlink that leads you to the text..

How do you make a hyperlink go to a specific part of a page?

Add the link.

Select the text or object you want to use as a hyperlink..

Right-click and then click Hyperlink ..

Under Link to, click Place in This Document..

In the list, select the heading or bookmark that you want to link to..

How do you go to a specific section in HTML?

Method 1: Using HTML: One can use the anchor tag to redirect to a particular section on the same page. You need to add ” id attribute” to the section you want to show and use the same id in href attribute with “#” in the anchor tag.