HTML 04: Mastering Links and Images

We're going to enrich your web pages with different types of links and images, while emphasizing accessibility. Links are the threads that connect the web. In HTML, the anchor tag is used for creating links, and there are several types you should know:

HTML 04: Mastering Links and Images

You're doing wonderfully on your HTML journey! Today, we're going to enrich your web pages with different types of links and images, while emphasizing accessibility.

Links are the threads that connect the web. In HTML, the <a> tag is used for creating links, and there are several types you should know:

External Links: These lead to a different website. Use the href attribute to specify the URL.

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

Internal Links: These link to another page within your website. They use a relative path in the href attribute.

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

Anchor Links (On-Page Links): These allow you to jump to a specific part of the same page. You’ll use an id attribute to mark the destination, and href with a # to link to it.

<!– Link to the section -->
<a href="#section1">Jump to Section 1</a>

<!– Section to jump to -->
<div id="section1">Content of Section 1</div>

Images and Accessibility

Images not only add visual interest to your web pages but also can convey important information. The <img> tag is used to embed images.

Example of Adding an Image

<img src="image.jpg" alt="Description of the image">

The alt attribute is crucial for accessibility. It provides a text alternative for screen readers used by visually impaired users. This description should be concise yet descriptive enough to convey the essence of the image to someone who can’t see it.

Today's Mission: Add Links and an Image to Your Web Page

Add an external link, an internal link, and an anchor link to your web page. Also, include an image with a descriptive alt attribute.

Here’s a Complete Example:

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page with Links and Images</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>Check out this <a href="https://www.example.com">cool website</a>!</p>
        <p>Learn more about us <a href="about.html">here</a>.</p>
        <p><a href="#gallery">Jump to the gallery</a></p>
        <p>Here's an image I love:</p><img src="image.jpg" alt="A beautiful landscape">
        <div id="gallery">Gallery content goes here...</div>
    </body>
</html>

Need Assistance? If you encounter any issues or have questions, our SkillSprints Slack community is here to help. Feel free to seek advice and share your achievements. Join us ​here​.

Final Thought: By incorporating different types of links and accessible images, you are not only enhancing the functionality of your web page but also ensuring it's inclusive for all users. You're doing a fantastic job! Keep up the great work as you continue to develop your HTML skills.