HTML Linking Pages Tutorial with Stone River eLearning

Have you ever visited a webpage that has large chunk of text on display with all the content grouped into different sections? How did you feel about scrolling through all that pile of text before you reach the section that you wanted to read? Surely, it is quite frustrating and time consuming. However; what if you could directly jump to the section of your interest by just a single click of your mouse button? Well, some web pages already have this functionality and you can add it on your web page as well. Having discussed a lot about good coding practices and a few important elements and tags in HTML, it is now time that we shift our attention from the programming part and look towards a topic that deals more with how HTML works on the outside.

How can it be achieved?

HTML allows users to create links in their webpage which can be used to visit other pages. However; have you ever wondered if these links could be used to visit a different section on the same page? You must be thinking, how is this possible? We need to give the name of the html document with the link, what will we give in case of the same page?  This is a very common and fair doubt and we will introduce a new HTML entity before we solve it.

What is an id in HTML?

An id element is used to specify a unique id to other elements in an HTML document. In other words, you can assign different settings for a paragraph tag “<p>” and an ordered list “<ol>” by using the ids.

Thus, by using the ids, we can differentiate between the different sections in an HTML document. However; it still does not solve our problem. How will we link a section on the same page in HTML? Let us try to find an answer with an example.

Eg:

<!DOCTYPE html>

<html>

<head>

<meta charset =”UTF-8”>

<title> ID Example </title>

</head>

<body>

<h2  id=”top”>These are my details </h2>

<p> My name is XYZ </p>

<p> My am 19 years old </p>

<p> My love HTML. </p>

<p> My hobbies are watching movies and playing sports.</p>

<p> I want to get better at HTML. </p>

<a href = “#top”>Go to my details! </a>

</body>

</html>

In the above example, the level two heading is given an id “top”. This id is thus associated with this particular element on the HTML document. The anchor tag is used to create a link at the end of the body and the reference of the link is set as “top”. Thus, the link will lead to the level two heading with the id of “top”, if it is clicked by the user.
Note:

  1. The id is unique for a single element and therefore it is different from a class, which can be used for a number of elements.
  2. A “#” sign must be used before the name of the id in the anchor tag. The “#” sign is used to tell the browser that the link is referring to an id or an anchor.
  3. Using ids in the HTML document is a good practice is it makes styling of the document using CSS a much easier and effective process.
  4. Creating a link on the same webpage finds great utility in pages where there is a lot of text and the same is effectively used in e-books available on the internet.

 

Download the source code here:

GET YOUR FREE HTML EBOOK!

(Visited 79 times, 1 visits today)