HTML XHTML Link Code Tutorial
Hypertext links are the words (or images) that take you from one web page to another or to another part of the same web page when they are clicked on.
The HTML tag that is used to create hypertext links is the anchor tag (<a> </a>).
Two examples of the code used to make a hypertext link is:
<a href="http://csshtmltutorial.com/">csshtmltutorial.com</a>
<a href="csshtmltutorial-introductiontohtml.php">introduction to HTML</a>
The place where you are taken to when you click on the link is defined in the href attribute of the tag. The link can be absolute like the top link example (http://csshtmltutorial.com/) or it can be relative to the current web page (csshtmltutorial-introductiontohtml.php).
An HTML link can to any other file that is on the world wide web. It can link to another .html file, a .php file, a PDF file, an image, a sound file, and more.
The bottom HTML code example shows you how to create a link.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<a href="http://csshtmltutorial.com/">csshtmltutorial.com</a>
</body>
</html>
The HTML code above makes the following link: csshtmltutorial.com
Make an HTML hypertext link by entering the HTML code in the textbox below:
How to open a link in web browser window
When a linked web page is opened in a new web browser window, the original web page is left in its original web browser window. This is done using the "target" attribute with the value of "_blank". The example below shows you how to do this.
note: notice the "_" in front of the attribute value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<p<
<a href="http://csshtmltutorial.com/" target="_blank" >csshtmltutorial.com</a>
</p>
</body>
</html>
The above HTML code makes the following link which will open in a new web browser window when
it is clicked on:
csshtmltutorial.com
How to link to another part of the same web page
You can link to another part of the same web page by adding an id attribute to almost any HTML tag, for example <p id="gohere">this is where you end up</p>, and then link to it like this <a href="#gohere">you click here</a>. Clicking on the link will take you to the HTML element with that id.
The below HTML code example shows you how to link to another part of the same web page.
The link below the example will take you to a web page with a working example of this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<p>
<a href="#part15">Go to part 15</a>
</p>
<p>
Part 1
css tutorial and html tutorial
</p>
<p>
Part 2
css tutorial and html tutorial
</p>
<p>
Part 3
css tutorial and html tutorial
</p>
<p>
Part 4
css tutorial and html tutorial
</p>
<p>
Part 5
css tutorial and html tutorial
</p>
<p>
Part 6
css tutorial and html tutorial
</p>
<p>
Part 7
css tutorial and html tutorial
</p>
<p>
Part 8
css tutorial and html tutorial
</p>
<p>
Part 9
css tutorial and html tutorial
</p>
<p>
Part 10
css tutorial and html tutorial
</p>
<p>
Part 11
css tutorial and html tutorial
</p>
<p>
Part 12
css tutorial and html tutorial
</p>
<p>
Part 13
css tutorial and html tutorial
</p>
<p>
Part 14
css tutorial and html tutorial
</p>
<p>
<a id="part15">Part 15</a>
css tutorial and html tutorial
</p>
</body>
</html>
This link will take you a working example of linking within the same web page
How to use an image as a link
The below HTML code example shows you how to use an image as a link.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<p>
<a href="myimage.jpg">
<img border="0" src="csshtmltutorial-cssimage.jpg" width="63" height="30" /></a>
</p>
</body>
</html>
The above HTML code produces the following image which is used as a link.
How to link to make a mail-to message
You can link to an e-mail using HTML. In order for the link to work, the user must have an e-mail program installed.
The below HTML code example shows you how to link to an e-mail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
</head>
<body>
<p>
This is a mail link:
<a href="mailto:me@csshtmltutorial.com?subject=Hello%20World">
send me an e-mail</a>
</p>
<p>
note: the characters "%20" in the subject value line represent a character space.
</p>
</body>
</html>
Enter the HTML code into the textbox below to made a mail-to link.