If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Once you understand links, adding images to your pages is straightforward.

Images differ from headings and paragraphs because they are separate files that you embed in your HTML using the <img> element. Here’s an example:

<p>
  Example of an oscilloscope image:
</p>
<img src="oscope.gif" alt="A cartoon of an oscilloscope">

To try this example, you need both the HTML code and the image file “oscope.gif” saved in the same folder as your test page. If you’re unsure how to save an image from the web, see “Save Images”.

The <img> element has two required attributes:

• src: the URL or file path to the image. If it’s missing or incorrect, the image won’t appear. Conceptually, src is similar to the href attribute used for links.

• alt: alternative text that describes the image. This appears if the image cannot be displayed, for example if the file is missing or if a user relies on a screen reader. While some browsers show alt as a tooltip, the correct way to provide a tooltip is with the optional title attribute.

Images are separate files and come in formats like GIF, JPEG, and PNG. You can acquire images by:

• Taking a photo with a digital camera
• Creating a digital image using drawing or design software
• Downloading images from the web (using your browser’s Save Image function)

Floating Images

Positioning elements in HTML can be tricky. One common technique is floating an image to allow text to wrap around it using the float property:

<h1>Oscilloscope Overview</h1>
<img src="oscope.gif" height="64" width="90" alt="Right-floating oscilloscope" style="float: right">
<p>
The <b>Model XJ-2000</b> delivers unmatched performance and quality. From its scratch-resistant chrome case to the innovative green phosphorescent screen, it sets a new standard. Text flows naturally around the image thanks to the float property.
</p>

The float: right style removes the image from the normal page flow and moves it to the right, allowing surrounding text to wrap around it. Similarly, float: left floats an image to the left. You can apply float to most elements - we’ll explore this more in later sections.