Links and Images in HTML

Links and images are two elements that make the web what it is. The <a> tag connects pages together; <img> embeds visual content. We’ll cover the attributes beginners often miss and build a working DevBlog example.

The <a> tag — links

Basic syntax:

<a href="https://docs.python.org">Python Documentation</a>

href (HyperText Reference) is the address the link points to. The text between the tags is the clickable label.

Absolute vs relative URLs

<!-- Absolute — full address including protocol -->
<a href="https://python.org">python.org</a>

<!-- Relative — path within the same site -->
<a href="/posts/asyncio.html">asyncio article</a>
<a href="../index.html">Back to home</a>
<a href="contact.html">Contact</a>

Relative URLs are preferred for internal links: if you ever change the domain, they don’t need updating.

Opening in a new tab

<a href="https://github.com/me" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

• target="_blank" — open in a new tab/window.
• rel="noopener noreferrer" — security: the new tab won’t have access to the parent page’s window object.

Rule: always add rel="noopener noreferrer" to external links that use target="_blank".

Anchor links

Jump to a specific point on the same page:

<!-- Target: element with an id -->
<h2 id="installation">Installation</h2>

<!-- Anchor link -->
<a href="#installation">Go to installation</a>

<!-- Anchor on another page -->
<a href="/docs/setup.html#installation">Installation</a>

Anchors are perfect for tables of contents in long blog articles.

Special URL schemes

<!-- Open an email client -->
<a href="mailto:hello@devblog.com">Email me</a>

<!-- Download a file -->
<a href="/files/resume.pdf" download>Download resume</a>

The <img> tag — images

<img
  src="/images/python-logo.png"
  alt="Python logo"
  width="200"
  height="200"
/>

Attributes:

Why alt matters

The alt attribute serves three purposes:
1. Screen readers speak it aloud for visually impaired users.
2. The browser shows the text if the image fails to load.
3. Search engines index the image content via alt.

<!-- Bad: missing or empty alt -->
<img src="avatar.jpg" />

<!-- Good: describes what is shown -->
<img src="avatar.jpg" alt="Photo of blog author Alex Petrov" />

<!-- Decorative image: alt="" intentionally empty -->
<img src="divider.png" alt="" role="presentation" />

Why specify width and height

The browser reserves space for the image before it loads. This eliminates content jumping (Cumulative Layout Shift) and improves Core Web Vitals scores.

Image formats

Image as a link

Wrap <img> with <a>:

<a href="/posts/python-decorators.html">
  <img
    src="/images/decorators-cover.jpg"
    alt="Cover image for the Python decorators article"
    width="640"
    height="360"
  />
</a>

Example: DevBlog post card

<article class="post-card">
  <a href="/posts/asyncio-guide.html">
    <img
      src="/images/asyncio-cover.webp"
      alt="Diagram of asyncio event loop"
      width="640"
      height="360"
    />
  </a>
  <div class="post-card__body">
    <h2>
      <a href="/posts/asyncio-guide.html">
        The Complete asyncio Guide
      </a>
    </h2>
    <p>
      We explore the event loop, coroutines, and practical patterns
      for writing asynchronous Python code.
    </p>
    <a href="/posts/asyncio-guide.html" class="read-more">
      Read more →
    </a>
  </div>
</article>

Notice that links to the same URL appear three times — on the image, in the heading, and in the “Read more” button. This is the standard pattern for content cards.