In HTML, an internal link establishes a connection between different sections of a webpage by utilizing elements and tags. This link utilizes either a relative or absolute path to specify the destination within the same webpage. The HTML internal link incorporates the ID name preceded by a hash sign (#). It functions by directing the user to a specific section on the same webpage that has been assigned an ID. Upon clicking an internal anchor link, the browser will smoothly scroll to the designated section and position it at the center of the viewport.
To establish internal links within HTML files, you can specify the target HTML file's name. This allows referencing a particular section's id attribute within the webpage along with an optional relative path. This concept mirrors the usage of HTML elements such as anchor within the same HTML document.
Imagine you want to establish a connection within a website from "home.html" to "about.html" through internal linking. The HTML pages involved in this scenario are titled "home.html" and "contact.html", both situated in a common directory.
Evaluate the Internal Links in Your System
There exist several approaches to validate the functionality of internal links on your site. Some of the methods include:
- Manual Inspection:
You have the option to verify the accuracy of internal links on your website by inspecting each link manually. This approach enables a thorough check of every link to confirm its correct destination. Nonetheless, this process may be time-consuming, especially for websites with extensive pages and interconnected links.
- Utilize web browsers for this task:
You can validate internal links provided by using different online browsers such as Microsoft Edge, Mozilla Firefox, and Google Chrome. By clicking on each link and ensuring they direct you to the correct pages, you can review your website across multiple browsers. Evaluate the web browsers and their association with the links.
- Online Link Validators:
To evaluate internal links on your website, consider using various online tools and link validators. These software applications are designed to scan your website for broken or misconfigured internal links. Commonly utilized tools for this purpose include the Dead Link Checker, Xenu's Link Sleuth, and other reputable online link validation services.
- Examine HTTP Status Codes:
You can validate the functionality of internal links by checking their HTTP status codes. An HTTP status code is a response status for a web page. A "200 OK" status typically signifies that a link is working correctly, while a "404 Not Found" or "500 Internal Server Error" status indicates that the link is either broken or misconfigured.
Syntax
The syntax below is utilized for managing and handling internal links in HTML.
Examples
The examples below demonstrate the HTML internal linking for pages and sections using IDs for specific and absolute links.
Example 1:
The provided illustration demonstrates the fundamental HTML internal linking within a webpage. It is possible to establish various sections and corresponding links for those sections, with each section being identified by a specific ID.
<!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:
Displayed below is the internal link and how it functions.
Example 2:
Below is a demonstration illustrating an internal HTML hyperlink within a webpage styled using CSS.
<!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:
Displayed below is the internal link and its functionality.
Example 3:
The illustration demonstrates how to create internal links within the same directory by utilizing 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:
Below is an illustration demonstrating how to create internal links for pages within the same directory.
Conclusion
An HTML internal link is a valuable tool for directing users to specific sections within a web page through a straightforward hyperlink. This feature proves particularly beneficial for users navigating lengthy or intricate web pages.