HTML XHTML Link Code Tutorials

How to create a hypertext link

The code below 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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href=" http://webdevelopmenttutorials.com/">http://webdevelopmenttutorials.com/</a>
</p>
</body>
</html>

The code above creates the link below.

http://webdevelopmenttutorials.com/

What is a Hypertext Link?
A hypertext link are text, images, or files that take you from one web page to another web page, another part of the same web page or to a specific part of another web page when they are clicked on. The text that comprises a link is called hypertext

The HTML tag that is used to create hypertext links is the openning and closing anchor tag (<a> </a>).

The href="" attribute specifies where the link is pointing to.

Use the text editor below to practice what you have learned.

How to create a link that opens in a new web browser

The code example below shows you how to create a link that opens in a new web browser.

<!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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/" target="_blank">http://webdevelopmenttutorials.com/</a>
</p>
</body>
</html>

The code above creates the link below.

http://webdevelopmenttutorials.com/

The target="" attribute with a value of _blank is used to open web page in a new web browser.

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 code example shows you how to link to another part of the same web page.

<!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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="#part15">Go to part 15</a>
</p>
<p>
Part 1
Web Development Tutorials.com
</p>
<p>
Part 2
Web Development Tutorials.com
</p>
<p>
Part 3
Web Development Tutorials.com
</p>
<p>
Part 4
Web Development Tutorials.com
</p>
<p>
Part 5
Web Development Tutorials.com
</p>
<p>
Part 6
Web Development Tutorials.com
</p>
<p>
Part 7
Web Development Tutorials.com
</p>
<p>
Part 8
Web Development Tutorials.com
</p>
<p>
Part 9
Web Development Tutorials.com
</p>
<p>
Part 10
Web Development Tutorials.com
</p>
<p>
Part 11
Web Development Tutorials.com
</p>
<p>
Part 12
Web Development Tutorials.com
</p>
<p>
Part 13
Web Development Tutorials.com
</p>
<p>
Part 14
Web Development Tutorials.com
</p>
<p>
<a id="part15">Part 15</a>
Web Development Tutorials.com
</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 code example below 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>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="myimage.jpg"> <img border="0" src="image.jpg" width="244" height="33" /></a>
</p>
</body>
</html>

The code above produces the image below which is used as a link.