display the text inside of an image tag

Question

Is it possible if I have <img src='Assets/image.png'>some text</img> to get the 'some text' to display?

I know I could just use a div and style the div to display on top of the image, but what I want to know is if it's in anyway possible to get the text inside the tag to show up.

Answer 1

No. There is no text inside the img. According to the specs, the img element is a void element, i.e. it doesn't have any content or an end tag.

The good news is that in your example source, the text "some text" will show up on the page. (It's technically not inside the img, so it is simply displayed directly after.) That's probably not what you want though...

Possible solutions are:

• If you want a text that is displayed instead of the image whenever the image cannot be displayed, put the text inside the alt attribute.
• For a text that is shown when the user hovers the mouse over the image, use the title attribute
• To display both the image and the text in the page, use a figure element in which you put the img and put the text inside the figcaption and use CSS positioning to put the figcaption on top of the image.
  

  figure {
    position: relative
  }
  figcaption {
    position: absolute;
    width: 200px;
    line-height: 150px;
    text-align: center;
    left: 0;
    top: 0;
    text-shadow: 0 0 1px white;
    font-weight:bold;
  }

  <figure>
    <img src="http://lorempixel.com/200/150" />
    <figcaption>some text</figcaption>
  </figure>