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’swindowobject.
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:
| Attribute | Required | Description |
|---|---|---|
src |
Yes | Path to the image |
alt |
Yes | Text description for accessibility |
width |
Recommended | Width in pixels |
height |
Recommended | Height in pixels |
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
| Format | Best for |
|---|---|
.jpg |
Photographs |
.png |
Icons with transparency, screenshots |
.svg |
Vector logos and icons |
.webp |
Replacement for jpg/png โ smaller file size |
.avif |
Newest format, best compression |
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.
๐ฌ Comments (0)
No comments yet
Be the first to share your opinion about this article!