HTML Tutorial

Chapter 3: Links

This is where your web pages start to get useful. Links allow easy navigation across different web pages. You can link to a page on your web server or you can link to another page on a completely different domain. Here is an example:

As you can see, these links direct you to the HTML University home page. The <a> element is used for creating links. The href attribute is used to point the link to the web page you want. The two links shown above are equivalent because the file index.php is used as the default page for the web server. You probably noticed that the file does not end with .htm or .html. That is because this website uses PHP, or PHP: Hypertext Processor. PHP is a server side scripting language that I would highly recommend learning if you plan on designing any major web sites. Here are the PHP Tutorials on this web site.

You can also link to a page on the same site by leaving out the domain name and just writing the name of the file:

Notice that there is a slash in the first link. The slash tells the browser to look in the root directory of the page. The second link looks in the /html folder, which is the current directory of this web page. The first link is valid, while the second is not, simply because the file is not located in this folder.

Open Links in a New Window

It is possible to open links in a new window simply by adding the target="_blank" attribute.

This can be useful if you need to link to another site, but you still want your own web page to be open in the user's browser.

Use Anchors to Link to Specific Parts of a Web Page

Anchors can be used to link to specific parts of a web page. Here is and example of a link to the top of a page:

Notice that the <h2> tag has the id="top" attribute. This simply creates an anchor called top. When the href="#top" attribute is read by the browser, it looks for the corresponding id and sends the browser to that part of the page.

You can also link to anchors in other pages:

Email Links

You can also have links to email addresses using the mailto protocol. Most often, these links will open a mail handling application such as Outlook or Thunderbird.

The first link will start an email to support@htmluniversity.com while the second link will email support@htmluniversity.com and webmaster@htmluniversity.com.