Working With HTML Images


The HTML image tag is an inline element however there will be instances when flowing text around an image is desired. In fact, this happens all the time. If you’ve worked with images in HTML, you’ll know that at times it seems like the image has a mind of its own in regard to where and how it gets displayed on the page in relation to text. Let’s take a closer look at embedding images in wordpress, and how to format them so that images and text can live in harmony. In fact, in looking at the opening text of this tutorial, we are using one of the very techniques we will discuss. Let’s begin!

First we’ll need to whip up some HTML with an image so that we can complete some tests.

As you can see, there is nothing special about this snippet of HTML. Of course if you read the sample text, you may be enlightened by a few of the words of wisdom provided, but beyond that – this is pretty simple stuff. This is a basic HTML Web Page which supports HTML5 based on the doctype, it has some basic head information, an h1, an image, and a few paragraphs. We can view it in the browser and it displays as you see here.
working with html images

The image is all by itself, but not because it is block level. The paragraph begins after the image tag, so the text starts at that point. How about if we’d like to have the text flow around the image instead. We can do this with CSS. For brevity, we’ll just put the style rules right in the head of the document. The following code will now be inserted.

css image float left

There we go! That looks a little better. By applying the css float property to the image tag, we can control how text flows around an image. It looks ok, but it feels a little cramped. The text is smacked right up against the image. Let’s give the layout a little breathing room. By adding some margin values to the CSS like so

We’ll notice that the text now has plenty of space between itself and the HTML5 logo. This looks a little better.
css image margin right

Just as we can float an image left, floating the image right is just as easy. We’ll float left, and also change the margin-right to margin-left so that it looks uniform. With the new code of

The page will now look like this.
css image float right

That looks pretty good. Understanding how to float text around your images is going to reduce your frustration levels twenty fold, trust me!

One thing to note about assigning the float property to images is that it converts the element from inline to block level. This will have an impact on other CSS design that may be applied to the element.

Dealing With Multiple Images

Ok so we’re happy, we know how to align text with images and all is right with the world. Let’s add another image to the page so we can see how things work. We’ll add the next image using this snippet of HTML:

Now, you would think that these two elements would stack on top of each other by looking at the source code. What happens in the web page when we load it in the browser is a little different though. This is the result so far.

multiple html images

Hey that looks really good! you say. Maybe you didn’t quite expect the images to display side by side, but hey, you’re of the easy going variety and it looks acceptable so good enough, right? Well, it’s all good except for one problem. Your picky client keeps talking about their competitor and how great their stacked images look on their marketing page. He feels so attached to this stacking look, that he has decided that you don’t get paid until images stack. What’s a friendly Web Developer to do? Well, in this case, the clear property may be just what the doctor ordered. Let’s add it to our CSS markup like so.

html stacked images

Boo Yeah!! One word: Stacked. Good work Grasshopper.

HTML Floats – Break it Down

As text flows around an image, you may run into a scenario where you would like to break a portion of the text so it begins after the image. This is possible using the clear property, let’s see how to do it. Here is some new HTML to work with here.

html image float right

Cool! This looks pretty good. Now let’s consider the second paragraph where we have finished dinner, and moved on to dessert. Perhaps we’d like that second paragraph to begin after the image. Let’s see how to do that. We’ll make use again of the CSS property clear which is used to clear floating objects like an image. You can specify a value for clear of right, left, or both. In this example, by adding this css

and this markup to the paragraph in question

We get the exact result we were looking for!
html float right clear

Have a play around with the other clear options to see how they work in your web pages. You’ll love the control the clear property is able to provide when dealing with floating elements on the page.

Image Maps in HTML

In HTML you can define regions of one image that all point to different links that you specify. This is what is known as an image map, and they are really cool. In looking at the HTML below, you’ll notice that the image we are using has a new attribute called usemap. The attribute has a value of #imagemap. This is the name of the map. This tells the image to look for a <map> tag which has the name of #imagemap. Inside of the <map> tag are several <area> tags, each one defining a hotspot on the image that will now contain a hyperlink to another URL. In the example here, we only used the rectangle and circle options however you could also make use of the polygon shape if you like. The image render after the HTML markup is a live example, go ahead and click the different areas on the image and see where they take you!

what is html html fundamentals html text features get started with javascript javascript code structure javascript functions javascript events document object tutorial