MakeW3web

Internal and External Links

Internal and external links are two types of hyperlinks used in HTML to navigate between web pages or resources. The difference between them lies in their target destinations.

  1. Internal Links: Internal links, also known as relative links, point to web pages or resources within the same website or domain. They use relative URLs, which don't include the protocol (e.g., `https://`) or domain name. Relative URLs are shorter and more flexible because they don't depend on the domain name. If you move the website to a different domain, internal links will still work correctly.

Examples:

<!-- Link to the "about.html" page within the same folder -->
<a href="about.html">About Us</a>

<!-- Link to the "contact.html" page in a subfolder called "pages" -->
<a href="pages/contact.html">Contact Us</a>

<!-- Link to an image file in the "images" folder -->
<img src="images/example.jpg" alt="Example Image">
  1. External Links: External links, also known as absolute links, point to web pages or resources on different websites or domains. They use absolute URLs, which include the full web address, such as the protocol (e.g., `https://`) and domain name. Absolute URLs are necessary when linking to external websites or resources, as they provide the full path to the destination.

Examples:

<!-- Link to an external website -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- Link to an external image file -->
<img src="https://www.example.com/images/example.jpg" alt="Example Image">

<!-- Link to a stylesheet file from a Content Delivery Network (CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

Here's a combined example demonstrating both internal and external links:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal and External Links Example</title>
</head>
<body>
    <h1>Internal and External Links</h1>
    
    <p>Internal links:</p>
    <ul>
        <li><a href="about.html">About Us (same folder)</a></li>
        <li><a href="pages/contact.html">Contact Us (subfolder)</a></li>
    </ul>
    
    <p>External links:</p>
    <ul>
        <li><a href="https://www.example.com">Visit Example.com</a></li>
        <li><a href="https://www.wikipedia.org">Visit Wikipedia</a></li>
    </ul>
</body>
</html>

By understanding and using internal and external links, you can create a well-structured and connected website that allows users to navigate both within your site and to external resources. Remember to use relative URLs for internal links and absolute URLs for external links to ensure proper navigation and resource loading.

Was this page helpful?