How to Create Links to Different Parts of the Same HTML5 Page (aka Anchoring)
The One Page Website with Anchored Links: A Popular Trend
A popular site layout nowadays is having a one page website, or close to it. In order to divide up the content, pages are typically super long with different sections on them and larger breaks between the content. This way, the user can find all the information in one space, but they aren’t overloaded due to a highly organized page. See zoomed out version of my bare bones portfolio site.
Of course this isn’t at 100% zoom. While all information may exist on one page, the layout at 100% doesn’t feel overwhelming because the user focuses on one part at a time.
Using Anchored Links in Navigation Bars
Sites like these wouldn’t be complete without a navigation bar to take the user to different parts of the page. Some users naturally scroll down, but links to different parts of the page make it easier for users to find what they are looking for and create a more organized aesthetic.
Typically, a relative link in a document would look something like this where a different html document is linked. Because we are trying to link within the same document, we will have to do something a little differently.
Good news! We still use the <a> tag but instead of putting in a document or file within the quotes, we assign whatever we are linking to an ID in this form:
The ID is similar to the idea of classes where the name of the id can be anything as long as it remains the same in the link. So the general layout of the anchor where a user would click looks like this with an ID named “contactme”:
But we aren’t done! We need to designate where we want the link to take us. Depending on what HTML5 element it is, this form could vary. For our sake, let’s use a div as an example. If I wanted my link to take us to a div, I would write:
Now, when a user clicks on the link “Contact Me”, the browser will automatically take them to that specific part of the page where the ID was assigned!
Things to Remember
Of course, there can still be classes and style assigned to the element, but for this example, I just want to show the markup of the ID and the <a> tag when used as an anchor.
In a nutshell, where you want your link to take you is the element in which you assign the ID to. Remember, you don’t need the “#” symbol in the ID, only use it within the <a> tag in the beginning.
Again, this is something relatively simple, but handy to know in a pinch and is useful when trying to keep up with the latest web trends.
Comments? Questions? Let me know!