displaying images next to headings

[magician11]

Hi,

I’m editing a site.. and on it there is a toggle where a heading is something like..

Herbal Medicine

My client wants an image next to the heading on the left… but I’m not sure on the cleanest way to do that.

Is placing an img tag inside a heading ok?

Herbal Medicine

Placing the img outside of the heading will place them on different lines..

Thoughts? or best practice comments?

thanks.

ps. I notice the code is actually rendering.. not sure how to display just the code. The “code” tag does not seem to work.

[Paulie_D]

Although you can technically do it, I think you would run into formatting / layout issue.

I’d be more inclined to go with a pseudo element: http://codepen.io/Paulie-D/pen/mhDrH

It also has the virtue of being more semantic.

[CodeGraphics]

Do something like [this.](http://codepen.io/alex13/pen/kjGhc “”)

[wolfcry911]

Paulie, why the pseudo element? just put it in the h4 background and be done.

@magician11, is this image important to the content or just design/decoration? if the latter, then definitely use a background image.

[Paulie_D]

>Paulie, why the pseudo element? just put it in the h4 background and be done.

Good point…I overthought it. :)

@codegrapics This is why not…

>is this image important to the content or just design/decoration? if the latter, then definitely use a background image.

[trooperbill]

How about adding a left padding to the H tag and using the image as a background in that space? It would help as it means you’re not dirtying your H’s with image ALTs and can be easily restyled for a responsive design

[Paulie_D]

@trooperbill

>just put it in the h4 background and be done.

Just as @wolfcry911 suggested.

[CodeGraphics]

Just follow my code. Very simple. No need of going around finding a solution to this simple stuff. Just float the image left and give it a right margin. Simple.

[Paulie_D]

>Just follow my code. Very simple. No need of going around finding a solution to this simple stuff. Just float the image left and give it a right margin. Simple.

Simple but not semantic.

If the image is just styling (as it would appear to be) then it doesn’t belong in the HTML, it belongs in the CSS…hence the bg image is probably the best solution

[CodeGraphics]

No sir. Making the image a background is not the best option. Let him just add the image naturally with image tag in html doc. This is just issue of floating. There is no point bringing the image in through css.

[Paulie_D]

>Making the image a background is not the best option. Let him just add the image naturally with image tag in html doc. This is just issue of floating. There is no point bringing the image in through css.

You misunderstand.

If the image is **styling** (like a list bullet) and has **no relation** to the heading then it shouldn’t be in the html.

If the image was related to the contents of the heading (or even a paragraph following the h4) then, yes, by all means have it in the HTML and float it or whatever.

Otherwise. it adds nothing and should be kept out of the document.

Even in this case, where you could vaguely relate a flower image to the “Herbal Medicine” content you have to ask yourself “What would this add for a screen reader?”.

Your way it would read something like “Flower Image – Herbal Medicine”…my way it would read just “Herbal Medicine”.

That’s a simplistic way of stating this case but I hope you see where i am coming from.

[magician11]

Hi everyone.

Thank you for the detailed answers.

So it seems I need to be more specific…

Have a look at this page
http://www.mynaturopathchristos.com/services/

As you can see there are many toggles on it. The flower next to the title is a placeholder image for now. Inside every toggle is an image. My client wants that image to appear next to the heading to make the page appear more aesthetically interesting.

So it seems the solution is to have the image in the HTML as suggested by @CodeGraphics ?

[Author]

Posts