Add An Image

Let’s add an image, we’re going to add a picture of Larry, since it’s his page after all. But you can add a picture of yourself, your pet or anything you can think of.

To add our image, we’re going to use an <img> tag. <img> tags belong to a special group of HTML tags called self closing tags. These, as you’ve probably guessed, don’t have closing tags. Instead, we use attributes to tell our <img> tags the information they need to display properly.

  <img src="http://placekitten.com/200/300" alt="super cute kitten">

This is an image that will display a picture of a very cute kitten. The src attribute is how we tell our <img> tag where to find the image it will display. If for whatever reason, our image doesn’t load properly, the alt text will be displayed.

The alt attribute is also REALLY important for accessibility. If someone who uses a screen reader visits your website, the alt text is read, so always remember to add an alt tag and describe your image.

Enough chit chat, let’s add this image already. We want to include an image tag in the <header> block. Let’s put it right above your <h1> tag.

  <header>
    <img src="https://bit.ly/larry-the-duck" alt="Profile Picture">
    <h1>Larry Ducksworth</h1>
    <p>312 Farmhouse Lane, Quacksville, Newfoundland, A1B 2C3</p>
  </header>

If you want to display a picture of someone or something OTHER than Larry, simply change the src attribute on your <img> tag. Can’t think of an image? Here are some fun sites that will provide links to some great images:

Place Cage Fill Murray Place Kitten

Once you’re happy with the image you’ve chosen, give profile.html a save and refresh your page. Tada!

Congrats! Your webpage is looking great. Up next, we’re going to customize our fonts, colors and the look and feel of our page using CSS.