Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In HTML it is possible to link to a part of a page, causing the browser to scroll to that point. Let's open up fragments.html. We're not making a working copy because we're not really going to edit this. This is a very large document. It is about 207 Kbytes, and it has 4798-- or 99, if you count the blank line at the end--lines of HTML in it. So it is a very large file. And when we open it in the browser here, you notice that it's just a very long file.
There is a lot of stuff in there. What this is, it's a list of countries and cities with their populations inside of the countries. Now I got this out of a public domain database and I wrote a little script that generated the HTML. I did not actually type all these 4,700 and some odd lines of HTML. So how do you navigate around a file that's this big? Well, the way you do this is with fragments. Remember we talked about URLs, there is a piece of the URL at the end that's introduced by a hash mark or a pound sign or a number sign, like this, and that's actually a link.
You notice it's in the a link tag to a place within a file. And at the other end of that--we scroll down here to one of our cities-- you see this id element; that is the target. Of course id is also used as a selector in CSS, so this is a convenient double use for this. In earlier versions of HTML the a tag would be used. It would do something like this, a name="BOL." And the target would be to that.
But it was an inconvenient use of a. It was an overloading of a. It was such a very different use of it that it didn't make a lot of sense. And we already have this other unique identifier available for CSS called id, so it made a lot of sense to use that instead. So in HTML5, that other use of the a tag is obsolete. It's no longer allowed. Well, of course it still works because browsers are very liberal in what they accept, but the use of the id attribute is standardized.
So let's see how this works. We'll come over here in the browser and we'll just click on one of these. Let's say Canada. When I click on Canada you notice it's scrolled down partway through the file, and it takes me to the Canada id. You notice my URL now has this entire URL. Let's find Canada here. This actually qualifies as a relative URL. So the browser is going to take the rest of the URL and tag this on the end of it and that's what's it done up here.
The URL now reads the whole file URL to the location of the file with #CAN at the end of it. And if we do a find in here for CAN in quotes, so it can find it, there is our h1 id=CAN, and that's where we found it in the file. Now notice that there is this link to top here and it's the same thing: a href="#top." And that will take us, if we go back up to the beginning of the file, you'll notice that the first thing here, this outer div, has an id of top. And it's the very first thing in the file, so when I click on that, it takes us all the way up to the top of the file you notice that our fragment analysis has #top.
So scrolling around in this file would be really difficult, to put it mildly. I mean, this is a huge file. If I was going to try and find something in particular, well, I'd have to use a search for it really. Fragments make this possible. It makes it doable. It makes it easy. Now I'm not recommending that you put 200K files out on the web, but sometimes there is a legitimate need to do something like that, or even a file with a hundred lines in it, using fragments makes it a lot easier to navigate. And if you pay attention to the URLs that you see, I'm sure you'll find some sites actually using this feature.
So fragments are used for linking to a section of a page. In this example, I've showed you a very large file that becomes navigable only by using the fragments. This is a common usage for this technique.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96615 Viewers
56 Video lessons · 110335 Viewers
71 Video lessons · 79163 Viewers
131 Video lessons · 37953 Viewers
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.