How to Define Links in HTML Web Page Content

By David Karlins and Doug Sahlin from Building Websites All-in-One For Dummies, 3rd Edition

Links, those clickable objects that make the web what it is, are defined with the HTML <a> element. We complete our survey of the most essential HTML tags with an examination of this vital link in web page design.

The most essential attribute of any <a> element is the href attribute, which defines the link's destination. But <a> elements also must include some content — for example, some text — that displays in a browser and enables the link to work. For example, the following HTML code displays Search Google and links to www.google.com:

<a href="http://www.google.com">Search Google</a>

Note that the entire link, including the display text, is enclosed within <a> and </a> tags. However, there is also a closing > after the actual link and before the displayed text.

Links can have defined targets, like the "blank" parameter used to open a link in a new browser window. To edit the preceding example to open in a new browser window, you would use this code:

<a href="http://www.google.com" target="_blank">Search Google</a>

Absolute and relative links

Links can be absolute or relative:

Absolute links, like the one in the preceding examples, are defined with http:// at the beginning and include the entire URL for the link.
Relative links are used within a website. So, for example, if you were linking to a page called about_us.html, you could use
```
Visit my <a href="about_us.html">About Us </a>page!
```
However, the preceding code would work only if the about_us.html page is in the same folder as the page from which it was linked.

You can also define more complex relative links, using / to chart a path to the folder with the link. For example, to link to a file called slideshow.html in a subfolder (relative to the original page) named presentations, you would use this code:

Visit my <a href="presentations/slideshow.html">Slideshow</a> page!

How links look

When you build a style sheet for your site, you define how links appear in different states: unvisited, visited, active (in the process of being opened), or hovered (hovered over by a mouse cursor). By default, until you create a style sheet, links appear like this in all browsers:

Unvisited links are underlined and blue.
Visited links are underlined and purple.
Active links are underlined and red.

There is no default hover state. And until you create one in a style sheet, hovered links do not change appearance.