Lesson 3: Special Types of Links


In this lesson you create two types of links that make web surfing even more convenient: a jump-to link and an email link. Jump-to links are typically used on very long pages that need links at the top of the page that allow the reader to "jump to" a certain section of the page without scrolling.

This is particularly useful for some users with disabilities, who need to bypass the navigational links on a page. For example, suppose a blind user is accessing a website with dozens of navigational links at the top of every page. Since this user is probably navigating using "screen reader" software, they have to listen to all of these navigational links before they get to the main content of the page. Since this happens on every page of the site, a same-page "skip to main content" link will allow these users to bypass the redundant navigation. These links can also help users who navigate by keyboard rather than mouse (for example, users with mobility impairments), since otherwise they would have to key through all the navigational links before getting to a link in the main body of the document.

In this lesson, you will add two jump-to links to your portfolio home page. One will allow users to skip past the nested list you've created as your site navigation. The other will be a link at the bottom of the document that allows users to quickly return to the top.

You will also add an email link, which if clicked opens a blank, pre-addressed email message for users whose browsers and email software support it. Up to this point your email address on your portfoio is just text. You will make your email address a live link.

Learner Outcomes

At the completion of this exercise:


  1. Open the index.htm file of your portfolio.
  2. Consider how a blind user might experience your page, reading it from top to bottom with synthesized speech. Is there particular content in the middle of the page this user might want to jump directly to, without having to listen to all the content at the top?
  3. For this lesson, assume that your answer to the above question is that the user might want to jump directly to the Required Projects section. Go to the start of that section within your source code. Immediately inside the <h3> tag that marks the start of this section, add a named anchor. The anchor might look like this:

    <a name="MainContent" />

    The text within quotes can be anything - It's just an internal name for the computer to read, and isn't read by the user.

  4. Now that you have an anchor marking the start of the main content of your page (in this case, the Required Projects section), you need to add a link to the top of your document that jumps directly to that content. At the very top of your web page, just inside the <body> tag, add a new paragraph that contains a jump-to link, something like this:

    <p><a href="#MainContent">Skip to main content</a></p>

    Note that the target of this link is the same as the name given the anchor in the previous step (in our example, that's "MainContent"). The only difference is that as a link, it must be preceded by the # symbol.

  5. Save, refresh, and test the new link. You should jump directly to Required Projects. If the page is short, you might not see any visible changes, but know that you have just made your page much easier to navigate for users with disabilities.
  6. Next, locate your email on the page. Change the email address to an email link by coding it as follows:

    <a href="mailto:dhelling@tjhighschool.edu">dhelling@tjhighschool.edu</a>

  7. Save. Refresh your browser and try the link. If your browser and email software support this functionality, a blank email window should pop up with the email address already entered on the To: line. Note that some users' technology won't support this feature. Also, email addresses that are coded this way can be automatically harvested by malicious programs, and will soon thereafter be enundated with spam. For both of these reasons, including email links on websites is no longer a recommended practice, but we've included it here nonetheless as an example of the variety of ways that links can be used on a website.

Resources/Online documents

All done?

Show your instructor your results before starting the next module.