Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Linking to page regions

From: Up and Running with HTML

Video: Linking to page regions

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.

Linking to page regions

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.

Show transcript

This video is part of

Image for Up and Running with HTML
Up and Running with HTML

49 video lessons · 26667 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with HTML.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.