How to Make a Link to a Specific Part of a Webpage in HTML

Download Article

Plus how to create highlighted text links in Google Chrome

Co-authored by Hannah Dillon Reviewed by Luigi Oppido

Last Updated: September 17, 2024 Fact Checked

Download Article

Anchor (Jump) Links

|

Linking Buttons

|

Highlighted Text Links (Chrome)

Are you trying to create a link to a specific part of your webpage? You're likely familiar with external links, which link to a different website than your own. However, when a link goes to a different spot on your own webpage, this is called an anchor (or jump) link. Keep reading to learn how to create anchor links and highlighted text links in the Google Chrome browser.

Quick Steps

Add an element to the point you want to link to (like an h1 tag).
Add a unique ID to that name with the "id" attribute (ex.: <h1 id="idname">).
Create a hyperlink to that ID (ex.: <a href="https://www.site.com/page#idname">).
Test the code and ensure the link jumps to the correct ID.

Section 1 of 3:

Anchor (Jump) Links

Download Article

1
Add an ID somewhere on your page. To link to a specific spot on your page , you'll need to add an ID element somewhere on the page. ^{[1]
X
Research source} In an HTML document, all IDs must be unique, so you won't risk linking to the wrong location when using them. While you can add an ID to almost any HTML element, below are some common elements you can add an ID to for creating jump links:
- Add an ID to a heading. If your webpage is broken into various headings using <h1> , <h2> , etc., you can add IDs to the headings so you can easily jump to them with a hyperlink.
  - Example: Creating a <h1> heading that says "Chapter 1" with the ID "chapter1":
    < h1 id = "chapter1" > Chapter 1 </ h1 >
- Add an ID to a span tag. If your webpage isn't broken into headers or you're using #h1 , #h2 , etc., for something else, you can add the ID into atag. Span tags are generic inline container elements, which means they won't add additional line breaks like a
  would. You can also add span tags around nothing to link to a spot on your webpage with no text, images, or other elements.
  - Example: Adding a span tag around some text with the ID "chapter1":
    
    < span id = "chapter1" > In Chapter 1 we will be covering the basics of HTML. </ span >
- Add an ID to an anchor tag. Like a span tag, you can add an ID to an anchor tag. If you leave out the href property, the anchor tag won't link to anything, but the link you create will be able to find the ID and jump to that spot. And just like the span tag, you can put the <a> tags around text, another element, or nothing.
  - Example: Adding an empty anchor tag with the ID "chapter1":
    < a id = "chapter1" ></ a >
2
Create your hyperlink. When working with IDs, you'll often see the ID name preceded by a hashtag (#). This is also the case in a hyperlink . When referencing an anchor point in a link, you'll add #idname to the end of the URL. For the link to work, the ID referenced in the URL must be somewhere in the HTML for that page. There are a few ways you can do this:
- Writing out the whole URL. This is also called an "absolute URL." If you know your URL won't change due to a domain name change or site directory reorganization, you can safely use an absolute URL. However, writing the absolute URL every time is time-consuming, so it may not be the best choice if you need to add a lot of links.
  - Example: Writing a link with an absolute URL to the "chapter1" ID written into the HTML of /page :
    < a href = "https://www.examplesite.com/page#chapter1" > Chapter 1 </ a >
