Question

This is new for me: only inline elements are allowed in <p> </p>, in HTML. Then how can I make captions for images in my HTML paragraphs? I have this, but it uses a div, which is not allowed in <p>:

<div class='image floatright' style='width:228px;margin:0 0 0 10px;'>
  <a rel='article' href='images/articles/comenius_logo.jpg' title=''>
    <img style='width:218px' src='images/articles/comenius_logo.jpg' alt='' />
  </a>
  Caption of the image
</div>

I could place this outside the paragraph, but then it would be at the top, which I don’t always want.
And I also could use divs instead of paragraphs, but then the semantics of the html source code would be lost.

I don’t know what I can do :\ All of the solutions I have found use block elements, like table, div, figure, etc.

Answer 1

You can replace <div> with a <span>, then style it using display:block;. The <span> is still an inline element (even if it looks like a block-level element), thus passes the HTML validation.