67

Can we place <img> inside <h1> according to web standards? like this

<h1> Demo text <img src="anyimage.jpg"/> </h1>
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

5 Answers5

97

Yes, you can - the DTD says:

<!ELEMENT h1  %Inline;>
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">
<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">
<!ENTITY % special "%special.pre; | object | img ">

That basically means h1 can contain %Inline, which is made of various things, including img

Greg
  • 316,276
  • 54
  • 369
  • 333
51

Look who is using it: http://www.w3.org/

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" /></a> <span class="alt-logo">W3C</span></h1>
Max
  • 2,529
  • 1
  • 18
  • 29
  • 2
    Well, that might be wrong usage. When using screen reader it reads out loud: "W3C W3C". Because it reads out loud alt attribute and span element. I'm not sure but if span were defined with display: hidden it wouldn't read it. [Good reading for ALT text is here](http://www.cs.tut.fi/~jkorpela/html/alt.html). – Ciantic Apr 24 '13 at 17:33
  • I agree, responding to this late. But if it were 2018. I would set the alt equal to the empty string, " ". And keep the span with a screen-reader the only css. – Gcamara14 Mar 08 '18 at 01:16
  • 1
    @Gcamara14 You mean something like

    My title

    Do search engines dock rankings based on hidden text like that?     – Jordan Carter Apr 18 '18 at 16:46
20

Yes, this is allowed. But don’t forget to set the alt attribute on the img!

igor
  • 2,090
  • 20
  • 32
4

Yes and no.

You can place an image inside an h1 element, but not quite like that … the alt attribute is mandatory.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
4

To summarize the other answers, it is W3C valid to use an <img> inside an <h1>.

Though to be completly valid you should add an alt attribute to your image, because it's mandatory. This attribute doesn't need to contain text. It's better letting it empty than repeating what is already written in the h1 tag.

In your case if the image is purely decorative it should be:

<h1>Demo text <img src="anyimage.jpg" alt=""/></h1>

More info on text alternatives for decorative images: https://www.w3.org/WAI/tutorials/images/decorative/

If the image has a particular meaning or contains a text different than the one in the h1, then use an appropriate alternative.

neiya
  • 2,657
  • 4
  • 23
  • 32