Home > Courses > Introduction to HTML and Web Technology > HTML Links

HTML Links

Subject: Introduction to HTML and Web Technology
In HTML, links or hyperlink are used to navigate between web pages and access other online resources. To create a basic link, use the (anchor) element with the href attribute: For example 

<a href="https://www.tealearn.org">Visit TEA Learn website</a>

Any information such as text or image can be use as a link for navigating between web pages. Links can point to a page on our site or to a another website and other online resources as shown in the code below. 


<!DOCTYPE html>
<html>
<head>
    <title>HTML Links Examples</title>
</head>
<body>
    <h1>HTML Examples</h1>

    <h2>1. Relative Links</h2>
    <p>You can create links to pages within your own website using relative paths. For example:</p>
    <a href="about.html">About Us</a>

    <h2>2. Linking to Email Addresses</h2>
    <p>To create a link that opens the user's email client to send an email, use the <code>mailto:</code> scheme:</p>
    <a href="mailto:benjamin.onuorah@gmail.com">Contact Us</a>

    <h2>3. Linking to Files</h2>
    <p>You can link to files on your website or other resources like PDFs, images, and more:</p>
    <a href="folder/document.pdf">Download PDF</a>

    <h2>4. Linking to Specific Parts of a Page (Anchors)</h2>
    <p>You can link to specific sections of a page by using anchors and the <code>#</code> symbol:</p>
    <a href="#section2">Jump to Section 2</a>

    <h2>5. Opening Links in a New Tab/Window</h2>
    <p>Add the <code>target="_blank"</code> attribute to open links in a new tab or window:</p>
    <a href="https://www.tealearn.org" target="_blank">Open TEA Learn in a new tab</a>

    <h2>6. Linking to Phone Numbers</h2>
    <p>For mobile devices, you can create clickable phone number links:</p>
    <a href="tel:+2348037490533">Call Us</a>

    <h2>7. Linking to Social Media Profiles</h2>
    <p>Create links to your social media profiles:</p>
    <a href="https://web.facebook.com/ben.onuorah">Ben Onuorah on Facebook</a>

    <h2>8. Linking to Other Websites</h2>
    <p>You can link to any website or online resource using the href attribute:</p>
    <a href="https://www.benonuorah.com/">Ben Onuorah</a>

    <h2>9 Linking to Images</h2>
    <p>You can also use images as links by wrapping an <img> element in an <a> element:</p>
    <a href="https://www.benonuorah.com">
        <img src="https://benonuorah.com/img/ben_onuorah_logo.png" alt="Ben Onuorah Logo">
    </a>
</body>
</html>


Linking Best Practices
a. Use descriptive link text that tells users where the link will take them.
b. Ensure all links are working and valid.
c. Consider accessibility by providing alternative text for images and ensuring your links are keyboard and screen reader-friendly.
d. Use the appropriate link type (e.g., external, internal, email, file) for each situation.

By: Benjamin Onuorah

Comments

No Comment yet!

Login to comment or ask question on this topic

Previous Topic


Supported by