Hyperlinks: A Beginner’s Guide to Linking Pages Internally and Externally

Hyperlinks are the backbone of the web, connecting pages, resources, and ideas. Whether you’re building a website or writing a blog, understanding how to link pages internally (within your site) and externally (to other websites) is essential. In this tutorial, you’ll learn how to create hyperlinks, their SEO benefits, and best practices with a full example.

A hyperlink (or link) is a clickable element (text, image, etc.) that directs users to another location. Links use the HTML <a> tag with the href attribute to specify the destination.

Syntax:

HTML
<a href="destination-url">Link Text</a>
FeatureInternal LinksExternal Links
DestinationLinks within the same website.Links to a different website.
SEO ImpactImproves site navigation and SEO ranking.Builds credibility and relationships.
URL StructureUses relative paths (e.g., /about).Uses absolute URLs (e.g., https://example.com).

Internal links connect pages within your website. Use relative paths to keep URLs short and manageable.

Example: Linking to an “About” Page

File Structure:

HTML
├── index.html  
└── about.html

HTML Code in index.html:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Learn more <a href="/about.html">about us</a>.</p>
</body>
</html>

Key Notes:

  • Use href="/about.html" if about.html is in the same folder.
  • For subfolders: href="blog/post1.html".

External links direct users to other websites. Always use absolute URLs (full web addresses).

Example: Linking to Google

HTML
<p>Search the web using <a href="https://www.google.com" target="_blank">Google</a>.</p>

Attributes Explained:

  • href="https://www.google.com": The full URL of the destination.
  • target="_blank": Opens the link in a new tab (optional but useful for external links).

Let’s build a simple website with two pages (home.html and contact.html) and an external link.

Step 1: Create home.html

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <nav>
        <a href="/home.html">Home</a> | 
        <a href="/contact.html">Contact</a>
    </nav>
    <p>Check out our <a href="https://www.tutorialspoint.com" target="_blank">favorite tutorial site</a>!</p>
</body>
</html>

Output

Step 2: Create contact.html

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Contact Page</title>
</head>
<body>
    <h1>Contact Us</h1>
    <nav>
        <a href="/home.html">Home</a> | 
        <a href="/contact.html">Contact</a>
    </nav>
    <p>Email us at <a href="mailto:contact@example.com">contact@example.com</a>.</p>
</body>
</html>

Output

complete example of Hyperlinks

Use Descriptive Anchor Text:

Avoid “click here.” Instead, write “Read our SEO guide.”

Add title Attributes for Accessibility:

HTML
<a href="/about.html" title="Learn about our mission">About Us</a>

Internal Linking for SEO:
Link to relevant pages to improve site structure and user engagement.

External Links:
Link to authoritative sites to boost credibility.

Read More Tutorials

Conclusion

Hyperlinks make the web interconnected and user-friendly. By mastering internal and external linking, you’ll enhance navigation, SEO, and user experience. Practice with the examples above, and soon you’ll be linking like a pro!