Html Images Overview

Getting Started

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.

What We’ll Cover

  • <img tag
  • tag attributes

Images in HTML

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 img tag.

On the left you will see the following code:

<img src="https://curriculum-content.s3.amazonaws.com/web-development/FIS_New_Logo.png">

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:

https://curriculum-content.s3.amazonaws.com/web-development/FIS_New_Logo.png

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:

https://curriculum-content.s3.amazonaws.com/web-development/circle_logo.jpg

Go ahead and change the HTML code to use this new URL like this:

<img src="https://curriculum-content.s3.amazonaws.com/web-development/circle_logo.jpg">

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 attribute.

Summary

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 browswer to the location of an image we want to display.

Key Terms to Review

  • attribute

Resources

What’s Next

Next, we’ll take a look at one of the other most-used HTML tags: the link tag.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us