HTML Tags – Part 4: The HTML Image Tag

Do you hate viewing paragraph after paragraph of information without seeing images to break up the content? If so, then chances are your audience will feel the same. As you create your site, make sure to add images that’ll complement your content.

HTML Image Tag

HTML Tags – Part 4: The HTML Image Tag

We are visual beings by nature and enjoy seeing things that look pretty or interesting. When you’re writing high-quality content, make sure to include imagery that corresponds with the information you’re providing.

How do you add images to your site? The HTML image tag, <img />, adds an image of your choosing in the contextual area of your website. This means you can place an image that’ll go with the article or post you’ve written, in the header (top section of your site), the sidebar (left or right side of your site), or footer (very bottom area of your web page).

Can I use this tag to place images in the background of my site? No. The HTML method for adding images to the background requires that you use an attribute within the <body> tag (<body background=”imagepath/imagename.jpg”>) and that method has been deprecated. The current method is to use CSS coding which you can find in my article entitled Learn CSS Part 5: CSS Background Image.

HTML Tags – Part 4: Required HTML Image Tag Attribute

Similar to the HTML Anchor Tag, there is one required attribute that the <img /> tag needs in order for it to function. The src or source attribute is needed in order to locate the image that is to be displayed. As you’re creating your website, make sure to upload all of the images you want to be seen to your hosting provider. To see an example of the <img /> tag and the src attribute in action, take a look at the screenshot below in Adobe Dreamweaver.

HTML Image Tag - Source Attribute

That’s all there is to it. What you want to do is make sure the path to the image is placed between double quotes.

HTML Tags – Part 4: Other HTML Image Tag Attributes

There are four other attributes that are commonly used with the <img /> tag. Each one requires a value that should be placed between two double quotes.

Alt Attribute

The alt attribute is used when your image doesn’t show on the page. This attribute requires a verbal explanation of what the image is, placed between two double quotes. Below is how it looks:

<img src=”hat.jpg” alt=”This is a photo of a hat.” />

If I uploaded the image and made sure the path is correct, why wouldn’t my image show? Sometimes your browser may not read the contents of your site correctly or your hosting provider may shut down for a spell. This doesn’t happen a lot but it’s wise to use this attribute in all of the images you add to your page.

Title Attribute

The title attribute brings up a mini dialog box that has a description of the image when you roll over it. The difference between the title attribute an the alt attribute is that the dialog for the title attribute will show up whether the image appears or not. Take a look at how to use this attribute below:

<img src=”hat.jpg” title=”This hat would look great on you!” />

You can see an image of this in action in my article entitled Other HTML Anchor Tag Attributes.

Width & Height Attributes

Every image has a width and height and even though browsers nowadays will display them correctly, there’s always a chance that only a part of it will display. Using the width and height attributes will make sure your image comes out properly:

<img src=”hat.jpg” width=”300px” height=”200px” />

This method is OK if you’re just learning HTML but the current and preferred method is to use the background command used within CSS coding. You can find out more about this in my article titled Learn CSS Part 5: CSS Background Image.

Tell Me Your Thoughts

How important are images to you when reading content on a page? What hosting provider do you have? Leave a comment on my Facebook Fan Page.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>