Remember when we talked about the parts of the URL? This part of the end called the fragment, this starts with the pound sign or the hash sign. That's what this lesson is about. This is about fragments and how to address them and how to create them in the page. So, a fragment is a part of a page. It's a link to a location within the page not necessarily at the top. Normally, when you have a link to a web page, it brings up the page all the way scrolled to the top of the page. Sometimes you might want to link to a page so, we scroll down a ways to a particular part of the page and that's called a fragment.
So, let's look at how this works in a browser. This is a list of Retail Stores and this is from a book that I wrote with my sister Lynda a long time ago called Creative HTML Design, this was one of the examples from that book for this particular technique. And you'll notice that there is a list of states at the top. These are two letter State Abbreviations except for the one in Canada. Then there is a long, long list on the same page, all of these stores, and all of these different states. So, if I go on here and I click on say Illinois, it takes me to the part of the page, you see I've scroll down that is Illinois and these are the places we can buy those rubber stamps that we are talking about in the examples for that book.
Now I click on the top link and this takes me wholly back to the top of the page, so that I can look for maybe another state. So these are fragments, you will notice that the URL now because I clicked on the top link has the pound sign and the word top and when I hover over one of these top links, you'll see down at the bottom there that the URL is the whole URL to the page with the pound sign top at the end of it and when I hover over one of these other links, for the states, you'll see that down at the bottom in the status line, it shows the path to the page with the pound IL at the end of it.
So, those are the fragment links and we are at links to, if I click on this, is called the Named Anchor. This is anchor into the page and its' done with an anchor tag. Let's take a look at how this is done in the HTML. This is the XHTML for the same page and you'll notice it has the list of states here with these normal looking links a href= and then its got the pound sign and the two letter code within the href attribute. And this is how you link to a part of a page, this is called a fragment link and it's a relative URL, so it fills in the rest of the URL from where the page is located that has a link in it and it just sticks this at the end of it in the fragment part.
If there is already fragment part, it replaces it with this and so you get a link just down to that part of the page. If we scroll down here pass this links, you'll see the named anchors. This is a named anchor write here. See it says a name="AK" then the end of the begin tag and then it has the end tag for the anchor. You will notice that I made a separate end tag even though this anchor element is empty, I could have written it using the shortcut notation that we use in other places where we have a tag with no end tag and in modern browsers that would probably work.
At the time, I wrote this page which was a number of years ago, I try that and it didn't work in a lot of the browsers and so today, they probably work better but for this particular usage, I still write it the old way because I know that there may be some browsers out there with a short-hand notation doesn't work. So just to review, this is the named anchor and this is the target of a fragment link and it's an anchor tag with just the name attribute. So it doesn't have the href. It just has the name attribute and that makes it not a link.
It makes it a target for all links. It's a named target. And over here are the fragment links, there are also an anchor tag and a tag but this have an href attribute which makes it into a link and so the content of it, here the AK that will get underlined that will become the part that you click on with your mouse to go to that link. Then here you have the fragment URL, this is a relative URL. It gets tagged on to the end of the URL of the page where the link exist and it has just the fragment part so that it will link you down into that part of the page.
So looking out in the browser again, I can just click on that part, I'll click on AZ over here and that will take us to that part of the page. You see we'll it scrolled down, the scroll bar over there and I click on top and it takes us back to the top of the page. So that's how fragments and named anchors work.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98821 Viewers
61 Video lessons · 86136 Viewers
71 Video lessons · 69994 Viewers
56 Video lessons · 102238 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.
Your file was successfully uploaded.