Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
HTML/XHTML Link Tutorials
How To Create a Link
The HTML code below shows you how to create a link in an HTML document.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/">this is a text link</a>
</p>
</body>
</html>
The HTML code above creates the text link below.
The "a" immediately following the openning bracket (<) is called the anchor tag and is followed by the href attribute. The href attribute points to the destination of the link, which can be absolute (i.e. http://webdevelopmenttutorials.com/) or relative to the current page (i.e. myfirstpage.html).
For example, if you have another file called "myfirstpage.html" the code for the link would be:
<a href="myfirstpage.html">this is a text link</a>
Also, a link does not have to link to another HTML file, it can link to another file on the web even if the file that is linked to is not a HTML file.
How To Link to Images
The HTML code shows you how to link to an image.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/"><img src="image.jpg" width="80px" height="80px"
alt="some text" /></a>
</p>
</body>
</html>
The code above produces the linked image below.
To link to an image, create a hyperlink (<a href=""></a>) and insert an image (<img src="" width="" height="" alt="" />) within the starting and ending tags of the hyperlink.
How To Open a Link in a New Browser Window
This HTML code below shows you how to open a link in a new web browser window.
To have a link open in a new browser window, add the target attribute with the value _blank to the openning <a> tag.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/" target="_blank"
>this is a text link</a>
</p>
</body>
</html>
The code example below creates the link below.
The target attribute can also be applied to image links.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/" target="_blank">
<img src="tutorial-image-1.jpg" width="80px" height="80px" alt="image link tutorial" />
</a>
</p>
</body>
</html>
Notice that the HTML document above uses the XHTML 1.0 Transitional DTD and not the XHTML 1.0 Strict DTD as recommended, this is because the use of the target attribute will not allow HTML documents to validate as XHTML 1.0 Strict. They can, however, validate as XHTML 1.0 Transitional.
How To Link to Another Part of the Same Page
You can link to another part of the same web page by adding an id attribute to almost any HTML tag, for example <a 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 HTML code below shows you how to link to another part of the same web page in HTML.
<!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>
Click Here to go to the top of this web page.