In addition to linking two 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 sites navigation.
So to explore that concept we're going to use two files, fragments.htm, and
destination.htm, both found in the 05_04 directory.
It's a little bit easier if we preview these in the browser so
you can kind of see what's going on with them.
So this is fragments.htm, you can see that beneath the headline we
have some links that we're going to create here.
We're going to create a link to Section 1, 2 and 3.
Then were going to link to Section 2 of the destination page.
And then finally were going to link out to the HTML specification in the W3C.
Basically, fragment identifiers let us jump to sections on the same page.
So here we have Section 1, if we scroll down a little bit we have Section 2,
and then down a little bit further we have Section 3.
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.
So if we go to the destination.htm, preview that in the browser,
we can see that this one doesn’t have the navigation.
But it does have three different sections, and
we want to be able to navigate to a specific one.
So with that in mind let’s go back to fragments, and
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.
So what we're going to do, is I'm going to scroll down in my content.
You'll notice that at the very top of the page in this h1, it has an ID of top.
And as I scroll through this, I can see that the h3 for
Section 1 has an ID of one, Section 2 has an ID of two, and
you might anticipate that Section 3 would have an ID of three, but it doesn't.
And that's so that we can practice putting it there.
So what you want to do is on the h3 for
Section 3, you want to add an ID attribute.
And we'll just go ahead and give it a value of three, that seems to make sense.
I like making IDs short, so they're easy to remember.
You don't want any white space in them, so no spaces.
And it's best to keep them as short as possible to make them a little bit
easier to remember.
Capitalization matters as well, so I like leaving them either all lowercase or
camel casing them, if I have to.
Okay, so 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.