- Writing out part of the URL. This is also called a "relative URL." When writing a relative URL, you start writing from where the link changes. The link assumes that the scheme (https://, http://, etc.), subdomain (www., mail., m., etc.), domain, top-level domain (.com, .gov, .jp, etc.), and potentially even part of the path are the same up until the beginning point of the URL. Relative URLs will continue to work even if your site changes domain name or your site's directory is reorganized, and they can save a lot of time. However, they can be somewhat confusing to write for beginners.
  - Example: Writing a link with a relative URL to the "chapter1" ID written into the HTML of /page :
    < a href = "/page#chapter1" > Chapter 1 </ a >
Advertisement
3
Add CSS to adjust the scroll points (optional). While CSS isn't required to create a link to a specific spot on your webpage, you may notice two things without it: the jump after you click on the link is sudden and not very smooth, and the jump may go down farther than you want. These issues can be fixed with a few lines of simple CSS.
- In the <head></head> of your document, if you don't already have <style></style> tags, add them now.
- Add the following CSS declaration block for the html selector between your style tags:
  html { scroll-behavior : smooth ; scroll-padding : 1 rem ; }
  - The scroll-behavior property with the smooth value tells the webpage to animate a smooth scroll when clicking on your anchor link instead of the harsh default jump.
  - The scroll-padding property will offset the jump when you click on an anchor link, which is helpful if the scroll point cuts off part of your header or text. The 1rem value can and should be changed to fit your specific website's design.
    - A "rem" unit is a relative length unit that is relative to the font size of the root element. You can replace rem with any other unit of measurement in CSS (including em, px, pt, mm, in, etc.).
Once you've added all your links, IDs, and (optional) CSS, save your document and open it up to test it. Make sure you click each link to ensure it jumps to the right spot on the page.

Section 2 of 3:

Linking Buttons

Download Article

1
Linking a CSS button. One way to make a button with an anchor link is by creating the button with CSS. Making a button with CSS doesn't actually use the HTML button tag; instead, it uses pure CSS to format the button.
- Make the button with CSS. You should already have <style></style> tags in the head of your HTML document. Between the style tags, insert this CSS declaration block for the a selector:
  a { background-color : #FF0000 ; color : #FFFFFF ; padding : 20 px ; text-align : center ; text-decoration : none ; display : inline-block ; }
  The properties and values included in the code above are just an example. Feel free to add, remove, or change these declarations as needed. You can also use the a:link , a:visited , a:active , and a:hover selectors with separate CSS declaration blocks to add a different style depending on the link's stage.
- Add the link to your document. Since you've added a style to the a selector, any time you add a link via an <a> tag, the style will be applied.
  - Note: if you don't want to add the button style to every link on the whole page, enclose the <a> tags that should be buttons with a container (i.e. a span or a div tag) and give that container a unique class or ID. For example:
    < span class = "navbar" >< a href = "/page#chapter1" > Chapter 1 </ a ></ span >
  - Then, in your CSS, change the a selector to include the class or ID. In CSS, class selectors are preceded by a period (.), and ID selectors are preceded by a hashtag (#). Using the previous example, the CSS might look like this:
    . navbar a { background-color : #FF0000 ; color : #FFFFFF ; padding : 20 px ; text-align : center ; text-decoration : none ; display : inline-block ; }
2
Linking an HTML button. If you'd rather use the HTML button tag, you can attach a link with a simple JavaScript function. Note that the steps below won't go over adding CSS styling to the button, but you can do so by giving the button tag a CSS class or ID and adding that class or ID selector to your <style></style> tags in your document's head.
- Add a button to your HTML code. You can do this with the <button> tag. Between the button tags, add the text you want to be on the button. For example:
  < button > Click Here </ button >
- Add an onclick JavaScript event with your link. This JavaScript function tells the browser to follow a particular link when the button is clicked. The event is added to the button tag like an attribute with the code onclick="window.location.href = 'URL';" . For example:
  < button onclick = "window.location.href = '/page#chapter1;" > Click Here </ button >

Section 3 of 3:

Highlighted Text Links (Chrome)

Download Article

1
Go to the page you want to share. This method works best on webpages that aren't yours. This method also only works in Chrome or a Chromium-based browser (like Opera), though you can do it on either desktop or the mobile app. ^{[2]
X
Research source}
- If you're trying to link to a specific spot on your own webpage, consider using anchor links, which are described earlier in this article.
2
Highlight some text at the point you want to share. You can highlight as little as one word or as much as a few paragraphs.
- On desktop, click and drag your cursor over the text to highlight it.
- On mobile, tap and hold the first word you want to highlight, then drag the selector over all the words you want to highlight.
3
Right-click the highlighted text (desktop only). If you're on Mac, hold the Control key and click on the text to perform a right-click. This will pull up a contextual menu.
- If you're on the mobile app version of Chrome, you can skip to the next step.
4
Copy the link to the highlighted text. How you do this depends on what platform you're on:
- Desktop: Click Copy link to highlight in the contextual menu.
- Android: Tap the Share button.
- iPhone and iPad: Tap the Create link button. You may need to tap the highlighted text to see this option in the contextual menu.
5
Share the link. You can share this link anywhere you're able to post links. For example, this could be in a text, DM, social media post, or email. You'll notice the URL has ":~:text=" at the end, followed by some or all of the highlighted text. When you visit this URL, the text you highlighted to create the link will be highlighted purple.
- To paste on desktop, either right-click (control-click on Mac) and select Paste , or press Ctrl + V (Windows)/ Cmd + V (Mac).
- To paste on Android, iPhone, or iPad, press and hold where you want to paste the link and select Paste .