Images – for bloggers, are one of, if not the most important part of what we do. We deal with images on the web on a daily basis so it’s important to know how they work with HTML.
In HTML, images are referenced by the img tag. Images are technically not part of your HTML code which is why the img tag has to include two attributes: src and alt. The src attribute is how you reference the image – “src”, source – get it? This tells the browser where the image you’re trying to reference is.
The “alt” attribute or alternate text, replaces the image with text in case the image cannot be seen. This is very useful for those who surf the web with a screen reader such as the visually impaired.
Let’s see the img tag in action, shall we? The area you can change is in light grey.
Let’s imagine that you’re trying to include an image of red flowers on your page, the above code would display that image. You can choose whatever text you want for the alt attribute, I always try to make sure I’m as descriptive yet concise as possible.
* You may notice that the img tag is different because it’s not between <> and </>, it’s one of the rare tags that doesn’t need both tags, just < / > will do.
BONUS TIP Although not mandatory, the size attribute is extremely useful. You can define the width and height of your image within the img tag. Doing so will help the browser load your image faster and when it comes to the web, faster is always good. For example :
The areas you can change are in light grey! To learn more about the img tag, click here.