Links and Images
Creating Links with <a>
Links are what make the web a web — they connect pages together. The anchor element <a> creates a hyperlink:
<a href="https://yourcareerex.com">Visit CareerEx</a>
The href attribute (hypertext reference) specifies the destination URL. The content between the tags becomes the clickable text.
Types of Links
External links — pointing to other websites
<a href="https://developer.mozilla.org">MDN Web Docs</a>
Always include https://. Without it, the browser may treat it as a relative path on your own site.
Internal links — pointing to pages on your own site
<a href="/about">About Us</a>
<a href="/courses/frontend">Frontend Track</a>
Relative URLs (starting with /) link to pages on the same domain.
Anchor links — jumping to a section on the same page
<!-- The link -->
<a href="#contact">Jump to Contact</a>
<!-- The target section -->
<section id="contact">
<h2>Contact Us</h2>
</section>
Email and phone links
<a href="mailto:hello@yourcareerex.com">Email us</a>
<a href="tel:+2348000000000">Call us</a>
Opening Links in a New Tab
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
GitHub
</a>
target="_blank"opens the link in a new browser tabrel="noopener noreferrer"is a security best practice — always add it withtarget="_blank"
Images with <img>
<img src="profile.jpg" alt="A photo of Amara smiling" />
Two required attributes:
src— the path or URL to the image filealt— alternative text describing the image (critical for accessibility and SEO)
The <img> element is self-closing — it has no closing tag.
Image Sources
Local file (same project):
<img src="images/logo.png" alt="CareerEx logo" />
External URL:
<img src="https://placehold.co/400x200" alt="Placeholder" />
Controlling Image Size
<!-- Using HTML attributes -->
<img src="photo.jpg" alt="Team photo" width="600" height="400" />
<!-- Or with CSS (recommended) -->
<img src="photo.jpg" alt="Team photo" style="width: 100%; height: auto;" />
Setting width and height attributes (even if you override them with CSS) helps the browser reserve space before the image loads, preventing layout shifts.
Clickable Images
Wrap an <img> inside an <a> to make it clickable:
<a href="https://yourcareerex.com">
<img src="logo.png" alt="CareerEx — go to homepage" />
</a>
Image with Caption
Use <figure> and <figcaption> for images that need a caption:
<figure>
<img src="classroom.jpg" alt="Students in a live CareerEx session" />
<figcaption>Students during a live Saturday class in Lagos.</figcaption>
</figure>
Writing Good Alt Text
| Bad alt text | Good alt text |
|---|---|
alt="image" | alt="CareerEx logo" |
alt="photo" | alt="Students studying at laptops in a co-working space" |
alt="" (for important images) | Describe what the image shows |
Use alt="" (empty) only for purely decorative images that add no information.
Try it yourself
Key Takeaways
- The <a> element creates links; the href attribute specifies the destination URL
- Use target='_blank' to open links in a new tab, always paired with rel='noopener noreferrer'
- Anchor links (href='#id') jump to a specific section on the same page
- The <img> element is self-closing and requires both src (file path) and alt (description) attributes
- Write descriptive alt text — it is critical for accessibility and displayed when images fail to load
- Wrap <img> in <a> to make it clickable; use <figure> and <figcaption> to add a caption
Quick Quiz
1.Which attribute on the <a> element specifies where the link goes?
2.What does target='_blank' do on a link?
3.Why is the alt attribute on <img> important?
4.How do you create an anchor link that jumps to a section on the same page?
5.Which HTML structure adds a caption below an image?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx