How to Add an Image to Your HTML5 Web Page - dummies

How to Add an Image to Your HTML5 Web Page

By Andy Harris

Web pages are capable of far more than text, and if you build your web page with HTML5, you can add images in a variety of file types, including .jpg, .gif, and .png. The figure shows a web page with an embedded image; the code that follows shows you the page’s code.


<html lang = "en">
  <meta charset = "UTF-8" />
  <h1>Image Demo</h1>
    <img src = "monkey.png"
         alt = "Picture of a happy monkey" />
  <h2>This page has a picture of a monkey</h2>
    This monkey is called 'Suzanne.' It's a default 
    object in an incredible free 3D modeling tool
    called 'Blender.'

Adding an image is relatively easy; just follow these steps:

  1. Identify the image you want to use.

    Be sure you have permission to use the image on your site.

  2. Modify the image if necessary.

    It’s best to resize your images before you use them on the web. You can use commercial image-manipulation software or free programs such as IrfanView and Gimp.

  3. Choose your image type.

    If your image is in a format other than web-friendly .jpg, .gif, or .png, use a tool like IrfanView or Gimp to change it to one of these formats.

  4. Put your image in the right place.

    Put your image file in the same directory as the HTML file. That way, when you post your page to the server, you can move the image as well.

  5. Build your page as normal.

    The image will be placed with a tag embedded into the body.

  6. Use the <img> tag to indicate the image.

    Embed this tag inside a <p></p> (paragraph) or <div></div> (division) pair so that the page validates correctly.

  7. Use the src attribute to indicate the file containing the image.

    If the image file is in the same directory as the web page, all you need is the name of the image. If the image file is elsewhere on the Internet, you can use a complete URL.

  8. Include an alt attribute that describes the image.

    An alt tag is important for visitors who cannot see your image — users with visual impairments, people who have turned off images to increase browsing speed, and search engine bots, which can’t see the images but read alt tags.

  9. End the image tag with a /.

    The img tag is a special one-shot tag that doesn’t require (or allow) an end tag. The slash character at the end of the tag indicates this.