HTML Links

This page demonstrates how to create HTML links. Otherwise known as hyperlinks, HTML links are one of the most common elements on the web. All websites have HTML links. If a website doesn't have any HTML links, perhaps its hyperlinks have been created using JavaScript or similar. In any case, if a website doesn't have any hyperlinks, then it's not really a website - it's a web page.

Create a Basic HTML Link

HTML links are created using the HTML <a> tag. The <a> tag stands for "anchor" tag. To create a link, you need to fill out the href attribute with the destination URL (i.e. the address of the web page that you want the link to point to). You also need to specify the text you'd like to be hyperlinked, and close the tag.

Example:

Source CodeResult

Online HTML editor

As you can see, the above HTML hyperlink goes to http://www.html.am/html-editors/online-html-editor.cfm (this is specified with the href attribute). The "anchor text" is "online HTML editor". This is the text that will be linked.

HTML Links within a Paragraph

You can place a link anywhere within your text. Like this:

Source CodeResult

If you want to build a blog, check out this blog builder. Includes heaps of free extras too!

HTML Links - Open in New Window

To open your link in a new window, use target="_blank" within the anchor tag. Example:

Source CodeResult

Register a domain name now! - Includes over $183 of free extras!

HTML Links - Named Anchors

You can use the anchor tag to create a "named anchor". A named anchor is a part of an HTML document that has a name which has been defined using an anchor tag. This named anchor allows you to create an HTML link elsewhere in the document, that jumps to the named anchor.

An example of named anchors is a long page with a table of contents at the top. When the user clicks on a link within the table of contents, the browser jumps down to the part of the page that has the named anchor for that link.

A named anchor consists of two parts: the named anchor, and the link (which targets the named anchor). Well, technically, it only consists of one part (the named anchor), but it's not much use unless you do something with that name.

Here's an example of a named anchor (and a link):

Source CodeResult

Go to my named anchor

Here's some filler text - just for the sake of demonstrating that you can click on the above link, and the browser will jump all the way down to our named anchor, which sits below this text...

I am proud to be a NAMED ANCHOR!

Empty Named Anchors

You can also create empty named anchors. These are simply named anchors with nothing in between the anchor tags. Like this:

Source CodeResult

Go to empty named anchor

Here's some filler text - just for the sake of demonstrating that you can click on the above link, and the browser will jump all the way down to our named anchor, which sits below this text...

I am proud to have an EMPTY named anchor sitting above me!

HTML Links - Named Windows

You can make a link open in a target window. That is, if there are multiple windows or frames open, you can choose which window/frame to open the link in.

For example, you might have many links that open in a different window. Instead of using target="_blank" (which would open a new window for each link), you could use target="{window name}" (where {window name} is the name that you choose to give to a window).

Below is an example. The first time you click on a link, it will open in a new window. Then, each time you click on a subsequent link, it will reload that window with the new URL. This is because we give the window a name in our HTML link code.

Source CodeResult

Great Website Tutorials

HTML Links with Frames

Frames and iFrames work the same as above. By naming a frame or iFrame, you can target that frame in your HTML links.

Here's an example of targeting an iFrame with HTML links. In this example, we link to four different pages, each of which is different color.

Source CodeResult