ImagesS2C Home « Images

Although the majority of a web page is informational text, images really improve the look of a web page. So liven up your web pages with images and see how well placed images can really enhance a web page.

Basic image use is the topic of this lesson and the practical sees us adding some imagery to our web page.

The Image Element

The <img> tag is a self closing tag used to create an area on the page to hold the referenced image.

The src and alt attributes are mandatory when using the <img> tag.

Although not mandatory its good practice to get into the habit of also including the width and height attributes when using the <img> tag to avoid flicker on page load.

Creating A Webpage

Lets create a webpage for our image tag to see what it does!

  1. HTML Editor

    1. Open up your HTML editor or text editor, which in my case is Notepad++.
    2. Open a document if required.
    3. Copy and paste the following code into the document.
    
<!DOCTYPE html>
<!-- Introduction to Semantic Tags -->
<html lang="en">
  <head>
    <title>
      HTML Semantic Tags
    </title>
  </head>
  <body>
    <h2>Wow That Pie Looks Good!</h2>
    <p>Nothing Beats Chicken pie</p>
    <img src="http://htmldoctor.info/images/chickenpiesmall.webp"
         alt="Chicken Pie"
         width="150" 
         height="100">
    <h2>More Image Attributes</h2>
    <p>Well A Bigger Chicken Pie Might!</p>
    <img src="http://htmldoctor.info/images/chickenpiesmall.webp"
         alt="Same Image But Bigger" 
         width="300" 
         height="200">
  </body>
</html>

  2. Saving the document

    Save the file as imagetag.html

    save image tags
    Screenshot 1. Saving the imagetag.html HTML file.

  3. View Page in Web Browser

    Either navigate to the location you saved the formattags.html file to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.

    After doing either of these you should see a similar webpage in your browser to the following screenshot:

    view image tags
    Screenshot 2. Viewing the imagetag.html HTML file.

    Ok there's a lot going on here so lets go through the attributes and what they do.

    Mandatory Attributes We Used

    The src attribute is mandatory whenever using the <img> tag and specifies the URL of the image (the actual location where the image is stored).

    The alt attribute is mandatory whenever using the <img> tag and specifies an alternate text for the image (provides information if the image cannot be loaded).

    Optional Attributes We Used

    In the screen image above we used the same image but it appears in two sizes.

    The width attribute is optional when using the <img> tag and specifies the width of the image (you can make the image narrower or wider).

    The height attribute is optional when using the <img> tag and specifies the height of the image (you can make the image taller or shorter).

    For a complete list of all the attributes available use the HTML5 Reference section.

Lesson 8 Complete

In this lesson we learned about how to add imagery to our web pages using the <img> tag and some of its attributes.

Related Tutorials/Quizzes

HTML5 Intermediate Tutorials - Lesson 7 - Image Flexibility

HTML5 Advanced Tutorials - Lesson 3 - Interactive Images

Images Quiz

What's Next?

In the next lesson we learn how to get from A to B using links.

HTML5 Reference

The <img> image tag