Lesson 3: Special Types of Links

Overview

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, where users can benefit from having a link at the top of the page that allows them 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 user who is physically unable to use a mouse is trying to access a link on a website, but that link is in the main content of the page and there are dozens of navigational links above it. Using the tab key, it will take forever for this user to get to the link they're wanting to select. As the web designer, you can help by adding a same-page "skip to main content" link at the top of the page that jumps directly to the main content, bypassing the navigation menu.

In this lesson, you will add a skip navigation link to your portfolio home page, thereby allowing users to skip directly to the main content of your website.

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:

you will be able to set up a same-page link that allows users to skip to the main content of a web page.
you will be able to add an email link to a web page.

Activities

Return to the index.html file of your portfolio.
Find the <main> element that you used to wrap the main content of your page in an earlier lesson. Add an id attribute to that element. An id is a unique identifier for a specific element on a web page. It enables you to easily access that specific element so you can stylize it with CSS or manipulate it with Javascript. You can also link to any element with an id attribute. An id can be any text you like, but it's best to assign text that describes the function of the element. Since this particular element contains the main content of the page, we'll give it an id of "main". Here's how that should look like when you're finished:
```
  	<main id="main">
  	
```
Now that you have an id attribute marking the start of the main content, you can 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 div element that contains a same-page link, like this:
```
    <div>
      <a href="#main">Skip to main content</a>
    </div>
		
```
Save, refresh, and test the new link. You should jump directly to the main content. 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.
Next, locate your email on the page. Change the email address to an email link by coding it as follows:
```
    <a href="mailto:judy@ohs.edu">judy@ohs.edu</a>
	
```
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 inundated 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 because there are still lots of these links out there on the Web, it's good to understand them.

Resources/Online documents

All done?

Show your instructor your results before starting the next module.