Basic HTML: Links and Anchors

go to: Structure | Text | Tables | Links | Images |

Try it yourself

Linking with Anchor tag <a>....</a>

Here are some of the most basic code you'll need. Note that I show the html in orange with a courier font for clarity about what you would actually type to use the command. Most commands have additional parameters - consult a good guide for the complete list.

 

Link to my home page (relative link)

<a href="/webclass/index.shtml">Link to my home page</a> (relative link)

Link to Amazon.com (absolute link)

<a href="http://www.amazon.com">Amazon.com</a> (absolute link)

href

pathname to the webpage you're linking to. Note that in the first two examples a relative path is given - this is used for a page on the same site. In the third example the entire http://.... address is given - this must be used for pages NOT on your site.

target

optional - set to "blank" if you want this link to open in a new page. DEPRECATED - should not be used for "Strict" XHTML - the idea is that the user decides if they want to open in new page or not

 

Named Anchors

Named anchors allow you to link to a place within a page rather than always linking to the top of a page. They are frequently used to move further down or up a long page.

On the page that you want to go, mark the anchor with a name attribute, on the page you're linking FROM, use the href attribute with a #anchorname.

1. Mark your Anchor, the place to jump to:
   <a name="anc"></a>This is where I talk about Anchors
2. Then create a link to jump to that place. Notice the "#" preceding the name of the anchor, this is the anchor indicator:
   <a href="#anc">Link to my Anchor discussion</a>

To try this - go to the top of the page (yes, another anchor) and select "Anchors" in the heading. Note this can also be used to jump to an anchor in a different page by placing a filename before the "#" anchor indicator:

a href="basiclinks.shtml#anc">Link to anchor discussion on some pg</a>

Special use of anchors for PDFs

1. Page: You can use the special anchor "page=" followed by a number to get to a specific page of a pdf document. Example:
   <a href="/docs/mypdf.pdf#page=10"> Page 10 of PDF </a>
2. Bookmark: just put the name of the bookmark after the anchor symbol. Don't use caps or spaces in the bookmark name.
   <a href="/docs/mypdf.pdf#section3"> Section 3 of PDF </a>

Email Links

An email link is simply a link <a>... </a> with the href set to mailto:email_address instead of an http address.

 

this example:

Please contact Marie Raney if you have questions.

Is done by this code:

<p>Please <a href="mailto:marie.raney@wwu.edu">contact Marie Raney</a> if you have questions.</p>

Note: Clicking on a link only works if the client machine is set up to a default email service. For instance, if Outlook is the default email service on your personal machine, Outlook will open and allow you to create an email to the given address. However, if you are using, say, Google for your email this requires additional steps (see setting up Google to open from an email link) and if you are using a public machine you cannot generally email from there. In these cases you will want to know the email address so you can email from the application itself. If the user hovers over the email address link on the page, the status bar will show the mailto address. Or you can provide a text version of the email address.

Also: See this article for information on some limited protections available to protect email addresses from spambots.

go to: Structure | Text | Tables | Links | Images |