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:
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 Code |
Result |
|
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:
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 Code |
Result |
|
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 Code |
Result |
|
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 Code |
Result |
|
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.
