I’m editing a site.. and on it there is a toggle where a heading is something like..
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?
Placing the img outside of the heading will place them on different lines..
Thoughts? or best practice comments?
ps. I notice the code is actually rendering.. not sure how to display just the code. The “code” tag does not seem to work.
>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
>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.
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.
Thank you for the detailed answers.
So it seems I need to be more specific…
Have a look at this page
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 ?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".