When I\u2019m reading a blog post or a long web page, one of my favorite things to do is jump to a specific section that I want to read first. This is made possible thanks to anchor links.<\/p>\n\n
Want to see what I mean? Scroll to the table of contents below. Each of the topics in the table of contents is clickable, allowing you to jump directly to that section.<\/p>\n
Pretty cool, right? The best part about it all is that it\u2018s super easy to create an anchor link yourself, even if you don\u2019t have extensive HTML knowledge<\/a>. If the HTML-speak feels confusing, just follow along with the real-world examples below.<\/p>\n Note: If you are a HubSpot customer,<\/em> follow these instructions.<\/a><\/p>\n Table of Contents<\/strong><\/p>\n What is an HTML hyperlink?<\/a> <\/a> <\/p>\n An HTML hyperlink is a clickable link that can be attached to any HTML element<\/a> on a webpage, such as an image or text. These links can be used to direct users to other pages within your site, external websites, or even specific parts of a webpage.<\/p>\n Hyperlinks are created by using HTML code, which is the language used to structure your website. Strategically utilizing hyperlinks can help you enhance the user experience on your website by guiding users through your content and help them discover related information.<\/p>\n <\/a> <\/p>\n An HTML anchor link, also known as a jump link, is the link that takes you to a specific part of a webpage. Anchor links are especially helpful for guiding users through a long page.<\/p>\n A great example of this is the table of contents I mentioned above. The table of contents uses anchor links that link out to different sections of this blog post, making it easier for readers to find the exact information they\u2019re looking for.<\/p>\n Allowing people to effectively \u201cjump\u201d to a certain part of a webpage can make your website content more engaging. It\u2019s also important for the user experience as it makes your content more convenient and scrollable for visitors to your site \u2014 but you have to make sure you do everything just right.<\/p>\n <\/a> <\/p>\n <\/a> <\/p>\n Creating an anchor link is simple. But it\u2019s helpful to understand which HTML elements are involved and how they all connect. These are the elements required to create an anchor link.<\/p>\n The most essential HTML element of an anchor link is the anchor element tag. This is the letter \u201ca\u201d with angle brackets on either side. It looks like this: <a>.<\/p>\n When you add the anchor element, it can hyperlink to a web page, an email address, a phone number, a file, or a section of content on the same page.<\/p>\n Href \u2014 which stands for hypertext reference \u2014 is an attribute that specifies the destination of a link on a web page. An href attribute is usually added to define where the anchor link should be directed.<\/p>\n The id tag is an identifier that defines a unique element in the HTML. In the case of anchor links, the id is used to identify the section on the page you want to link to.<\/p>\n When adding an id to your anchor link code, it should look something like this:<\/p>\n <a id=\u201c[idenitifier goes here]\u201d><\/p>\n Want to learn more about HTML basics and CSS hacks? Download this free ebook packed with 25 tangible tips and coding templates<\/a>.<\/p>\n <\/a> <\/p>\n Now that I\u2019ve shared the main elements that go into an anchor link, I\u2019ll show you how to create an anchor link on your webpage, step by step.<\/p>\n In a normal linking scenario, whatever you need to link to has a URL of its own. However, in this scenario, you\u2018re not linking to a new page with its own URL \u2014 so you have to make up a name for the link\u2019s destination.<\/p>\n I\u2018d recommend using a word or phrase that describes the link\u2019s destination. If you use a phrase, use underscores between each word instead of spaces, otherwise the code won’t work.<\/p>\n Let\u2018s say I\u2019m writing a how-to blog post that\u2019s packed with examples. If I wanted to link to a specific example within the post, here\u2019s what I\u2018d use as my object\u2019s name:<\/p>\n example_1<\/p>\n Now, onto the next step.<\/p>\n Take the name you’ve chosen and insert it into an opening HTML anchor link tag.<\/p>\n In other words, replace the red section of the tag below with the name you chose in the previous step:<\/p>\n <a id=\u201cINSERT_YOUR_OBJECT_NAME_HERE\u201d><\/p>\n In this case, I\u2019ve named my object \u201cexample 1.\u201d<\/p>\n Here\u2019s how that code looks in action:<\/p>\n\n Place that complete opening <a> tag from above before the text or object you want to link to and add a closing <\/a> tag after.<\/p>\n Doing this sets the location of the link. This is what your code should look like now:<\/p>\n <a id=\u201cINSERT_YOUR_OBJECT_NAME_HERE\u201d>The object you want to link to.<\/a><\/p>\n Now, go to the part of the post where you\u2018d like to have the hyperlink. You\u2019ll need to add a typical href attribute<\/a>, which indicates the destination of the hyperlink. However, in the part where you\u2018d typically include a URL, you\u2019ll include the pound symbol (#) and then the name of the object you\u2018re linking to. Here\u2019s what it looks like:<\/p>\n <a href<\/strong>=\u201c#INSERT_YOUR_OBJECT_NAME_HERE\u201d>Click here to see the content below.<\/a><\/strong><\/p>\n\n Here is how the full code should look once you\u2019re done:<\/p>\n\n If you want an easy way to give this a try, try our drag and drop website builder<\/a> for free.<\/p>\n
\n What is an HTML anchor link?<\/a>
\n External Links vs. Jump Links<\/a>
\n Anatomy of an Anchor Link<\/a>
\n How to Create an Anchor Link<\/a>
\n Best Practices for Jump Links<\/a> <\/p>\nWhat is an HTML hyperlink?<\/strong><\/h2>\n
What is an HTML anchor link?<\/strong><\/h2>\n
Anatomy of an Anchor Link<\/strong><\/h2>\n
1. Anchor Element<\/strong><\/h3>\n
2. Href<\/strong><\/h3>\n
3. ID Tag<\/strong><\/h3>\n
How to Create an Anchor Link<\/strong><\/h2>\n
1. Name the object or text you want to link to.<\/strong><\/h3>\n
Example<\/strong><\/h4>\n
2. Insert anchor link tag.<\/strong><\/h3>\n
3. Add opening and closing anchor link tags.<\/strong><\/h3>\n
4. Create the hyperlink that’ll take you to that text or object.<\/strong><\/h3>\n