Anchor (Jump) Links

Add an ID somewhere on your page. In order to link to a specific spot on your page, you'll need to add an ID element somewhere on the page. In an HTML document, all IDs must be unique, so you won't run the risk of 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

,

, etc., you can add IDs to the headings so you can easily jump to them with a hyperlink. Example: Creating a

heading that says "Chapter 1" with the ID "chapter1":

Chapter 1

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. In order 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: Chapter 1 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: Chapter 1

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. Both of these issues can be fixed with a few lines of simple CSS. In the of your document, if you don't already have tags, add them now. Add the following CSS declaration block for the html selector between your style tags: html { scroll-behavior: smooth; scroll-padding: 1rem; } 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.).

Finalize and test your webpage. Once you've added all of 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.

Linking Buttons

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 at all, and instead uses pure CSS to format the button. Make the button with CSS. You should already have 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: 20px; 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 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 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: Chapter 1 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: 20px; text-align: center; text-decoration: none; display: inline-block; }

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 tags in your document's head. Add a button to your HTML code. You can do this with the tag. Between the button tags, add the text you want to be on the button. For example: Click Here 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: Click Here

Highlighted Text Links (Chrome)

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. If you're trying to link to a specific spot on your own webpage, consider using anchor links, which is described earlier in this article.

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.

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.

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.

Share the link. You can share this link anywhere you're able to post links. This could be in a text, DM, social media post, or email, for example. 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.