You are currently viewing HTML Creating Hyperlinks and Navigation

HTML Creating Hyperlinks and Navigation

Hyperlinks, often referred to as links, play a crucial role in web development by connecting different web pages together. In HTML, creating hyperlinks is a fundamental skill that allows developers to build interactive and navigable websites. In this article, we will explore the basics of creating hyperlinks and navigation in HTML, understanding their importance in web design.

Understanding Hyperlinks

Hyperlinks are like digital bridges that connect one web page to another. They are the interactive elements that enable users to navigate seamlessly between different sections of a website or to external resources. The HTML <a> (anchor) element is used to create hyperlinks, and it can link to various destinations such as other web pages, images, documents, or even email addresses.

The Anchor Element

In HTML, the anchor element (<a>) is used to create hyperlinks. The most fundamental attribute of the anchor element is href, which stands for Hypertext Reference. The href attribute holds the URL (Uniform Resource Locator) of the destination, defining where the link leads:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <a href="https://www.coderscratchpad.com">Coder Scratchpad</a>

    </body>
</html>

In this example, the anchor element surrounds the text “Coder Scratchpad” and the href attribute specifies the destination URL. When a user clicks the link, they will be directed to the coderscratchpad.com website.

HTML Creating Hyperlinks

Creating Internal Links

Hyperlinks aren’t limited to external websites; they can also connect different pages within the same website. This is particularly useful for organizing content and creating a smooth navigation experience.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <a href="about.html">About Us</a>

    </body>
</html>

In this example, the link directs users to the “about.html” page in the same directory as the current webpage.

HTML Creating Hyperlinks

Linking to Sections within a Page

HTML also allows us to link to specific sections within a single page. This is achieved by using the id attribute along with the anchor element. Let’s say we have a page with different sections:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <nav>
            <ul>
                <li><a href="#section1">Go to Section 1</a></li>
                <li><a href="#section2">Go to Section 2</a></li>
                <li><a href="#section3">Go to Section 3</a></li>
            </ul>
        </nav>
		
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

        <section id="section1">
            <h2>Section 1</h2>
            <p>This is the first section of the page.</p>
        </section>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

        <section id="section2">
            <h2>Section 2</h2>
            <p>This is the second section of the page.</p>
        </section>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

        <section id="section3">
            <h2>Section 3</h2>
            <p>This is the third section of the page.</p>
        </section>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

    </body>
</html>

In this example, each section has a unique id attribute. The links in the navigation section use the href attribute with the corresponding id to create internal links. When a user clicks on these links, the page smoothly scrolls to the respective section.

HyperLinks to Sections

Relative and Absolute Paths

Hyperlinks can point to either absolute URLs (web addresses) or relative paths within the same website. Absolute URLs include the entire web address, while relative paths are defined relative to the current location.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <p>
            <!-- Absolute URL -->
            <a href="https://www.coderscratchpad.com">Coder Scratchpad</a>
        </p>

        <p>
            <!-- Relative Path -->
            <a href="about.html">About Us</a>
        </p>

    </body>
</html>

In the first example, the absolute path leads to an external website, while the second example uses a relative path to link to an internal page within the same website.

Relative and Absolute HyperLinks

Linking to Local Resources

Besides linking to external web pages, hyperlinks can also be used to connect to local resources like images, documents, or other html files. Use the href attribute to specify the path to the local resource.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>
        
        <p>
            <!-- Linking to an image -->
            <a href="images/logo.png">View our logo</a>
        </p>
        
        <p>
            <!-- Linking to a document -->
            <a href="documents/report.pdf">Read our annual report</a>
        </p>
        
        <p>
            <!-- Linking to a video -->
            <a href="videos/presentation.mp4">Watch our presentation</a>
        </p>
    
    </body>
</html>

Ensure that the specified file paths are accurate and lead to the intended resources.

Opening Links in a New Window or Tab

You can control how the linked content is displayed by using the target attribute. Setting the target to “_blank” opens the link in a new browser window or tab.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>
        
        <p>
            <a href="https://www.coderscratchpad.com" 
               target="_blank">Coder Scratchpad</a>
        </p>
    
    </body>
</html>

By adding target=”_blank”, users will stay on your website while opening the linked page in a new browser context.

Adding Images as Hyperlinks

It’s not limited to text – hyperlinks can also be embedded within images. This is achieved by placing the ‘img’ element within the ‘a’ element. Here’s an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <a href="https://pixabay.com/illustrations/ai-generated-beagle-dog-animal-8581993/">
            <img src="dog.jpg"
                 alt="A Beautiful Puppy"
                 width="200" />
        </a>

    </body>
</html>

In this example, clicking on the image will take users to the specified URL.

Image HyperLinks

Download Links

In addition to linking to other webpages, HTML allows us to create download links for files. Suppose you want to provide users with a downloadable PDF file. You can achieve this with the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <a href="documents/document.pdf" download>Download PDF</a>

    </body>
</html>

The download attribute informs the browser that the link is pointing to a downloadable resource, prompting it to download the file rather than navigating to it.

Linking to Email Addresses

To create a link that opens the user’s email client with a pre-filled email, use the mailto scheme.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <a href="mailto:edward@coderscratchpad.com">Send Email</a>

    </body>
</html>

Clicking this link will open the user’s default email application with the recipient address pre-filled.

HTML Creating Hyperlinks

Linking to Phone Numbers

If you want users to be able to call a phone number directly from your webpage, you can use the tel protocol:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Document Title -->
        <title>HyperLinks | HTML</title>

    </head>
    <body>

        <h1>HyperLinks</h1>

        <a href="tel:+260973683651">Call us at +260 (973) 683-651</a>

    </body>
</html>

The tel protocol signifies that the link is a telephone number, and the +260973683651 is the phone number. Users can click the link to initiate a call.

HTML Creating Hyperlinks

Conclusion

In conclusion, understanding how to create hyperlinks in HTML is fundamental for web development. Whether linking to external websites, local resources, or email addresses, the <a> element empowers developers to create a seamless and interactive user experience. For more content, please subscribe to our newsletter.

Leave a Reply