HTML Anchor Element ('A' Tag)

This article is a quick review of common and handy ways to use the 'A' tag. Some may be new to you.

To describe everything related to an 'A' tag would require a huge article. One has already been written, the anchor element article by the Mozilla people.

(If you landed here when you really were looking for how to link without using the 'A' tag, the information you want may be at the Linking Without an 'A' Tag article.)

While it can link to various types of destinations, the 'A' tag is mostly used for linking to other web pages or to other locations on the same web page.

For linking to other web pages, you need to know their URL. For other locations on the same web page, you'll need to know the id value of the HTML element being linked to.

The href is a required attribute. It tells the 'A' tag where to link to.

Here is how to link an 'A' tag to a URL.

<a href="http://example.com/the-URL-of-a-web-page.html">Another web page</a>

The text (or image) between the <a...> tag and the ending </a> tag is called anchor text (or anchor image). In the above illustration, the anchor text is Another web page.

To link to a location on the same page, the href value begins with # and ends with the id value of the HTML element being linked to.

Here is an illustration. First, an element with an id value and then the 'A' tag link.

<div id="location-to-link-to">[stuff here]</a>

<a href="#location-to-link-to">Scroll to 'stuff'</a>

Assuming the above code is on the same page, when the Scroll to 'stuff' link is tapped then the browser scrolls until the top of the div with id="location-to-link-to" is at the top of the browser's screen. If the browser cannot scroll to that location, it will scroll as close as it can.

Below is code for linking places or things that are not web pages. You can probably guess what the code does. Nevertheless, I'll mention them below the code box.

<a href="tel:212-555-1987">Call me!</a>
<a href="mailto:name@example.com">Email me!</a>
<a href="sms:222-555-7819">Text me!</a>
<a href="javascript:alert('hello')">Run this JavaScript</a>

Yes, you are right:

• The first one dials your phone when the browser is set up to do so. Otherwise, it asks for information related to your phone.

• The second one launches your email software, when it can, with the address pre-filled in. If it cannot launch your email software, it will ask for information.

• The third one either sends a text message or asks for information related to sending a text.

• The fourth one runs the JavaScript code that follows javascript:

All fun stuff.

The HTML 'A' tag is, in essence, a linking element. The above describes some of the most common ways it is used.

(This content first appeared in Possibilities newsletter.)

Will Bontrager