CreateaFreeWebsite

 with Responsive Web Design

🔗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 (Would be nice if this worked. For now if one link is clicked all appear as visited.)
You can thank the asinine world of Security thinkers for this!
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>


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

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

 

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="http://www.destination.com/">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}

Title Attribute

Text added using the title attribute will display when the link is hovered.

It is especially effective when using images as hyperlinks. Hover your mouse pointer over each example.

Top    👆    Top

The Title Attribute Code

Just Text

<a href="#heading" title ="Go To Top of Page">Top</a>

Using Image

<p><a href="#heading" style="text-decoration:none" title="Go To Top of Page"><span style="font-size :40px; text-shadow: 1px 1px 2px #000">&#128070;</span></a></p>

Create a Top Button with CSS: Click on it to See How

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="images/309.jpg" download="309.jpg">Download Image</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"

📌 With today's designs it's probably best not to use it for interior navigation because it makes the Back Button on the browser unusable.

The default is target="_top which opens in the top of the current window.

Other choices are _self and _parent.

Rollover Effect

 

👉See also: Creating Buttons with CSS

Free Tools and Resources

Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.

 

ThingsThingsHave you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!

 

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!