LinksS2C Home « Links

Links are what help us and visitors to our web sites navigate our way around the various pages that make up the site. This lesson is all about linking to other documents or parts of documents. Whether it is paragraphs on the same page, other pages on the same website or even external links, we see how to do it here.

The Anchor Element

The <a> tag and its' closing </a> tag are used to define an anchor in two ways:


  1. To another part of the current document using the href attribute in conjunction with either the name attribute or id attribute. For our examples we will be using id attribute, which has other benefits which we will discuss in the CSS tutorials.
    • This type of anchor is commonly known as a link
  2. To another document using the href attribute.
    • This type of anchor is commonly known as a hyperlink

Creating A Webpage

Lets create a webpage for our link tag to see what it does!

  1. HTML Editor

    1. Open up your HTML editor or text editor, which in my case is Notepad++.
    2. Open a document if required.
    3. Copy and paste the following code into the document.
    
<!DOCTYPE html>
<!-- Introduction to Semantic Tags -->
<html lang="en">
  <head>
    <title>
      HTML Semantic Tags
    </title>
  </head>
  <body>
    <h2 id="smallpie">Link To Same Page</h2>
    <p>Nothing Beats Chicken pie</p>
    <img src="http://htmldoctor.info/images/chickenpiesmall.webp"
         alt="Chicken Pie" />
    <a href="#bigpie">Big Pie Link</a>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <p>Filler text</p>
    <h2 id="bigpie">Link To same Page</h2>
    <p><strong>Well A Bigger Chicken Pie Might!</strong></p>
    <img src="http://htmldoctor.info/images/chickenpiesmall.webp"
         alt="Same Image But Bigger" 
         width="300" 
         height="200" />
    <a href="#smallpie">Small Pie Link</a>
    <h2>Hyperlink To Another Page</h2>
    <a href="http://htmldoctor.info/htmlbasics/lotsofpies.html">Hyperlink</a>
  </body>
</html>

  2. Saving the document

    Save the file as linktag.html

    save link tag
    Screenshot 1. Saving the linktag.html HTML file.

  3. View Page in Web Browser

    Either navigate to the location you saved the linktag.html file to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.

    After doing either of these you should see a similar webpage in your browser to the following screenshot:

    view link tag
    Screenshot 2. Viewing the linktag.html HTML file.

    Clicking the links next to the pie pictures will move the page to the id identified with the href attribute. If you look at the the URL address in the navigation toolbar bar at the top you will see that #smallpie or #bigpie is appended to the URL depending on which link you clicked.

  4. Viewing The Hyperlink

    Click on the hyperlink anchor at the bottom of the web page and you should see the following.

    view link tag 2

    Hey presto! We have moved to another document, check the URL, it's the same as the one from our HTML.

    Optional Attributes We Used

    We used the id attribute to set a target for our internal links.

    We used the href attribute to create the anchors to point to our internal and external links.

    For a complete list of all the attributes available use the HTML5 Reference section.

Lesson 9 Complete

In this lesson we learned about how to add links to our web pages using the <a> tag and its' optional href and id attributes.

Related Tutorials/Quizzes

HTML5 Intermediate Tutorials - Lesson 5 - More About Links

Links Quiz

What's Next?

In the next lesson we wrap up the HTML5 Basics tutorials.

HTML5 Reference

The <a> anchor tag