Links and images
<a href="url">text</a> makes a link. <img src="url" alt="description"> shows an image. Links can go to other pages or to a place on the same page.
Appy Says…
Links and images are literally what makes the web the web. Without <a> tags, there are no hyperlinks — no way to navigate between pages. Without <img>, there are no pictures. Two tags, infinite possibilities.
What are Links and Images?
The <a> (anchor) tag creates clickable links. The <img> tag embeds images. Both require key attributes to work correctly.
- •
<a href="url">Click me</a>— link to a URL - •
href="#section-id"— jump to element on the same page - •
target="_blank"— open in new tab - •
rel="noopener noreferrer"— security best practice with_blank - •
<img src="photo.jpg" alt="description">— self-closing tag - •
altattribute — text shown if image fails to load; required for accessibility - •
widthandheightattributes — prevent layout shifts while loading
Think of it like a portal in Minecraft
Links are like Nether portals — step through and you're transported to another location. The href is the destination. target="_blank" means a new portal opens instead of replacing the current one.
How It Works
- •1.
<a href="https://example.com">Visit</a>— wraps content in a clickable link - •2. Relative links:
href="about.html"— links to a file in the same folder - •3.
href="#contact"— scrolls to<section id="contact"> - •4.
<img src="logo.png" alt="Company Logo" width="200"> - •5. Images are inline by default — use CSS
display: blockto put them on their own line - •6. Prefer modern formats:
.webpis smaller and faster than.jpg
Real-World Examples
- •Navigation bar:
<a href="/home">,<a href="/about"> - •Social share button:
<a href="https://twitter.com/..." target="_blank"> - •Profile photo:
<img src="user.jpg" alt="Profile photo of Appy"> - •Clickable logo: wrap
<img>inside<a href="/"> - •YouTube thumbnails are
<img>tags wrapped in<a>tags
Key Facts
- •Always include
alton images — it's legally required in many countries for accessibility - •Using
target="_blank"withoutrel="noopener"is a security vulnerability (tab-napping) - •Lazy loading:
<img loading="lazy">defers off-screen images — speeds up page load - •
<img>is a void element — it has no closing tag
Watch Out!
Never skip the alt attribute on images. <img src="hero.jpg"> without alt breaks screen readers and fails accessibility audits. Write meaningful alt text describing what the image shows: alt="Student coding on a laptop".
Remember
Links need href. Images need src and alt. Always add rel="noopener noreferrer" when using target="_blank".
What You Learned
- •
<a href>creates links;<img src alt>embeds images - •Always include
alton images; userel="noopener"withtarget="_blank" - •Unlocks: navigation, image galleries, clickable cards, entire web page structure
Key Facts
- →Always include
alton images — it's legally required in many countries for accessibility - →Using
target="_blank"withoutrel="noopener"is a security vulnerability (tab-napping) - →Lazy loading:
<img loading="lazy">defers off-screen images — speeds up page load - →
<img>is a void element — it has no closing tag
Real-World Examples
Remember
Links need href. Images need src and alt. Always add rel="noopener noreferrer" when using target="_blank".
Quick Quiz
Which attribute holds the URL in a link?