Software, your way.
burger menu icon
WillMaster

WillMasterBlog > HTML

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Plain Text To HTML Converter

Here is a function to convert plain text from a form textarea field into HTML for publishing on a web page or in an email.

HTML for Meme Making

No fancy image creation software is needed to make memes. An easy way is to create a web page with text over an image or color background and screenshot it.

Image Color Saturation

The CSS filter:saturate() declaration can be used to lesson color saturation and to intensify color saturation of images.

PDF to Text Conversion

If you can use a PDF to text converter and your website is on a Linux machine, this one should do you well.

Text Emphasis

When your writing can be improved with the correct emphasis, this CSS may be used.

Dropdown Links

I used to see many dropdown links during the earlier part of my internet experience.

On-Page Editing

Edit something on a web page and have it saved for display whenever the page is reloaded.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC