HTML Lesson 4: How to Insert an Image in HTML

As you recall from Lesson 1 (What is XHTML?), adding a paragraph in XHTML is as simple as wrapping text in <p> and </p> tags. Adding an image, however, is a little more complicated.

Follow Along

Before we continue, I encourage you to follow along by copying and pasting today’s code into your own XHTML document (or the page we created in Lesson 2: How To Create and Save Your First XHTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability.

A Funny Dog

How to Insert an Image in XHTML

Let’s pretend we have an image of a dog on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:

<img src="funny-dog.jpg" />

Let’s analyze this code. First, <img> is the code for creating an image element. Next, the letters “src” are used as an attribute (which you learned about in Lesson 3: Attributes and Values) and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your XHTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:

<img src="images/funny-dog.jpg" />

Self Closing Elements

As you can see, in both code examples so far there has not been an ending </img> tag, because the image code is a “self closing” element. This is because unlike a paragraph, we won’t have a plethora of content inside our <img> element, but rather a single image. The /> at the end of the code tells the web browser to end the image element.

There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:

<img src="funny-dog.jpg" alt="A funny dog sitting on the grass. " />

How to Insert an Image in XHTML

That’s it!

This entry was posted in HTML Lessons. Bookmark the permalink.

5 Responses to HTML Lesson 4: How to Insert an Image in HTML

  1. Theo says:

    Thanks for your help! I’m still struggling with the editing of a theme, but this helped me with imgs.

  2. Dan boxall says:

    Hiya thanks for the tutorial. One question, how can I change the size of the images? I just put one on and it’s massive!

  3. Ena Gabog says:

    Is this theme for free? I want this theme too! BTW. Thank you for your blog.I learn a lot from it!

  4. Aruna says:

    These lessons have been so helpful cause I am learning how to design a website.
    Thanx

  5. Makoi Majak says:

    Sure, it did work. I love it.
    Thanks you so much!!!! Keep up Serving!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>