Now that you've learned how to use HTML headings, HTML paragraphs, HTML lists, and strength & emphasis in your blog posts, you should be quite comfortable with the HTML that makes up most of your blog posts.
But, I bet you've been wondering, what's up with images? Today we're going to talk about them!
Images are Different
In the previous installments of this series, I've encouraged you to write your HTML elements "by hand", without relying on your blog's automation features.
Images are different, though. You should use your blog's built-in uploader to add images to your posts. The image uploader adds your image to your blog's file system and generates the HTML to make the images appear in your posts. All that in one step! This is much more efficient than creating image elements manually with HTML.
So, rather than show you how to make an image element from scratch, I'll show you what's inside the image elements your blog makes for you.
The Anatomy of an Image Element
If you look at the HTML view of one of your posts, you won't see any photos. Instead, you'll see the HTML that adds your image into your post.
Depending on your blogging platform, that HTML might be a single line of markup or a paragraph-length block of text. Let's start with the basics of what makes up an image element so you can recognize one when you see one. Then, I'll explain all the extra stuff you may see in your images' HTML.
Here's what an HTML image element looks like at its absolute bare minimum:
<img src="http://www.example.com/image.jpg" alt="description">
And here's what all those pieces mean:
- IMG stands for "image". This lets the browser know that it's an image element.
- SRC stands for "source". The source is the URL for where your image is stored in your blog's file system. When you upload your image through your blog's post editor, the source is automatically filled in for you with your image's URL.
- ALT stands for "alternate text". An image's alt text describes the image for users with visual impairments. For more detail on alt text, see All About Alt Text.
If you've been following along with this HTML series, you may have noticed that there's no closing </img> tag like in other HTML elements. Good catch! The <img> element is one of the few HTML elements that don't have a closing tag.
Now, like I said, that's just the bare minimum HTML for an image. Let's look at a more detailed <img> elements.
Clickable Images
In this next example, the image element is wrapped with an <a> anchor element with an href attribute, better known as a link. The link wrapped around the image element makes the image "clickable". This clickable image would take the reader to a larger version of the photo when the photo is clicked.
<a href="http://www.example.com/larger-image.jpg"><img src="http://www.example.com/image.jpg" alt="description"></a>
Notice the </a> tag after the end of the image element? That closes the link.
Changing the Link
Usually, clickable images in blog posts are automatically linked to a larger version of the photo. But, if you want to link to something else, you can change the anchor link. For example, if you want to link an image to another blog post, you can change the URL after href, like this:
<a href="http://www.example.com/a-different-blog-post.html"><img src="http://www.example.com/image.jpg" alt="description"></a>
The image still looks the same, but now when it's clicked your readers will go to another blog post instead. You can use this same technique to link to anything else on the web, including other websites, of course!
Opening in a New Window
I'm not a big fan of opening new windows for users without warning, but that's just my personal preference. If you'd like an image to open in a new window when it's clicked, you can add target="_blank" to the link URL, like this:
<a href="http://www.example.com/a-different-blog-post.html" target="_blank"><img src="http://www.example.com/image.jpg" alt="description"></a>
That will open the link in a new window. Use with care, lots of people don't like new window surprises!
Common Attributes for Images
Many blogging platforms insert useful attributes into an <img> element. This information helps your images load faster and provides important information for your readers and search engines. Here are the attributes you may see when you view the HTML of your blog images.
Width and Height
Specifying the width and height of your image helps speed up your page load time because it lets the browser know exactly how much space an image needs, even before it loads.
Most blogging platforms automatically include your width and height information for you. They'll appear in the HTML for your image like this:
<img src="http://www.example.com/image.jpg" alt="description" height="500" width="500">
Technically, you can resize images by changing their width and height attributes in HTML, but it's not the ideal way to handle images sizes. There's a good article on why not to resize with HTML at About.com.
Alt
You may have noticed that I'm including an alt attribute with every image element example, including the "bare minimum" example. The alt attribute is that important.
Accessibility advocates and the W3C, the rulemakers of HTML, encourage us to include alt attributes for every image. For purely decorative images that would have no importance to readers with visual impairments, you can leave the alt attribute blank, like this: alt="". That tells screen readers to ignore the image.
Title
If you add a title attribute to your image element, your users will see the title as a "tooltip" on their cursor when they hover their cursor over your image. Give it a try, hover over this image:
A title attribute is intended to provide "advisory information" about an element. For images, good examples of advisory information are the name of the artist or photographer that created the image, copyright information, or the official title of an artistic work.
You can add a title attribute to an image like this:
<img src="http://www.example.com/image.jpg" alt="description" title="advisory information">
Titles are not required and do not replace alt text. When in doubt, just fill in the alt text and leave the title off.
Class
Adding a class attribute to an image is useful for CSS styling purposes. There are about a million different things you can do with CSS, but I'll show you one quick example just for fun.
I'm going to give this image the class of "rotate", then give it some instructions with CSS. Give it a try, hover over this photo with your cursor.
Did you see it move? That's the CSS rotate property at work! The CSS rules for that need a tutorial all of their own, and you can find a good one at http://davidwalsh.name/css-transform-rotate
Here's how you add a class to an image attribute:
<a href="http://www.example.com/larger-image.html"><img src="http://www.example.com/image.jpg" alt="description" class="rotate"></a>
Putting it All Together
Here's an example of the HTML markup for a clickable image with all of the attributes mentioned in this post. This may have looked like a big bowl of alphabet soup to you before, but I bet it makes a lot more sense now!
<a href="http://www.example.com/larger-image.html"><img src="http://www.example.com/image.jpg" alt="description" title="advisory information" width="500" height="500" class="rotate"></a>
Now that you're familiar with the working parts of an image element, you can confidently customize and alter them as needed to suit your posts.
What's Next?
You're almost done! Learn about a few more handy elements in Practical HTML for Bloggers - The Extra Elements
Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.
Photo by me, CC-BY-SA
