Links and Images

easy

By FrontendAtlas Editorial · Updated Jul 14, 2026

Create semantic links and images: use anchor elements with real href attributes and descriptive names, add target/rel when opening new tabs, and include alt text for images. An anchor without href is not a hyperlink. This checks basic accessibility, security, and HTML best practices in one exercise.

Solution

Overview

Links and images are foundational for accessibility and SEO. An anchor needs an href attribute to be a hyperlink. Links should be descriptive and unique so screen readers can announce them meaningfully, and images should include alt text that reflects purpose. If a link opens a new tab, use rel=noopener noreferrer for safe opener behavior.

Approach 1 – Secure clickable image link

Add an anchor with a real href and a clear accessible name (avoid generic 'click here'). An anchor without href is not a hyperlink. If target blank is required, include rel noopener noreferrer. Add an img with a valid src and descriptive alt that explains the link’s destination or purpose. Keep markup simple and semantic so links remain understandable out of context.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        Clickable Image Link
      </title>
    </head>
    <body>
      <h1>
        My Favorite Website
      </h1>
      <p>
        Click the image below to visit Wikipedia:
      </p>
      <a href='https://www.wikipedia.org' target='_blank' rel='noopener noreferrer'>
        <img src='https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png' alt='Wikipedia logo'>
      </a>
      <p class='note'>
        If this preview is sandboxed, opening a new tab may be blocked. The markup is still correct.
      </p>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
  text-align: center;
}
h1 {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}
img {
  width: 150px;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 6px;
  margin-top: 1rem;
}
.note {
  font-size: .9rem;
  opacity: .75;
  margin-top: 1rem;
}

Notes & Pitfalls

Pitfalls

Wrapping an image in an anchor without href does not create a hyperlink.
Forgetting rel='noopener noreferrer' is a security risk when using target='_blank'.
Leaving alt empty makes the image inaccessible.
In sandboxed iframes, clicks may not open a new tab even when the markup is correct.

Techniques

Wrap <img> directly inside <a href='...'> for an image hyperlink.
Always combine target='_blank' with rel='noopener noreferrer' for external links.
Validate structure and attributes instead of relying on real navigation in embedded previews.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep