These are known as fragment identifiers and can be extremely helpful in enhancing your sites navigation.
This is extremely helpful when you have a lot of information on the page, and you have a lot of vertical scrolling for things like frequently asked questions, glossaries. It’s pretty common to find these types of links that let you sort of jump down to the page. Now, they also allow you to jump to specific sections of the other pages as well.
there’s basically a two-step process in dealing with fragment identifiers.
- One is you have to have an ID on the page so, they jump to the ID attribute that you specify in the link.
- you want to add an ID attribute.
- give it a value of three, I like making IDs short, so they’re easy to remember.
- now we need to make links to each of those Sections 1, 2 and 3. So to do that, I’m going to use our normal anchor element. But the difference is in the href attribute. So instead of linking to a specific page or resource, here we need to link to the ID. And to do that, we use the octothorpe character, which is sometimes called the pound character, and then you follow that with the ID. So, if we’re linking to Section 1, I can see that the ID is one, so I use the word, one. And that’s exactly how that works. I’m going to give this a title, and the title’s going to be section one. I’m a firm believer in doing as little work as possible when you’re coding.
So you can see I surrounded that with a link. What I’m going to do is just copy this, and then paste it around section two, and section three. So what I’m going to do is #2 for that, #3 for that one, and then I have to remember this is really dangerous because, I pasted them without doing, closing link tag first. So you want to do, make sure that you close those anchor elements, both of these as well. So essentially what we’ve got here now, is we have links created around the text for sections one, two and three, and I need to update the titles as two, so two there and three here.
And again, what makes this technique is a two step process. You have an ID attribute on an element, in this case ID equals one, and then the link links to it by using the octothorpe or the hash character here, followed by the ID value. So if I save this, and preview this on my browser, notice that when I click on Section 3, it jumps down to Section 3. If I click the Section 2, it jumps down to Section 2. Now, when I click on these you’re going to see that when I click on, say Section 1 for example, it goes all the way up to the top.
But when I click on Section 3, it doesn’t go all the way up to the top. That’s because it scrolls down as far as it possibly can, it can’t get any further down. Now you also may notice that I’m clicking the Back button in order to take me back up to the top. In terms of usability, this isn’t the best thing in the world. If you’re going to give your users the ability to jump down to the bottom of something, you need to give them the ability to jump back up. So, because of the fact that our top level header this is H1 already has an ID of top, we can create a link at the bottom very easily by just going down to the bottom, and I’m going to create a brand new paragraph down here.
And I’m just going to go ahead and create a link as well. And in the link I’m going to href link that to the top. Now you can see why I like using these short fragment identifiers. We’ll give it a title of back to the top, and then for link text we’ll just click back to top, close the link, and close the paragraph. If I save this, go back in the browser. Now, if I click down to the bottom of the page, I have a link back to the top, takes me back up to the top of the page.
So for usability purposes, that’s not a bad thing. Now, in this instance we’ve been linking to page regions that were within this page. What if you know of a page region in another page that you want to link to. Let’s say for example that somebody’s written a blog post, and you want to jump right to the blog post and not have to deal with the rest of the site. Well in order to do that, all you need to know is the fragment identifier for that section. So if I go into Destination for example, and I scroll through this code, I can see that I have an ID of one for Section 1, an ID of two for Section 2, and an ID of three for Section 3.
So in order to link to these sections, all I need to know is the name of the file that I’m linking to, and the section that I want to link to. So, in fragments, I scroll back up to the series of links that we’re making, I can see that I need to link to Section 2 of the destination.htm page. So I’m going to surround Section 2 with a link here, and I’m going to link that to the page destination.htm, but I’m going to add to this my identifier. So right after the htm, I’m going to type in #2. So what this is telling is it’s saying, hey, navigate to destination.htm, and find the second section.
We’re going to go ahead and give that a title. And I’m just going to give this a title of destination. And then our need to remember to close our link tag. Right now I’m going to save that, go back out to the browser, and now, I want to click on the link to Section 2 of the destination page. It not only takes me to the destination page, but jumps me down to the Section 2 as well. Well, that’s pretty easy to do if you know the section because you’ve created it. But what if you’re going to an outside website and you still want to jump to a specific section? Well let’s say I go to the HTML5 specification from the W3C.
So here I am on their site the w3.org. I have navigated to the HTML5 specification, and I’m basically looking at the table of contents. Now if I scroll through the table of contents, and I just happen to know where this is. I’m going to go down to section five. And in section five, right down here, you can see I’ve been to it already, 5.6.9 Navigating to a Fragment Identifier. There’s really not a lot of information in the HTML5 specification about fragment IDs. This is about the only thing that you can find.
And if you click on it, it’s really some confusing information about the browser’s reaction, it’s navigation if you will, as it scrolls to a fragment identifier. So you’re not get a whole lot out of this. The whole idea of doing this, however, is to see that when I click on this, the URL up top in the address bar is telling me all I need to know. Notice it already has a pound here, Scroll-to Frag ID. So we’re seeing in this instance, they’re using a fragment identifier to navigate to this specific section.
Now if you don’t necessarily know what the fragment identifier is, you can always take a look at the source code of the page as well. Notice that if I click in the side this header, and I right-click and tell it to inspect this element. You can see, I’ve actually got a couple of different IDs that I could use. I have the ID for the h4 right here, scroll-to frag ID, that’s what we’re seeing here. But we also have this ID that’s navigate-frag ID. So I could really use either of those. I think I’ll just stick with the one that they’re using, because this makes it very easy for me to come up to the URL, and just copy this.
So I’m going to go back into brackets, and where it says fragment identifiers as defined by the W3C, I’m going to surround the words fragment identifiers with a link. So I’m going to do the anchor element, I’ll do the href. And the href I’m just going to paste in what I copied online, from the W3C because that’s going to be way too hard for me to type in And then I’ll do a title attribute, and I’ll type in W3C Fragment Identifiers, close that and then, you gotta remember, to close the links.
So I’ll save that, preview that in my browser, and now if I click on this link Fragment identifiers as defined by the W3C. It jumps right to that section, perfect. Now one last thing that I want to mention in terms of usability, as helpful as these fragment identifiers can be when you plan out your site navigation, you really do need to be thoughtful when you’re using them. Because, often it’s not really apparent to the user where they’ve jumped to, which can be a little disorienting if they’re not used properly. So as you plan the use of fragment of identifiers, make sure that you eliminate any potential confusion that they can cause to your users.