How to Add Links and Images in HTML - Complete Guide

Anchor

The HTML <a> tag is used to create hyperlinks. A hyperlink can connect one page to another page, jump to a section within the same document, open an email client, start a phone call, or download a file. Anchor tags are one of the most commonly used HTML elements because navigation on the web depends on links.

The most important attribute of an anchor tag is href, which tells the browser where the link should go. The content placed between the opening and closing <a> tags becomes the clickable text or clickable element.

example

<a href="https://www.tutorialslogic.com">Tutorials Logic</a>

Common Types of Links

Anchor tags can be used in several ways depending on the destination. Internal links connect to another page within the same website, external links point to another website, and fragment links jump to a particular section using an element id.

example

<!-- Internal link -->
<a href="/about-us">About Us</a>

<!-- External link -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    Visit Example
</a>

<!-- Jump to a section on the same page -->
<a href="#contact-section">Go to Contact Section</a>

<h2 id="contact-section">Contact Section</h2>

Anchor Attribute List

Attribute	Description
href	Specifies the target URL, file, email address, phone number, or section id the link points to.
target	Controls where the linked document opens, such as the same tab or a new tab using `_blank`.
rel	Defines the relationship between the current page and the linked resource. Use `noopener noreferrer` with `target="_blank"` for better security.
title	Provides additional information as a tooltip when the user hovers over the link.
download	Tells the browser to download the linked file instead of opening it normally.

Useful Anchor Examples

Anchor tags are not limited to normal page navigation. They can also create email links, telephone links, and downloadable links.

example

<a href="mailto:info@example.com">Send Email</a>
<a href="tel:+911234567890">Call Us</a>
<a href="brochure.pdf" download>Download Brochure</a>

Image

The HTML <img> tag is used to display images on a web page. Images help communicate information visually, improve design, and make content easier to understand. Unlike many other HTML tags, the <img> tag is an empty element, which means it does not need a closing tag.

The src attribute tells the browser where the image file is located, and the alt attribute provides alternative text if the image cannot be displayed. The alt text is also important for accessibility because screen readers use it to describe the image to users who cannot see it.

example

<img src="image.jpg" alt="A sample image" title="Preview image" width="300" height="200">

Clickable and Responsive Images

Images can also be wrapped inside an anchor tag to make them clickable. In modern websites, images are often made responsive so they adjust nicely to different screen sizes. Attributes such as loading="lazy", srcset, and sizes help improve performance and responsiveness.

example

<a href="https://www.tutorialslogic.com">
    <img src="logo.png" alt="Tutorials Logic Logo" width="220" height="70">
</a>

<img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
    alt="Landscape photo"
    loading="lazy"
>

Image Attribute List

Attribute	Description
src	Specifies the path or URL of the image file to display.
alt	Provides alternative text for accessibility and as a fallback when the image cannot load.
title	Displays additional information as a tooltip on hover.
width	Defines the displayed width of the image.
height	Defines the displayed height of the image.
loading	Controls loading behavior. `lazy` delays off-screen images until needed.
srcset	Provides multiple image sources for different screen sizes and resolutions.
sizes	Works with `srcset` to help the browser choose the best image size.

Best Practices

Always write meaningful link text like Read the HTML guide instead of vague text like Click here.
Use descriptive alt text so screen readers can explain the image properly.
Add rel="noopener noreferrer" when using target="_blank" for external links.
Set image dimensions when possible to reduce layout shift while the page loads.
Use responsive image techniques like srcset for better performance on different devices.

Key Takeaways

Always include the alt attribute on images - it\'s required for accessibility and helps SEO.
Use target="_blank" with rel="noopener noreferrer" on external links to prevent security vulnerabilities.
Add loading="lazy" to images below the fold to improve page load performance.
Specify width and height on images to prevent layout shift (CLS) while the image loads.
Use srcset and sizes for responsive images - the browser picks the best size for the device.
The download attribute on anchor tags triggers a file download instead of navigation.