The Anchor Tag and Hyperlinks

What Are Hyperlinks?

Hyperlinks are the clickable, underlined words you find on a web document. They are created using the anchor tag.

Clicking on these words will send you to a predefined location on the same document, to another page on the same server or to a location on another server.

The destination of the hyperlink is defined using the <a></a>
anchor tag with the href attribute.

<a href="url">Underlined Text</a>

Other attributes: target, title, download

Hyperlinks have default colors which can be changed using your style sheet.
An unvisited link is blue
A visited link is purple
An active link is red

The anchor tag requires a closing tag. </a>

The anchor tag can be used as a standalone tag, or can be set in paragraphs or lists.
<p><a href="url">Going somewhere</a></p>

<li><a href="url">Going somewhere</a></li>
<li><a href="url">Going somewhere</a></li>

Lists are often used with hyperlinks to create drop down menus.

Easy Linking

HTMLPad 2014 - HTML 5 code editorHTMLPad makes coding EASY!

If you just like to type, GO FOR IT.

If you're a little lazy like me, you'd probably rather point and click than type something like: <a href="features.html" target="_blank">HTMLPad Features</a>

I'd rather highlight the text and click the anchor icon hyperlink icon.

Hyperlink toolThen, browse to the page you want and fill in the rest of your preferred options by clicking.

Try it free for 30 days.

Download Free Trial

Or find out more about HTMLPad 2014 Personal

Who needs it? Only serious web authors!

Grab it Today and get our Exclusive Discount!



Location on Same Site

To link to another page on the same site the code would be:

<a href="samesite.htm">Another Page</a>

To link to another site:

Note: http:// is required.
<a href="">Another Site</a>

Removing the Underline

The default underline can be removed from the hyperlink using style sheets. Though, you should not remove the underline from links within your document body. This practice is acceptable when creating menus.

The code:
a { text-decoration : none}

Download Attribute

In the old days and many still today if we wanted a special file like a pdf, zip, exe, etc. to be available for download by our user we would simply use the url with the path to the file. The person downloading the file would get a dialogue box that asked them what they wanted to do with the file.

Today you can specify that the file is available for download and the user agent(browser) will follow normal protocol procedures for downloading the file.

The url looks the same in the link but we add the download attribute as shown:
<a href="templates/" download="">Download Template</a>

Note that the href specifies the path to the file and the download attribute requires only the file name.

Target Attribute

Probably the most used attribute of the anchor tag beside the href is the target attribute.

You can tell the new page to open in a fresh browser window by using target="_blank"

Other choices are _self and _parent.

You can also, set an iframe on the page, give it a unique name and send the web page to it.

Click the Click This link on the next line and watch as one of our other sites opens in the iframe window.

Click This


Target Attribute Demo


Here's the simple code we used:
<p><a href="" target="bottompage">Click This</a></p>

<iframe name="bottompage" style="width: 95%; height: 400px; box-shadow: 4px 4px 8px #202020">

Rollover Effect

You've seen hyperlinks that change colors when the mouse is placed over them. We use this effect on our links. The code for assigning colors to the different states of the hyperlink is shown below. It can be placed in a style sheet in the head section of your document. Change the specified colors to produce your own version of rollovers.

a {color :#000000}
a:visted{color :#BFBFBF }
a:hover{color :#DFDFDF }


See also: Creating Buttons with CSS