Add Links Images in HTML

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.

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.

Anchor Attribute List

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

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.

HTML Anchor And Image Worked Example

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

HTML Anchor And Image Worked Example 2

<!-- 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>

HTML Anchor And Image Worked Example 3

<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.

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.

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.

HTML Anchor And Image Worked Example 4

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

HTML Anchor And Image Worked Example 5

<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"
>

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.

Responsive Images, Link Safety, and Accessible Names

Use srcset and sizes when the browser should choose among image widths, and picture when art direction or format choice changes the source. Set width and height or an aspect ratio so layout does not jump while the image loads. Lazy-load below-the-fold media, but keep the primary content image available without unnecessary delay.

Link text and image alternative text must describe the destination or action in context. For a linked image, its alternative text becomes part of the link name. Treat target="_blank" deliberately, preserve referrer and opener protections where required, and never use an anchor without a real navigation destination as a button substitute.

Add semantic HTML example

<section aria-labelledby="add-title">
  <h2 id="add-title">Add</h2>
  <p>This block uses meaningful tags so browsers, users, and assistive technology understand the content.</p>
  <a href="/learn/add">Read the full Add note</a>
</section>

Add accessibility check example

<form>
  <label for="add-input">Add value</label>
  <input id="add-input" name="add" required>
  <button type="submit">Save</button>
</form>
<!-- Check: every interactive element has a name, purpose, and keyboard path. -->

Before you move on