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.


Screen Shot 2014-04-11 at 5.47.34 PM

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.

Screen Shot 2014-04-11 at 8.01.32 PM

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:

Screen Shot 2014-04-11 at 8.09.29 PM


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”:

Screen Shot 2014-04-11 at 8.09.33 PM

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:

Screen Shot 2014-04-11 at 8.09.37 PM

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!



~ by cs3309 on April 11, 2014.

5 Responses to “How to Create Links to Different Parts of the Same HTML5 Page (aka Anchoring)”

  1. Hey! I feel as though you had a strong command of language that completely guided this post, but that it still required the images (thus making them essential/relevant) so that the user could actually see what the correct html looked like.

  2. Text in this post is used to convey directions in simple terms. Instead of using the images to as a supplement for carrying out the directions, you decided to use them to display what the end result should look like – this was different from most of the other posts and worked well with your subject matter.

  3. Your images here are good and they really help to back up your words, but I just wish I had more of them, particularly a final picture that showed all the code you used in one single picture to show what you did. Having all the code in separate pictures makes it a little difficult for me to visualize, and to check my work against if I’m actually doing this process myself. The text is great and really helpful, but the pictures help to really cement your ideas and give them fuller comprehension of what you’re saying.

  4. You did a great job of telling the reader a little more than just what is necessary to complete the task. Your strategy seemed to rely mostly on text with images as a backup.

  5. I think some of the language in this is really helpful in teaching someone how to use anchored links, but maybe it explains too much of the basic stuff for someone who is learning how to do this anyway.

Comments are closed.

%d bloggers like this: