Getting to Know the Image Tag in HTML
Getting to Know the Image Tag in HTML

Back in 1995, the image tag was included in HTML 2.0 in order to display an image by embedding it at the point of the tag’s occurrence. Prior to that, other tags such as <embed> and <picture> were used and, for some reason, these were not good enough.

HTML is a language that experiences a constant evolution. As technology advances, so too must the markup language that provides us with all the visual aspects we experience on the web.

I’m not entirely sure why the <img> tag was introduced as a replacement to its predecessor, but it’s existence has made it super easy to add images into web content.

Since the days of cat gifs, images have been an important aspect of web design. Nowadays, knowing how to stick an image into a blog post isn’t good enough to create eye-pleasing content.

I’m going to explain what the <img> tag is, how to use it and how to style it so your images are functional and look really cool.

The <img> Tag

The <img> tag defines an image using an HTML tag. It displays a static image on the web page as a part of the content.

The tag itself links to the source of the image and creates a holding space for said image.

<img src=”URL of image”>

The image tag requires no end tag, such as </img>, because it is not affecting a particular element of your page – it’s adding one. It simply requires a source, or “src”, that directs the browser to the location of the image.

Why You Should Use Images in Your Blog Posts

When it comes to creating a readable blog post, images are important in breaking up content and providing visual stimulation to the reader.

While the ultimate goal of posting content is to provide information or a solution to a reader’s problem, you are more likely to hold their attention by offering eye-catching graphics that pique their interest or simply give their brains a mini-break from absorbing your content.

Using images also helps with boosting SEO (Search Engine Optimization) by providing search engines more information to pull when compiling relevant pages for a search term. This is done by taking advantage of the “alt text” (which I’ll explain later) and “description” fields when uploading an image to your post.

Optimize your SEO by using key words related to your blog and post in these fields.

Here is an example of using an image to break up text – just like how I’m using this image of an image breaking up text in order to break up my text.

Using the <img> Tag

The image tag is super easy to use. In fact, if you are using a platform such as WordPress, you can upload images right into your post without touching any code.

But where’s the fun in that?

Knowing how to use the image tag is beneficial if you want to have more control over how your images appear. By using HTML and CSS, you can adjust your images to flow better with your design and layout.

CSS? What the heck is that? Click here to find out.

When a webpage loads, the browser recognizes the <img> tag and pulls the image from the web server via the URL (or address) provided in the code and inserts it into the page.

You can reference the location of the image in two ways:

Absolute URL

Using an absolute URL means including a full link to the image using http://.

You would do this if the image exists in a different folder than the page you are including it on.

So, for example, if your “index.html” (your main page) is in your main folder and the image “dancingcat.png” is located in your image folder, you would have to include the entire URL of the image:

<img src=”http://www.yoursite.com/images/dancingcat.png”>

In the grand scheme of using the <img> tag to add an image to my code, I always use an absolute URL. It makes for less of a headache if the browser or your code decides to act funny.

Relative URL

Alternatively, if your image and HTML document are in the same folder, you can technically eliminate the full URL address and simply reference the name of the image.

So if your image “dancingcat.png” is in the same folder as “index.html” you can simply use:

<img src=”dancingcat.png”>

Again, I just keep it simple by using the full URL of the image.

Broken Images

Images can break. Keep in mind that if an image is moved or renamed, a broken image icon will appear since the browser cannot find the image.

If you move or rename an image, you will have to update the URL in your code.

Broken image! Sad face 🙁

Image Attributes

Attributes are little tidbits of code you can add directly into an HTML tag in order to modify that element.

When it comes to the <img> tag, you can directly affect the image within the tag without getting into your CSS code. Be warned, however, that when you use these modifiers, you are only making changes to that specific image.

In order to apply styling to all your images, you will have to edit your “style.css” document or use WordPress’ Customizer (i.e., the best invention since sliced bread).

Height and Width

When images are too big for the space you intend to place them, you can change the height and width directly in the <img> tag.

“Px” refers to pixels, the smallest unit of information that makes up a picture. Because different screens, such as laptop screens and smartphone screens, come in different resolutions and sizes, the World Wide Web gods decreed that pixels should be the standard form of measurement across HTML code.

And I tend to agree.

The above code is an example of a square image, so just be weary of keeping your image size proportional to the original size.

Otherwise, it will go wonk:

See the Pen
Wonky Image
by Chelsy (@mamaneedscoffee)
on CodePen.

Inline Style

As I mentioned above, you can use CSS styling directly in the <img> tag to change the look of the image.

This is great if you want to style one specific image. Otherwise, it is best to assign a “class” or “id” attribute to the image and make changes in the “style.css” document.

But if you want to use inline styling, the code would look something like this:

<img src=”dancingcat.png” style=”CSS style code”>

Class or ID

When you style only the <img> tag in CSS, you are affected every single image on your page. Otherwise, you can label certain images so that CSS changes affect only that image or group of images.

Say you want to establish a particular size and style for thumbnails – maybe to display a related post in your article. You would identify or classify that image with a specific label and reference that label in the CSS code.

