Links and the Anchor HTML Tag

This is a tutorial from the HTML Fundamentals Class I taught at Clark College in Summer 2012. It applies to HTML and WordPress.

There are five basic forms of links on a web page.

1. External Links
2. Internal Links
3. Jump Links
4. Image/Multimedia Links
5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>

1. a: The HTML Anchor tag.
2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

A link has five states:

1. Link – Unvisited link – a:link
2. Active – The user clicked the link – a:active
3. Hover – The user hovers their mouse over the link – a:hover
4. Visited – The user visited the link – a:visited
5. Focus – Visible when the user uses the Tab key to navigate the web page – a:focus

For the most part, most web designs only include the first four states.

Each of these states, called pseudo-classes, may be styled with CSS for the following:

• Underline – text-decoration: underline;
• Color – color: #ff123;
• Background – background-color: #d0d0d0;
• Border – border-bottom: 2px solid #a979c3;
• Font-weight – font-weight:normal;
• Margins and Padding – margin: 10px; padding: 5px; (used when links are design elements not article content)

An example of styling links in a CSS stylesheet might be:

a:link { color:#CC33FF; }
a:active { color:#FF33CC; border: 1px dashed #A3A3A3; }
a:hover { color:#B3002D; text-decoration: underline; }
a:visited { color:#003CF0; }

In the past, link targets were acceptable, the process of adding code to a link to force its behavior upon the user. This technique is now deprecated (not used). For history, however, the four link targets were:

• _blank – Opened link in a new window or tab
  <a title="Link" href="http://example.com/" target="_blank">link
• _self – Loaded the link in the current page (window or tab)
  <a title="Link" href="http://example.com/" target="_self">link
• _parent – Loaded the page into a parent frame (a deprecated division of the page)
  <a title="Link" href="http://example.com/" target="_parent">link
• _top – Loaded the page into the current window or tab, removing all frames (page divisions)
  <a title="Link" href="http://example.com/" target="_top">link

While there is still some debate about the blank target, it is a deprecated form, breaks web accessibility standards (and laws in some countries), and takes control away from the user. It should not be used unless absolutely necessary. A necessary usage would be for a web page tutorial with the demo forced open in a tab or window so the user could compare the two pieces of information. A warning is required as noted under External Links.

Things you should know about styling links:

• By default, links are blue and underlined. Links should be the only thing underlined on a web page. Text should not be underlined or blue as users expect these to be links.
• It is required that all links to the root domain of a web address, such as http://example.com, end with a forward slash such as http://example.com/. This does not apply to a web page address as the domain address is already closed, such as http://example.com/article.html.
• While it is considered acceptable to link to a single word, consider two to six words (not counting articles like to, it, they, etc.) in the anchor text to help the user find the link.
• Keep link styles simple and clean to improve readability of text.
• Keep link styles consistent throughout the website to help visitors recognize a link in your design.
• When using a link in a sentence, make sure to exclude punctuation.
• Link dumps are the equivalent of pooping on your web page. When you leave a link such as http://www.useit.com/alertbox/20040510.html on a web page, it is ugly and hard to read. A properly formed HTML link must be in the form of linked text such as this article, The Definitive Guide To Styling Web Links from Smashing Magazine.
• Tests should be done with colors to ensure the link colors have enough color contrast against the background colors to be clearly visible.
• Take care in adding padding, margins, backgrounds, and other design elements to links in the different states. If padding is added to the hover state but not the link state, the link will shift and move on the page. The same applies to making the hover state bold when the link is not. Keep the styles consistent through the various states.
• It is acceptable to use a bottom border or the underline text-decoration to create the underline on a link.
• It is acceptable that the underline appears only when the user hovers over the link, not in the link state.
• If a link design element is not specified, most browsers will add design defaults such as a border or underline.
• Links can be anywhere, not just in the content. They are in link lists, menus, navigation, headers, footers, images, call-to-action buttons – anywhere. Design them accordingly with the pseudo classes.

For more information on links, see the Link References and Resources section at the bottom of this document.

Return to the top ↑

External Links

External links are links to other websites and web pages.

While most people assume that a link inside the content area of a web page links to an external link, it is not always clear. Some web page designs incorporate a visual clue that the link leaves the site, giving users a choice to keep reading or visiting the site and returning.

Examples of visual clues of an external link include a link like this (external site), or a visual graphic↑ created as an HTML Character Entity or background image.

Links to files must feature words or symbols to denote that the link does not behave normally but is actually a download link such as our class syllabus (PDF).

As noted in the introduction, link targets are deprecated, therefore not an acceptable form in this class.

Return to the top ↑

Internal Links

Internal links, commonly called intrasite links, are links that link to web pages within the same site domain.

In the past, it was acceptable to use a link format called relative links. Absolute links are written with the full http:// URL structure. Relative links are written in “relationship” to the current location of the web page in relationship to the directories above and below it.

This technique hearkens back to traditional static web page structures when web pages were sorted into folders and shortcuts were made to the URL path. Here are some examples:

• http://example.com/ – Absolute link to the root domain name.
• http://example.com/web/article.html – Absolute link to the article from the root domain name and the “web” subdirectory or subfolder.
• /web/article.html – Relative link to the “article” web page below the “web” directory.
• /web/services/article.html – Relative link from the current web page to the “article” web page under the “services” subdirectory of “web.”
• article.html – Relative link to the “article” web page in the same directory as the web page.
• ../article.html – Relative link to a directory one up from where the current web page resides.
• ../web/article.html – Relative link to a directory one up from where the current web page resides and one down (the “web” directory).
• ../../article.html – Relative link two directories up from where the current web page resides.

As you can see, this structure is hard to read and harder to remember. With the arrival of dynamic websites where programming replaces static old fashioned static HTML directories, most internal links are now absolute. We will use absolute links in the class unless specifically assigned.

Internal Links to Downloadable Files

In addition to linking web pages within a website, internal links are used to link to files for downloading. All linked files must have a recognizable file extension such as jpg, gif, doc, pdf, etc. File names should not have periods, commas, slashes, or other punctuation. They may have dashes, underlines, tildes (squiggles ~), and spaces (though spaces are considered bad form for older browsers).

The format for linking to a downloadable file is the same as creating a web page links.

<a title="Link to article title." href="http://example.com/story.pdf">Anchor Text (PDF)</a>

Per the examples in External Links, downloadable file links must have an indication that the link will behave differently from a typical web page link.

Return to the top ↑

Jump Links

Jump Links are links that jump the user within a document or to a specific place within that document. This document features many jump links such as a jump link to the External Links section of the document.

The format for a jump link is as follows:

<a href="#external" title="Jump to External Link section.">External Links</a>

Note that the link is a relative link with the # (pound or number sign) as the “address” of the link followed by the identifier.

There are two ways to create a jump link within a document. For the same above link example, you could use either of the following two examples as the destination for that link.

The Anchor HTML tag has a property called name, designating the name of a position or element on the page. Rarely used but not yet deprecated, it is usually placed on a line above where you wish the user to land.

<a name="external"></a>

Current HTML versions honor the ID property of any HTML tag as a jump link “name” position, the preferred method for creating a jump link destination.

<h2 id="external">External Links</h2>

The anchor name (aka ID) must have a value that is unique and not repeated elsewhere on the page, and must start with a letter of the alphabet, not a number. It may contain a number such as header-2 or header_2, but it cannot have a space in the name.

A jump link to a link on another web page marked with the property ID would look like this:

<a href="http://example.com/article.html#external" title="Jump to External Link section on article.">External Links</a>

Another common link jump feature is to jump back to the top of the current web page, a welcome jump link on especially long web pages with table of contents at the top or some other key information. Using either the Anchor HTML name destination or ID property is acceptable, but using the ID is preferred such as this jump to the top link where you will find a table of contents list featuring jump links to the different sections of this document. Check the source code to see how those are formatted.

Return to the top ↑

Image and Multimedia Links

Images feature a “link” to their destination on the web server or web to where they are stored. They can also feature a link around them to click to a larger view of the image or to a destination represented by the image. Let’s start with the latter.

<a href="http://example.com/ballarticle.html" title="Article about red balls.">Image may be NSFW.
Clik here to view.

The image is wrapped by an Anchor tag. If the user clicks on the image, they would open the article about red balls.

The image HTML tag also contains a link to the image, set by <img src>, representing image source.

Video, audio, and other multimedia also contains links within their HTML tags such as <object and <video>. We will be discussing these later when we work on embedding multimedia.

Return to the top ↑

Email Links

Email links are links to email addresses which trigger the default email program when clicked.

<a href="mailto:lorelleonwordpress@gmail.com" title="Email Lorelle.">Email me</a>

The mailto: replaces http:// as the protocol for the email address.

Unfortunately, placing your email address on a web page risks exposure to email scrapers and harvesters, bots that search the web collecting email addresses for spam (bad) purposes such as junk email. It is traditional that the email address is obfuscated, hidden in plain sight.

Once obfuscated, the above code would look like this:

<a href="mailto:lorelleonwordpress@gmail.com" title="Email Lorelle.">Email me</a>

These are HTML Character Entities, code that the web browser recognizes and converts into readable context, in this case, English. See Email Obfuscation Tools and Scripts on Lorelle Teaches WordPress and More for details and examples of obfuscation tools.

Return to the top ↑

Link References and Resources

• Links in HTML documents – W3C
• The Definitive Guide To Styling Web Links | Smashing Magazine
• Designing Hyperlinks: Tips and Best Practices
• Styling weblinks with CSS – t3node
• Visualizing Links: 7 Design Guidelines (Jakob Nielsen’s Alertbox)
• learn web standards – styling links
• Absolute vs. Relative Paths/Links | CoffeeCup Software
• Relative URLs – WebReference

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.