Prev Next

HTML Links

HTML links connect webpages and resources, allowing users to navigate effortlessly. By using the <a> tag along with the href attribute, you can link to other pages, sites, sections, or files. Understanding links is fundamental for creating a seamless web browsing experience.

Key Topics

Example: A simple link to an external website using the href attribute.

<a href="https://www.example.com">Visit Example</a>

Example: A link opening in a new tab by adding target="_blank".

<a href="https://www.example.com" target="_blank">Open in new tab</a>

A Page of Links

This example demonstrates various types of links within a single page. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Links Example</title>
</head>
<body>
    <h1>Exploring Links</h1>
    <p><a href="https://example.com">Go to Example.com</a></p>
    <p><a href="https://example.com" target="_blank">Open Example.com in a new tab</a></p>
    <p><a href="about.html">Visit my About page (internal link)</a></p>
    <p><a href="#section2">Jump to Section 2 (on this page)</a></p>

    <h2 id="section2">Section 2</h2>
    <p>This is Section 2, linked from above.</p>
</body>
</html>

Explanation: The page above shows external links, internal links, and anchor links that jump to specific sections. Understanding different link types helps you build intuitive navigation.

This demonstration integrates links into a table layout. Another full code sample is provided below.

<h2>Resource Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr>
        <th>Resource</th>
        <th>Link</th>
    </tr>
    <tr>
        <td>Documentation</td>
        <td><a href="https://developer.mozilla.org">MDN Web Docs</a></td>
    </tr>
    <tr>
        <td>Search Engine</td>
        <td><a href="https://www.google.com">Google</a></td>
    </tr>
</table>

Explanation: Placing links inside tables can make data-driven resources easily accessible. Each table cell can contain clickable links, streamlining user interaction.

Key Takeaways

  • Use the <a> tag and href attribute to create links.
  • Open links in new tabs with target="_blank" when appropriate.
  • Internal links and anchor links help users navigate within your site or page.
  • Integrate links into various elements (tables, lists, paragraphs) for flexible navigation.
  • Thoughtful link placement improves user experience and site usability.
Prev Next