In HTML, links are made by using the anchor tag <a href="#"> </a>. The href is the URL, and between the opening and closing tag is where your text goes, like this:
Links can be customized by using CSS. You can set link styles for hover, visited, and active. You will learn about these in the CSS tutorial.
The target attribute tells the browser whether to open the link in a new window or a new tab:
<a href="http://www.thecodingguys.net" target="_blank">Link </a>
_blank = Opens in a new tab
_parent = Opens in a new window
This is client side and the browser may not open the links in a new tab or window; it is entirely up to the user.
You can use the title attribute to give information about the link. For example, hover over this link Main Page and you should see the title (tool tip) appear. Here is how you use the title attribute:
<a href="http://www.thecodingguys.net" title="Go to main page" target="_blank">Link </a>
The rel attribute specifies the link's relationship.
<a href="http://www.thecodingguys.net/copyright" title="Go to main page" rel="copyright" target="_blank">Link </a>
This link is linked to the copyright page. The rel attribute can accept these values:
|next||Next document in sequence of documents|
|prev||Previous document in sequence of documents|
|start||The starting point of a collection of documents|
|copyright||The copyright page for current document|
|alternate||Different versions for the current document (e..g multiple languages)|
A mail to link is an email link, and it supports some arguments in the href attribute. By default when you click on a mail to link your default email program should open (try clicking the email icon in the footer).
<a href="mailto:?subject=The subject&body=The message>Email Me</a>
- mailto = the email URI
- subject = The topic
- body = The message
These are optional; you can just keep the mailto argument if desired.
Page anchors jump to a certain part on a page or another page. To make a page anchor, that section needs an ID or name.
<a name="mailtosection">Mail Me</a>
This is a bookmark; to link to the bookmark you use the following code:
<a href="#mailtosection">Email Me</a>
If you want to link from a different page just write the URL address in the href, and then at the end put #mailtosection like this:
Absolute vs Relative Links
Absolute links provide all the information for the link; for example http://www.thecodingguys.net/tutorials/html/html-links is an absolute link. A relative link provides the page name which resides in the same directory and same domain. Relative links are usually better because they do not break when the domain name changes. For example, the links on the left sidebar are all relative, such as <a href="html-link">. This allows us to navigate this site on localhost as well as the live site here. Absolute links would break up if you moved the domain. If you are going to link to a document or file on the same domain name, use relative links; otherwise use absolute links.