How to Include Links in Your HTML5 Web Page

The H in HTML stands for hypertext, which is a fancy term for links, which give life to the web pages you build. It's very easy to add a link — or even two — to a web page, as in this screen shot:


The code for this page, including the links, is reproduced here:

<html lang = "en">
  <meta charset = "UTF-8" />
    <h1>Link Demo</h1>
    <h2>Relative reference to an image</h2>
      This paragraph has a link to a 
      <a href = "monkey.png">monkey picture.</a>
    <h2>Absolute reference to a web page</h2>
      This paragraph contains a link to 
      <a href = "">
        Andy's main site.

Links are more than words on a screen. When the user clicks the text, the browser loads a different page on the Internet.

Building links into your pages is quite straightforward:

  1. Begin with an ordinary page.

    Links are usually embedded directly into your page. Links cannot stand on their own, but are usually part of some other block-level element like a paragraph.

  2. Use the <a> tag to indicate a link.

    The a stands for anchor. (Of course, it should be the link tag, but that term is used for something else in HTML.)

  3. Use the href attribute to describe where the link will go.

    Most links have an href (hypertext reference) attribute, which describes what page should load when the user clicks the link. The href can be a relative or absolute address:

    • Relative: The href can be a simple filename, and if you're linking to a file in the same directory as the web page you're writing, you can simply indicate the filename. This is s a relative reference because the browser assumes the linked file is in the current directory of the current server.

    • Absolute: The href can also be a complete web address, which is called an absolute reference because it explains how to find the file regardless of the location of the current page. To point to pages or files on somebody else's server, you must use absolute references.

  4. Place the visible text between the <a> and </a> tags.

    Any text between these tags is displayed on the screen in a format that indicates a link. The default format is blue underlined text.

Most links point to websites, but you can also link anything the browser can read, including images.

blog comments powered by Disqus