p tag in button tag not allowed?

Question

I have a <button> element and within it, a <p> element. The <p> element is used in combination with css, margin-top, in a class to vertical align the text within the button (the button has a specific height).

The html looks like this:

<button class="someClass">
    <img ... />
    <p class="anotherClass">Caption</p>
</button>

This works fine, the text is vertically aligned like it should be. However I get a warning inside visual studio 2012 saying:

Element 'p' cannot be nested inside element 'button'.

---

My questions: why isn't the <p> element allowed inside a <button> element? And what is the alternative?

Answer 1

That is correct, it isn't allowed, because;

• The content model of button element is phrasing content (with no interactive content descendant).
• And the p can only be used where flow content is expected.

An alternative is getting rid of the p element, and instead using a span element with display: block:

.anotherClass {
  display: block;
}

<button class="someClass">
  <img ... />
  <span class="anotherClass">Caption</span>
</button>