XQA
Back to Web Development
2025-12-245 min read

HTML Links and Images

Learn HTML Links and Images step by step with clear examples and exercises.

Title: Mastering HTML Links and Images

Why This Matters

HTML links and images are fundamental building blocks for creating engaging and informative web pages. They allow users to navigate between different web resources, access multimedia content, and enhance the overall user experience. Understanding how to effectively use HTML links and images can help you excel in web development interviews, impress clients, and create websites that stand out from the crowd.

Prerequisites

Before diving into HTML links and images, it's essential to have a solid understanding of:

  1. Basic HTML syntax
  2. HTML tags (e.g., `, , `)
  3. Text formatting with HTML (e.g., `, , `)
  4. Creating and structuring web pages

Core Concept

HTML Links

HTML links, also known as hyperlinks, are used to navigate between different web resources. They are created using the ` tag with the href` attribute that specifies the URL or location of the linked resource.

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

In this example, "Example Link" is the visible text that users will click on to navigate to the specified URL (https://www.example.com).

Anchor links

Anchor links, or internal links, are used to link different parts of the same web page. They are created using the id attribute in combination with the href attribute.

<h2 id="section1">Section 1</h2>
<a href="#section1">Jump to Section 1</a>

In this example, clicking on "Jump to Section 1" will scroll the page down to the h2 element with the id attribute set to "section1."

HTML Images

HTML images are used to add visual content to web pages. They are created using the ` tag, which has several attributes such as src, alt, and width`.

<img src="example-image.jpg" alt="Example Image" width="300">

In this example, "example-image.jpg" is the image file that will be displayed on the web page. The alt attribute provides a text description of the image for users who cannot see it (e.g., due to visual impairments or slow internet connections). The width attribute sets the width of the image in pixels.

Responsive images

To ensure that images adapt to different screen sizes and devices, you can use CSS media queries or the HTML srcset and sizes attributes.

<img src="example-image-small.jpg" srcset="example-image-medium.jpg 600w, example-image-large.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px" alt="Example Image">

In this example, the srcset attribute provides multiple image sources with their respective widths (in pixels), and the sizes attribute sets the default size of the image based on the viewport's width. This allows the browser to choose the most appropriate image for the current device and screen size.

CSS Styling Images

You can use CSS to style HTML images by targeting the img selector or using classes and IDs. Common CSS properties for styling images include:

  • width and height: set the dimensions of the image
  • object-fit: adjust how the image is scaled within its container
  • border, padding, and margin: add space around the image
  • filter: apply visual effects to the image (e.g., grayscale, blur)

Worked Example

Create a simple HTML page with an internal link and an image using CSS to style it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Links & Images Example</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { margin-bottom: 20px; }
img { width: 30%; border: 1px solid #ccc; padding: 5px; margin: 20px auto; }
</style>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a simple example of HTML links and images.</p>

<!-- Internal link -->
<a href="#example-image">View Example Image</a><br>
<hr>

<!-- External link -->
<a href="https://www.example.com">Visit Example Website</a><br>
<hr>

<!-- Image with CSS styling -->
<img src="example-image.jpg" alt="Example Image" id="example-image">
</body>
</html>

In this example, the HTML page includes an internal link that jumps to the example-image, an external link to another website, and an image with CSS styling that sets its width, adds a border, and centers it on the page.

Common Mistakes

  1. Forgetting to close the ` tag: Remember to always close the tag using `.
  2. Not providing alt text for images: Always include an alt attribute for every image, even if it's decorative or only used for layout purposes.
  3. Linking to broken URLs: Test your links regularly to ensure they are working correctly and update them when necessary.
  4. Ignoring accessibility considerations: Use semantic HTML elements (e.g., `, , `) and provide alternative text for images, captions, and descriptions for non-text content.
  5. Not optimizing image sizes: Keep image file sizes small to improve page load times without sacrificing quality.

Practice Questions

  1. Create an HTML page with a navigation bar containing links to the following sections: Home, About Us, Services, and Contact Us. Use CSS to style the navigation bar.
  2. Modify the worked example to include responsive images using the srcset and sizes attributes.
  3. Add alt text to all images in a given HTML page and ensure that they are accessible and descriptive.
  4. Create an HTML page with a form that allows users to submit their email addresses for newsletter signups. Use CSS to style the form and its elements (e.g., input fields, labels, submit button).
  5. Modify the worked example to include anchor links that jump to specific sections within the same page.

FAQ

--

What is the purpose of the href attribute in HTML links?

The href attribute specifies the URL or location of the linked resource for HTML links.

Why should I provide alt text for images?

Alt text provides a text description of an image for users who cannot see it, such as those using screen readers or browsing with slow internet connections.

How can I ensure that my images are responsive on different devices?

You can use CSS media queries or the HTML srcset and sizes attributes to make images adapt to different screen sizes and devices.

What is the difference between internal links and external links in HTML?

Internal links link to different parts of the same web page, while external links link to other websites or resources on the internet.

Why is it important to close the `` tag in HTML links?

Closing the `` tag ensures that the browser knows where the link ends and prevents potential issues with the layout or functionality of your web page.

HTML Links and Images | Web Development | XQA Learn