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
- 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
- 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!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- 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>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
linktag.htmlfile 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:
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.
Viewing The Hyperlink
Click on the hyperlink anchor at the bottom of the web page and you should see the following.
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
Modify the HTML to point to files on your own computer to get a real feel of how links and hyperlinks work.
In the next lesson we wrap up the HTML5 Basics tutorials.
The <a> anchor tag