WebCodeFun

Beginner's HTML Course

Introduction to the <img> element in HTML

This tutorial will build on the opening header for our pizza sauce web page and show how to add an image. We will also spend some more time exploring attributes and explaining which ones we have to complete for our image element.

YouTube Video

Written Guide

Contents

Add the <img> image element

The image element, shortened to <img> in HTML, embeds an image into the document. We will use it to add an image to the web page we have been building in this tutorial series so that visitors can see how lovely our pizza will be.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img>
</body>
</html>

In the previous tutorial, we introduced self-closing tags, and the image element is another one of these. Self-closing tags, or void elements as they are also known, do not have a closing tag.

For example, adding the </img> tag to the image element would be incorrect. If you recall, we do not need a closing tag as we will never add content outside of the attributes, i.e., we will never wrap the content to form the element.

All the information we require is contained within the attributes inside the tag. Don’t worry if this sounds confusing. I will clearly explain it by the end of this tutorial.

So, we have our image element self-closing tag. Next, we need an image to put on our page.

Add an image for a web page

We will create a folder in our root directory and call it ‘images’. We will use this folder to store any images we will use on our website. Using a structured folder system helps to keep things tidy. Doing so from the beginning will aid us when we start to make larger websites, which can quickly become messy to manage.

I downloaded a picture from Unsplash. You can download pizza image if you would like to use the same one, or you can choose a different image.

Place the pizza image in the newly created images folder. Now we can access this image to use it on the web page. I have given the image file a descriptive name of pizza-mozarella-tomato-basil.jpg, using hyphens to space out the words. The descriptive name will aid us with our SEO, but we will cover that in the SEO tutorial series.

Add the src source attribute

Going back to our code for the index page, we need to tell the element what image file to use. To do this, we use the ‘src’ attribute, which is pronounced ‘source’ and contains the path to the image we want to embed. We add the path to the image inside this source attribute.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" >
</body>
</html>

In the previous tutorials of this beginner’s course, we have already used attributes and spoken a bit about them. We’ll add a couple more attributes to this image tag, and then we’ll explain how they work in greater detail to ensure we understand them fully.

If you go to the browser and hit refresh, you will see the image has appeared. You will also see a problem! The image is enormous!

Resize an image

We could solve this by resizing our image file directly. However, we want it to be a decent size later on, as we will resize it depending on what device our visitor is using, such as a mobile phone or a high-resolution monitor, for example. To fix this, we need to tell the browser what size we want the image to be. In our CSS beginner’s course, we will do this in a much more elegant way, but we will use the width and height attributes in the image element for now.

We will give it a width of 500px and a height of 375px. Using these values keeps the aspect ratio of the original photo, preventing any morphing. We can specify the size here in pixels or as a percentage.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" >
</body>
</html>

If we refresh our page, we have an image that’s a much better size.

Note, this is a straightforward way of resizing an image and is not how we will do it once we have learned how to use CSS. For now, it helps us to understand how to use HTML, but in the next course, we will use CSS to improve significantly on this method.

Add alt alternative text attribute

The final attribute we want to enter for our image is the alternative text attribute, which we spell as ‘alt’. The ‘alt’ attribute provides a text description of the image. It is essential for accessibility as screen readers will read this description out, so the visitor knows what the image is or its purpose.

‘Alt’ text is also displayed on the web page if the browser cannot load the image for some reason. Let’s give our ‘alt’ attribute a value.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." >
</body>
</html>

Attributes explained

Now we have added a few attributes to our image tag, let’s explore how attributes work in more detail. An attribute contains information about the element. It must have a space between the attribute name and any other attribute or the element name.

An equal sign and its value follow the attribute name in opening and closing quote marks. There are occasions where you can skip the value, but we’ll cover that later. You can use single or double quotes to wrap the value text. You cannot mix them, however. Generally, it is common practice to use double quotes.

Whatever choice we make, we can then add the other type within the text. Of course, if we try to add the same quote in the text, it will assume we are closing the value. We are more likely to want to add a single quote inside the value text than a double quote, and to ensure our code remains consistent and easy to read, we should use the same formatting rules consistently. A switch in format should be the exception, not common practice.

HTML entities explained

Let’s use this as a chance to discuss HTML entities, as we can use these to overcome our quotation problem. Certain characters are part of the HTML syntax and can cause problems when used in a place where the browser interprets them as a part of the markup language. Here are five characters we need to remember. They are 'greater than', 'less than', 'quote', 'apostrophe' and 'ampersand'.

There are more, and knowing how to resolve them is important, but by learning the principle using these five, we know we can solve other similar issues should they arise in the future. To display these within our web page, we use an HTML entity. All references follow the same format of starting with an ampersand symbol and ending with a semicolon. In the middle is an abbreviated description.

Useful resources

Need help?

If anything is unclear, please do get in touch by contacting me. In our next lesson in this beginner’s HTML course, we will add a table to the web page for our sauce ingredients. Thanks for reading.

Back to top