When it comes to images, it’s best to stick with using a “class” identifier. I could go into a lengthy explanation as to why, but just trust me. That may be a post for another day.

<img class=”thumbnail” src=”dancingcat.png”>

Now when I reference images labelled “thumbnail” in my CSS, I use this code:

img.thumbnail {CSS STYLES HERE}

I’ll get into that more in the next section:

Styling Images

Here’s where you can do some pretty cool stuff with your images. Using the magic of CSS, you can make your images unique and cohesive with the design and layout of your page.

Centered Images

Okay, so I know WordPress will let you center an image with the click of a button, but knowing how to do so in code can be an invaluable tool.

Or, at the very least, make you seem really smart at parties.

Centering an image is a matter of changing its display property to “block” and using margins to control its placement.

A block-level element starts on a new line like a paragraph and takes up the full width of the page. We change the image to a block-level element to ensure that no text wraps around it and so we can use the full width to force it into the center.

The “auto” value we are using for the property “margin” tells the browser to leave an equal amount of space on each side of the image, thusly centering it on the page. The number “0” refers to top and bottom margins, which we don’t necessarily want.

See the Pen
Image – Centered
by Chelsy (@mamaneedscoffee)
on CodePen.

Rounded Images

You can also use CSS to turn your image into a circle or create rounded edges.

Rounded edges are nice – they can give your images a softer look. In the CSS code, you use pixels (px) to control how rounded the edges are.

The property used in CSS to achieve this is “border-radius” and, in the case of rounded edges, pixels are specified. However, to create a circular image, the value is specified using a percentage (in the case of a perfect circle, 50%).

See the Pen
Image – Rounded
by Chelsy (@mamaneedscoffee)
on CodePen.

Thumbnail Images

As I mentioned before, you may want to use CSS to create thumbnail images for your site. Thumbnails are simply smaller versions of large images – a kind of preview that doesn’t take up a lot of space.

To make your thumbnail clear and concise, you can add a rounded border and specify the color. The value of the border property includes the with of the border (in pixels), the style of the border (in this case, “solid”) and the color of the border.

In the example below, padding is used to add some space between the border and the image while the width property makes the image smaller.

Notice how I am not touching the height in the code. Whenever you adjust the width of an image, while omitting the height property, the browser will automatically adjust the height so that the image remains proportional.

See the Pen
Image – Thumbnail
by Chelsy (@mamaneedscoffee)
on CodePen.

Transparent Images

Yes, you can even make your images transparent.

Why? I say, “Why not?”

Perhaps there is need in your design to have an image a bit see-through or have a softer look.

Either way, it’s really easy to do and uses the property “opacity” to do so. The value can vary from 0.0 (which makes the image disappear) to 1.0 (which makes the image completely solid). Any number in between can be used to control the level of transparency.

Notice in the code below there is an additional property called “filter”. This was an older way of creating transparent images and is still recognized by Internet Explorer 8 and earlier versions. The only difference here is that the value is not a decimal but a whole number.

So, for example, if you chose an opacity of 0.3, the “filter” value would be 30. Just move the decimal over 2 places.

See the Pen
Image – Transparent
by Chelsy (@mamaneedscoffee)
on CodePen.

Did that all make sense? If you have any questions at all, don’t hesitate to contact me or leave a comment below:

Coding, design, and writing are my happy places. I can lose all track of time when I’m working on my blogs.

I hope here at MNC you will find the answers to your questions and some inspiration to make your blog or site really totally cool!

Learn More.

Latest Posts

How to Create Your Blog in HTML: The Ins and Outs

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website. I started learning about HTML when I was in high school and began building little...

How to Become a Virtual Assistant From Home

Wouldn't it be nice to make money and stay at home? A pipe dream, you say? Not anymore! For almost two years now I have been working from home as a freelance writer making more than I did when I worked full-time. But freelance writing isn't the only way you can enjoy...

How to Start a Mom Blog in 2022

Welcome to 2022! Are you ready to start a mom blog? Nowadays, having a blog can be a lucrative business that you can run from your very own home! How much do mom bloggers make? It all depends on how much work they put into their blog and how they monetize their...

Don’t forget to sign up for the FREE Blogger Toolkit!

You May Also Like…

How to Create Your Blog in HTML: The Ins and Outs

How to Create Your Blog in HTML: The Ins and Outs

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website. I started learning about HTML when I was in high school and began building little...

How to Customize Your Blog’s Headers to Personalize Your Brand

How to Customize Your Blog’s Headers to Personalize Your Brand

While downloading and installing a free theme is a quick and simple way to add style and structure to your site, oftentimes certain design elements are booooring. One of the first things I tackle CSS-wise when I choose a new theme is the headers. These are the titles...

How to Start a Mom Blog in 2022

How to Start a Mom Blog in 2022

Welcome to 2022! Are you ready to start a mom blog? Nowadays, having a blog can be a lucrative business that you can run from your very own home! How much do mom bloggers make? It all depends on how much work they put into their blog and how they monetize their...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content