HTML (XHTML) Link Tutorials

This tutorial teaches you how to create a hyperlink, both text links and image links.

This is an example of a text link: LearnCSSandXHTML.com.

How to Create a Link

The code to create a link is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <a href="http://learncssandxhtml.com/">LearnCSSandXHTML.com</a> </body> </html>

The anchor tag (<a>) is used to define a link. The anchor tag consists of an starting and ending tag, any HTML element (usually text or an image) within these tags form the link.

The "href" attribute of the starting tag and its' value is used to specify the name of the location (usually another web page, another website or an application or script) the link is pointing to.

If you are linking to another website, you must use the full website address as the href value. If you are linking to a web page on your own website, you only need to specify the location of the web page that the link should point to.

How To Open a Link in a New Web Browser Window

To open a link in a new web browser window, you use the "target" attribute with the value of "_blank".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <a href="http://learncssandxhtml.com/" target="_blank">LearnCSSandXHTML.com</a> </body> </html>

The code above creates the link below.

LearnCSSandXHTML.com

How to Use an Image as a Link

The code 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> <body> <a href="http://learncssandxhtml.com/"> <img src="image.jpg" width="90px" height="105px" border="0" alt="some text" /> </a> </body> </html>

The code above creates the image link below.

some text

How To Link to Different Areas Within a Web Page

You can link to different areas within a web page by, either within the same web page or on a different web page. For example, you can have a table of contents at the top of a web page with links to each chapter below. To do this you need to use the id attribue and the pound (#) symbol.

Use the id attribute to make the HTML element to which you want to link to.

<h1 id="chapter1">Chapter 1</h1>

You also need to create a link to the HTML element by using the pound (#) symbol in the link attribute.

<a href="#chapter1">Link to Chapter 1</a>

The code example below shows you how to do this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <p> <a href="#chapter1">Link to Chapter 1</a> </p> <p> This is some content ... </p> <p> This is some content ... </p> <p> This is some content ... </p> <p> This is some content ... </p> <p> This is some content ... </p> <h1 id="chapter1"> Chapter 1 </h1> <p> This is some content ... </p> <p> This is some content ... </p> <p> This is some content ... </p> </body> </html>

The code above would create a page similar to section below.

Link to Chapter 1

This is some content...


This is some content...


This is some content...


This is some content...


This is some content...


This is some content...


This is some content...


Chapter 1

This is some content...


This is some content...


This is some content...


This is some content...


Web Hosting Resources

Free Website Templates