The ability to add images to webpages was in the very first HTML specification. That's how important it is. The best part is that adding images is both important, and easy. What a great combination!
When we bring an image into an HTML document, we’re essentially telling the
browser where to find it so that it can be displayed. We do this by adding some
more information into the HTML tag, and, when it comes to images, the tag we
want to use is the
On the left you will see the following code:
On the right, you see our logo. This tag has something you've never seen before:
an attribute. The image tag has one attribute called the
src attribute. To
load an image, we set the
src attribute to equal the URL (wrapped in quotation
marks) of the image we want. In this specific case the URL is:
If we wanted to change the image to something else, we just need to change the URL to be a different image. Here is another URL to use:
Go ahead and change the HTML code to use this new URL like this:
You should now see our circle logo instead of the full logo. Congratulations!
You now know how to add images to websites using the
img tag with a src
Some HTML tags have extra information or instructions embedded in them, which we
call attributes. We use the src attribute in an
img tag to point the browser to
the location of an image we want to display.
Next, we’ll take a look at one of the other most-used HTML tags: the link tag.