Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to linking to external pages and sites, anchors allow us to jump to specific sections within a document as well. These are known as fragment identifiers and can be extremely helpful in enhancing your site's navigation. So, to explore these, we are going to work on two files here: the fragments.htm and destination.htm, the files which you can find in the 04_04 folder. Now just to show you guys kind of what's going on with this file, I am going to go ahead and preview it in a browser first. And what this is it's a fairly long document. So I have got three separate sections in it, and then I've got some links that I want to create here that's going to allow the individual reader to jump down the page to the specific section they are interested in. And this is very, very helpful for long documents where you have, like, frequently asked questions or technical documents where the length of the page causes somebody to have to scroll a long way to get to a specific section of content.
All right, so I am going to switch back to my code, and this process is really sort of a two-step process, if you will. I am going to scroll down the page, and scrolling down the page I can see that each one of these sections has a heading at the top of the section, and each one of those headings has an id, and that's step number one in order to be able use a fragment identifier. Fragment identifiers allow you to link to an element based on the id of that element. So if it doesn't have an id attribute, you can't jump down to it, if you will. So each one of these sections has an id.
Section 1 has one, Section 2 of course has two. If we go down to Section 3, we could see that it doesn't have one yet, so we need to go ahead and give it one. And I am just going to give it an id attribute of--you probably guessed this--three. Okay, so now that all of our ids are in place, how do we actually link to them? Well, I am going to go back up towards the top of the code and you can see around about line 30 or so I have these paragraphs that say link to Section 1, Section 2, and Section 3. So I am going to go ahead and use an anchor tag, just like we have in the previous exercises.
And once again, the key, really, here is in the href attribute. So in terms of where we want to point this, since we are not pointing it to another page, we are pointing it here, we need to just point it to the id itself. To do that we pass the name of the id in, which in this case is one, but we precede it with the hash symbol. It's actually called an octothorpe, which is fun to say, but that's sort of pound symbol if you will, and then the word one. So, if you can see, right here this is the id of one, and up here in href, it's one, but it's preceded with the hash mark.
I am going to go ahead and close that link tag. And I want to go ahead and do that for each of these guys. So once again, a href. Since we know the rest of these ids, we are just going to go ahead and do two, and of course we are going to go ahead and do three. Now, normally, I would obviously advise you to also put in a title for each of these, but for the moment we are just kind of demonstrating this technique. So it's just saving us a little bit of time. Feel free to add a title attribute to that link if you like.
All right, now I am going to go ahead and save this, go back in the browser, refresh the page, and you can see that now these are active links. And if I click on Link to Section 2, you can see it jumps right down the page to section 2. Hitting the Back button will actually take me back up top, and I could jump down to section 3. Now, you'll notice that for Section 2 shows it shows up at the very top of the page, but for Section 3 it shows up here. The reason is, well, there's no more content. So the page simply can't scroll down as much. Now, I know that the Back button takes me back up top, but most people might not know that.
So what happens is is you jump down and then they have to scroll all the way back up the top. So if you're using fragment identifiers, one of the really nice things to do, in terms of usability, is to give them the ability to jump back up to where they just were, based on how far they have gone. So again, that's fairly easy to do as well. You can see, heading one at the very top has an id of top. So I could go down to the bottom of the page, and let's just say I create a paragraph down here and in the paragraph I say "Back to the top," or back to the top of the page. And I just want to be fairly descriptive with it.
And then surrounding that, I'm going to go ahead and do another a href with pound top, and that needs to be in quotation marks, so don't forget those. Sometimes when you're going fast it's really easy to forget to type a specific character, so make sure you carefully type all of that. All right, so I am going to save that. Now, I'm going back into my browser and refreshing that. There's back to the top. Indeed, it takes me right back up. So I can hit one of those links and now jump back up the top. So it's a nice thing for you to be able to let people navigate around those longer documents by using these fragment identifiers.
Now you've noticed that at the very beginning of this exercise I said we were going to talk about dealing with two files. Well, the same way that you can navigate to a fragment identifier on the same page, you can actually navigate one on a different page. So if I go over to destination, I can see on destination that I have these sections here as well, and each of the sections has an id the same way that my page has ids. And it doesn't really matter what the value of those ids can be, as long as you know what they are. So if I go back to my fragments page, I can see that I have a link here that says Link to Section 2 of the destination.htm page.
So I am just going to go ahead and surround that again with an anchor tag. And the href attribute for this one needs to first point to the page, so we need to resolve the link by going to the page, which is destination.htm. We know that because it's in the same directory, so we don't have to go up or down any directories to do that. The way that you would jump directly to that particular fragment identifier is, without any spaces whatsoever, you go ahead and append the fragment id to the end of the link. So with no space there, I just hit pound and then I am going to type in two.
I will close that and then at the end of this, I want to go ahead and close that link. So now if I save this, go back into my file in the browser, refresh that, now if I click here for the Link to Section 2 of the destination page, notice that not only does it goes to the destination page, but it jumps right to Section 2. So that can be a very fast, a quick, and nice way to send people to specific locations within your site and not make them have to scroll through any of your longer documents. Now, this works with any type of links, so document relative links, even absolute links.
I have open right here in my browser, Introduction to HTML 4, which is a section of the HTML 4.0 Specification. And I notice that in the table of contents here we have Fragment Identifiers. So if I click on that, notice that it jumps right down to that section of the page. So you are kind of seeing these fragment identifiers in the real world so to speak. And you can see, right here here's the URL for it and appended to the URL is that id. So as long as you know what an id is on a page, you can link to it. So I can copy this actually.
I am going to go ahead and copy that URL, come back into my page, and right here where it says Fragment identifiers as identified by the W3C, I can go ahead and use that link. So now if I go ahead and open up another link, paste in that long URL--remember we need the protocol and everything else. This is an absolute link. I close that and then once again don't forget to close the link tag itself. So you can see the syntax here is the same. There is just a long absolute link, and at the end of that there is the Fragment id. Again, no space between them.
Those two are just one long string of characters. All right, so again, if I save this, go back into my browser, refresh this--let's refresh that one more time. There we go. Fragment identifiers is defined by the W3C, when I click on that, it navigates directly to this document and jumps right to the section that I need to go to. So these fragment ids work regardless of whether it's on the same page, on a different page within your site, or even a page that's external to your site. Now, the last thing here that I want to mention is that as helpful as these fragment identifiers can be when planning your site navigation, you do need a thoughtful when you use them.
Often it's not always apparent to the user exactly where they've jumped to within one file or a different file. If they are constantly jumping up and down the page, it can be a little bit confusing. So as you plan your use of fragment identifiers in your site, just make sure that you eliminate any potential confusion that they could cause to your users.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.