Follow along as we learn about adding images to web pages with HTML.
Adding Images to Your HTML
There are a couple of reasons for adding images to your HTML. One reason is that you would like to add an image for decoration. This means that if you took it off the page, the user would still be able to use and understand the page fully, because the image isn't adding any information they won't have otherwise. The other reason is because you have images that are necessary content, and if you remove them from the page the user would be lost or missing needed information.
Images have two required attributes: src, which tells the browser where the image is and should use a relative link, and alt, which uses text to describe the image so that you could imagine what it looks like if you can't see it. Remember that if your image has any text in it, you have to include that in the alt text. It is also important to add the height and width attributes, as it improves the way your page looks as it loads. Ensure that those attributes are taken from the image, after editing and saving it at the correct size. Not respecting the aspect ratio will make your images look distorted on the screen.
<!-- Basic Image Tag Syntax -->
<img src="images/image-name.png" alt="image description" width="100" height="100">
✱ Adding Decorative Images to HTML
As explained above, a decorative images is one that if you took it off the page, the user would still be able to use and understand the page fully, because the image isn't adding any information they won't have otherwise. When adding these in your HTML, you indicate that they are decorative by leaving the alt text attribute empty. You can't leave the alt attribute off completely, just blank. Generally though, you'll add decorative images using CSS.
<!-- For Decorative Images, Leave alt Blank (or use CSS) -->
<img src="images/image-name.png" alt="" width="100" height="100">
✱ Adding Informative Images in HTML
For images that are content, and necessary for understanding the page (think products, maps, etc.) you cannot leave the alt text blank, and should use it to describe the image to the best of your ability. These should also use width and height attributes that come from the edited image itself.
<!-- For Informative Images, Describe the Image with alt Text -->
<img src="images/image-name.png" alt="useful image description" width="100" height="100">
Photo by Uwe Conrad on Unsplash
✱ Adding Functional Images to HTML
Functional images are used in place of text. Think of a search button or home link. For these, the image's description isn't important, but the text that would tell the user what happens when they click the link. We can use an aria-label attribute on the link to add the text that would normally be shown in the link. We'll practice this with the SVG in the next section.
<!-- For Functional Images, Leave the alt Text Blank, But Include an aria-label -->
<a href="index.html" aria-label="Go to the home page">
<img src="images/image-name.png" alt="image description" width="100" height="100">
</a>
Using SVGs in HTML
There are a few ways that you can add an SVG to your page with HTML, and today we'll practice pasting their code directly into our HTML. You can also use a link to the file as the src for an image tag, but pasting the code allows us to do more with CSS later. Vector images are best for graphics, because they are defined with math, and will display perfectly at any size, which saves time when they load on the page.
We are going to paste SVG icons for Facebook, Instagram, and YouTube into the footer below to practice this. Notice that I have added an aria-label attribute to the links wrapped around those icons. It is used when there isn't any link text, like when you wrap a link around the image.