mc0de

images

05
HTML Fundamentals

Images

Bring your webpages to life by adding images, descriptions, and controlled dimensions.

HTML Beginner
<img
  src=“photo.jpg”
  alt=“Mountain view”
>

>_ Adding Images to HTML

Images can make a webpage more informative, engaging, and visually interesting. HTML displays images using the <img> element.

Unlike many HTML elements, the <img> element does not wrap around content and does not require a closing </img> tag.

src

Image Source

The src attribute tells the browser where the image file is located.

alt

Alternative Text

The alt attribute describes the image when it cannot be seen or loaded.

width

Image Size

Width and height can control the displayed dimensions of an image.

>_ Your First Image

At minimum, an image normally needs a src telling the browser what image to load and meaningful alt text describing the image.

image.html
<img
  src=“https://picsum.photos/500/300”
  alt=“A sample landscape photograph”
>

>_ Understanding src

The src attribute contains the path or URL of the image the browser should display. Images can come from your own website or from another online location.

images/photo.jpg

A relative path pointing to an image stored within your website.

https://example.com/photo.jpg

An absolute URL pointing to an image hosted online.

src

Tells the browser which image resource should be loaded.

alt

Provides a text alternative when the image is unavailable or cannot be seen.

>_ Why alt Text Matters

Alternative text helps make images accessible to people using screen readers and can provide useful information if an image fails to load.

alt-text.html
<img
  src=“mountains.jpg”
  alt=“Snow-covered mountains beneath a blue sky”
>

>_ Controlling Image Size

The width and height attributes can specify image dimensions in pixels.

image-size.html
<img
  src=“photo.jpg”
  alt=“Ocean at sunset”
  width=“400”
>
🖼️
Remember

Don’t use alt text such as "image" or "picture". When an image conveys meaningful information, describe what the image communicates.

Ready to Code?

Let’s build a mini photo page.

Add an image, give it meaningful alternative text, and experiment with its displayed width.

⚡
mC0de Challenge

Build a Mini Photo Page

Create a simple webpage featuring an image and a short description.

  • ✓ Add an <h1> titled My Photo Page.
  • ✓ Add an <img> element to the page.
  • ✓ Give the image a working src.
  • ✓ Write meaningful alt text.
  • ✓ Set the image width to 400.
  • ✓ Add a paragraph beneath the image describing it.
💡 Experiment! Try changing the width after completing the challenge and watch the image resize.
>_ Challenge accepted. Build it below.
>_
mC0de Interactive Sandbox

Images Challenge

Live Preview
photo-page.html
HTML Input EDIT
Live Result PREVIEW
💡 Try changing 400 to 200 or 500 and watch the image resize instantly.
✓
Lesson 05 Recap

What You’ve Learned

✓ How to add images using <img>.
✓ How src tells the browser which image to load.
✓ Why meaningful alt text matters.
✓ How to display local and remotely hosted images.
✓ How the width attribute changes an image’s displayed size.
✓ That <img> does not require a closing tag.
Picture perfect! Your webpages can now display meaningful, accessible visual content.
🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Lists HTML & CSS Home Next Lesson → Styles