How to link in HTML

Now you have given your page structure, now time to give your website structure.

Creating hyperlinks

Hyperlinks are how you link to another page on your site, or to another site. We use the <a href="URL">link text</a> tag to link. The attribute 'href' defines the destination URL. Between the opening and closing tags, you place the displayed text. eg.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head> 
<title> My first home page title </title> 
</head>  
<body>

<h1>My very first webpage</h1>
<p>Welcome to your first webpage, it now has headings and a little bit of 
structure</p>

<h2>What you have learnt so far</h2>
<p>You have learnt how to make a webpage, format the text and create headings.<br>
It was quite fun =).
You found out how to do this at <a href="http://html-tips.net/">HTML-Tips.net</a>
</p>

</body>
</html>

The text, "HTML-Tips.net" between the opening and closing tags, can be anything at all. The URL "http://html-tips.net/" in the attribute "href" can only be a valid URL.

The two types of URL

There are two types of links, external and internal. The external link is to a different website and internal links are to pages in your own website.

For internal links you may use the full URL or the 'reletive' URL.
The full URL is typed like this: 
<a href="http://html-tips.net/webpage.htmll">Webpage at HTML Tips</a>

The reletive URL is typed like this: 
<a href="webpage.htmll">Webpage at HTML Tips</a>
The reletive URL can only be used if your webpage with the hyperlink is in the same directory(folder) as the webpage being linked to.

External links must have the full URL. eg. http://html-tips.net


Tips:
  • The href="" attribute is used to specify the URL
  • Place the displayed text between opening and closing tags
  • You may open a link in a new window with the target="_blank" attribute - This is not advised to do, because it is annoying for the user
  • For more information on 'a' tag visit: html A tag (anchor tag)


In the next section of this beginner HTML tutorial you will learn how to create lists.
Next page: HTML lists
Back: Beginner HTML tutorial: Index