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.

Partners

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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>


<a href="https://webdevelopmenttutorials.com/">this is a text link</a>


</body>
</html>

The HTML code above creates the text link below.

this is a text link

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. https://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:

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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>

<a href="https://webdevelopmenttutorials.com/"><img src="image.jpg" width="80px" height="80px" alt="some text" /></a>

</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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://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>


<a href="https://webdevelopmenttutorials.com/" target="_blank" >this is a text link</a>


</body>
</html>

The code example below creates the link below.

WebDevelopmentTutorials.com

The target attribute can also be applied to image links.

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, 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Web Development Tutorials.com</title>
</head>
<body>

<a href="#part15">Go to part 15</a>


Part 1
Web Development Tutorials.com


Part 2
Web Development Tutorials.com


Part 3
Web Development Tutorials.com


Part 4
Web Development Tutorials.com


Part 5
Web Development Tutorials.com


Part 6
Web Development Tutorials.com


Part 7
Web Development Tutorials.com


Part 8
Web Development Tutorials.com


Part 9
Web Development Tutorials.com


Part 10
Web Development Tutorials.com


Part 11
Web Development Tutorials.com


Part 12
Web Development Tutorials.com


Part 13
Web Development Tutorials.com


Part 14
Web Development Tutorials.com


<a id="part15">Part 15</a>
Web Development Tutorials.com

</body>
</html>

Click Here to go to the top of this web page.