Imagine how dull the web would be without pictures.

Photos and images are a cornerstone of building exciting, beautiful web pages.

So we're going to look at the image tag, the tag that allows you to add photos and

images to web pages.

Let's start by looking at this image tag in the header of our profile page.

If you don't have a workspace open and

wanna follow along, click the launch workspace button.

Most HTML tags can have additional information

called attributes added to them.

An attribute provides instructions for the browser.

For example, this tag has three attributes.

Source, alt, and class.

We've already seen the class attribute a few times before.

You can use it to create CSS styles that control how the element

appears on the page.

And by the way,

when web develops say HTML element, they simply mean any HTML tag on a page.

The image tag is a good element to start learning about attributes

because it needs two of them.

The source attribute and the alt attribute.

The source attribute points to a file path,

to the location of the image file on your site.

In our case, the image is in this folder called images.

And image itself is called me.png.

If you look over here in our Images folder, you can see that image right here.

So if we change the file path to the other image in this folder, Portland.jpg.

And save, and refresh the example project, you can see that this tag is now

pointing to the picture of the steel bridge here in Portland.

The same image as our header background image.

You can also link to what's called an absolute URL.

A full web address that links to an image that's outside of your website.

Let's replace this image with a place holder, so we can see how that works.

I'm going to go to a place holder image website called placeimg.com.

This is a really useful website that provides you with the URL that

will load a random image onto your page each time your website loads.

In these boxes, enter a height and width of 400 pixels.

And you can choose any category you like, but

I'm going to choose people to get random images of people.

Now we can copy this URL up here, and

paste it into our source attribute on the image tag, in between these quotes.

Save, refresh, and

now you can see every time we refresh the page, we get a new placeholder image.

This really comes in handy when laying out pages and need an image on the fly, for

those times when you don't have an image yet or haven't quiet decided on one.

Let's move on to the Alt tag.

Alt here is short for Alternative text.

You should always put a precise description of your image into your

Alt attribute.

This is what visitors to your website will see if the file path cut to image is

somehow broken or if the image isn't available.

This text is used by search engines and screen readers too.

It enhances accessibility for the visually impaired and other people who use tools

called screen readers that read out the text on a web page.

If someone using a screen reader visits your site,

the alt text will tell them about the image.

One last thing I'd like to mention about image tags.

Notice that the image tag has no closing tag.

Tags that don't need to be closed are called self closing tags or

empty elements.

There are only a few of these self closing tags,

like the link tag we talked about in the last video.

You'll learn which tags are self closing as you get more and

more familiar with HTML.

But the majority of HTML elements will need to be closed.