HTML & CSS · Quick Reference

Lesson 3 — Links, Images & Media Cheat Sheet

HTML & CSS

In one line: The <a> (anchor) tag creates hyperlinks. The href attribute specifies the destination. Links can go to: external websites, other pages on your site, sections within the sa...

Key Ideas

1Anchor Tags — The Link Element. The <a> (anchor) tag creates hyperlinks. The href attribute specifies the destination. Links can go to: external websites, other pages on your site, sections wit...

2Relative vs Absolute Paths. Understanding file paths is essential for linking pages and embedding images correctly. Absolute paths are full URLs. Relative paths are relative to the current file's...

3Images. The <img> element embeds images. It's a void element — no closing tag. The src (source) and alt (alternative text) attributes are both essential — alt is require...

4Video, Audio & iframes. HTML5 introduced native <video> and <audio> elements — no plugins required. For YouTube/Vimeo embeds, use an <iframe> with the platform's embed URL.

Code Examples

<!-- External link — opens site in same tab -->
<a href="https://bitwithbite.com">Visit BitWithBite</a>

<!-- target="_blank" opens in new tab -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  G...

my-website/
├── index.html
├── about.html
├── style.css
├── images/
│   ├── logo.png
│   └── hero.jpg
└── courses/
    ├── python.html
    └── html-css.html

From index.html:
  <img src="images/logo.png">     ← correct
  <a href="cours...

<!-- Basic image -->
<img src="images/hero.jpg" alt="Students studying at BitWithBite">

<!-- With dimensions (prevents layout shift) -->
<img src="logo.png" alt="BitWithBite logo"
     width="200" height="60">

<!-- Lazy l...