HTML Internal Link

An HTML internal link connects the two parts of a similar webpage using elements and tags. A relative or absolute path is used for this link to get the internal link. The HTML internal link uses the id name with the hash sign (#). An internal link is operated for the points to the same web page of the required page to provide it with an ID. When clicking an internal anchor link, your browser will immediately scroll to the referenced section and display it at the center of the page.

You can create internal links in HTML documents by providing the file name of the target HTML. The web page and an optional relative path refer to the id attribute of a specific section. The same idea as the HTML element, like anchor, is used for the same HTML document.

Suppose you wish to create two pages as an internal link from "index.html" to "about.html". The two pages of the HTML document are named "index.html" and "contact.html", which are located in the same directory or folder.

Evaluate the Internal Links in Your System

There are various methods to verify whether internal links on your website are functioning properly. We can see the following few techniques:

1. Manual Testing:

You can manually check each link to verify whether an internal link on your website points to the correct page. This method allows you to verify each link completely and ensure that the given link is operating properly. However, this method will take some time, particularly if your web page has many pages and links.

2. Make use of web browsers:

It is possible to verify the given internal links using a variety of online browsers. The browsers include Microsoft Edge, Mozilla Firefox, and Google Chrome for the internal links. If each link takes you to the relevant pages by clicking on it, you can explore your web page in various browsers. Just check the web browsers and their link correlations.

3. Link Checkers Online:

You may test your internal links with several web tools and link checkers. Usually, these programmers search the website to find links broken or incorrectly set with the internal links. The online Link Checker is used for verification, such as a Dead Link Checker, Xenu's Link Sleuth, and a few well-known online link checkers.

4. Look for Status Codes in HTTP:

Additionally, you can verify the internal links that are functioning properly by looking at their HTTP status codes. An HTTP status code indicates a web page's response status. If the HTTP status code shows a "200 OK", code often means that a link is functioning properly. Ifhttp status code shows a "404 Not Found" or "500 Internal Server Error" value, the link is broken or incorrectly configured.

Syntax

The following syntax is used to operate and work HTML internal links.

<a href = " contact.html "> Contact Us </a>
 OR
<a href = "#first_id"> Section Id </a>
<div id = "first_id"> Write Content of the Section </div>

Examples

The following examples show the HTML internal link for the pages and sections with IDs for particular and absolute links.

Example 1:

The following example shows the basic html internal link on the web page. We can create different sections and links for sections. This section is provided in the link with the ID name.

<!DOCTYPE html>
<html>
<head>
<title> Html Internal Link </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#section1{
background-color: orange;
width: 200px;
height: 300px;
}
#section2{
background-color: green;
width: 200px;
height: 300px;
}
#section3{
background-color: yellow;
width: 200px;
height: 300px;
}
#section4{
background-color: red;
width: 200px;
height: 300px;
}
</style>
</head>
<body style = "background-color:skyblue;">
<h3 class = "class1">
Html Internal Link
</h3>
<p class = "class2">
we can see the internal link for the sections
</p>
<a href = "#section1"> Section Id : 1 </a> 
<br>
<a href = "#section2"> Section Id : 2 </a>
<br>
<a href = "#section3"> Section Id : 3 </a>
<br>
<a href = "#section4"> Section Id : 4 </a>
<br>
<section id = "section1"> 1 </section>
<section id = "section2"> 2 </section>
<section id = "section3"> 3 </section>
<section id = "section4"> 4 </section>
</body>
</html>

Output:

The following output shows the internal link and its operation.

Example 2:

The following example shows the HTML internal link on the web page with the CSS style.

<!DOCTYPE html>
<html>
<head>
<title> Html Internal Link </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#section1{
background-color: orange;
width: 200px;
height: 300px;
}
#section2{
background-color: green;
width: 200px;
height: 300px;
}
#section3{
background-color: yellow;
width: 200px;
height: 300px;
}
#section4{
background-color: red;
width: 200px;
height: 300px;
}
.image-link1 {
display: block;
width: 100px;
height: 50px;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDa3jaIrSPuIJV1tMrOHxPYlvKcJiVUBz3JolaNA4s1w&s');
background-size: cover;
}
.image-link2 {
display: block;
width: 100px;
height: 50px;
background-image: url('https://logowik.com/content/uploads/images/123_css3.jpg');
background-size: cover;
}
.image-link3 {
display: block;
width: 100px;
height: 50px;
background-image: url('https://www.freepnglogos.com/uploads/javascript/javascript-wysiwyg-editor-and-reusable-assets-coherent-editor-5.png');
background-size: cover;
}
.image-link4 {
display: block;
width: 100px;
height: 50px;
background-image: url('https://w7.pngwing.com/pngs/165/821/png-transparent-round-blue-logo-blue-symbol-sphere-logo-jquery-blue-logo-sphere.png');
background-size: cover;
}
</style>
</head>
<body style = "background-color:skyblue;">
<h3 class = "class1">
Html Internal Link
</h3>
<p class = "class2">
we can see the internal link for the sections
</p>
<br>
<a href = "#section1" class = "image-link1"> </a>
<br>
<a href = "#section2" class = "image-link2"> </a>
<br>
<a href = "#section3" class = "image-link3">  </a>
<br>
<a href = "#section4" class = "image-link4">  </a>
<br>
<section id = "section1"> HTML LEARN </section>
<section id = "section2"> CSS LEARN </section>
<section id = "section3"> JS LEARN </section>
<section id = "section4"> JQUERY LEARN </section>
</body>
</html>

Output:

The following output shows the internal link and its operation.

Example 3:

The example shows the internal link for the same directory pages using html.

<!DOCTYPE html>
<html>
<head>
<title> Html Internal Link </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
</style>
</head>
<body style = "background-color:skyblue;">
<h3 class = "class1">
Html Internal Link
</h3>
<p class = "class2">
we can see the internal link for the same directory pages
<br>
<a href = "index.html"> HOME </a> 
<br>
<a href = "about.html"> About </a>
<br>
<a href = "contact.html"> Contact </a>
<br>
<a href = "career.html"> Career </a>
</body>
</html>

Output:

The following example shows the internal link for the same directory pages.

Conclusion

The HTML internal link helps get the web page's required section using a simple link. It helps users with web pages that are long or complicated to understand.

Next TopicHTML Onclick Events

← prev next →