Why is it causing an error when i put a
inside of a ?

Question

I works properly but putting the code through a validator (validator.w3.org) comes up with an error

Error: Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

<!-- mobile button -->
<a class="btn btn-warning lg hidden-sm hidden-md hidden-lg"  role="button" href="http://www.website.com">
    <span>
        <i class="fa fa-shopping-cart fa-pull-left black" aria-hidden="true"></i>
        <p class="black">Visit Store</p>
    </span>
</a>

score 2 · Answer 1 · edited May 23 '17 at 12:17

2

See this stack overflow post: Can tags have any type of tags inside them?

Essentially, because span tags are inline elements, they should only contain other inline elements, not block elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

edited May 23 '17 at 12:17

Community

1
1

answered Mar 09 '17 at 21:43

Matthew Gallo

29
5

Thank you for the help! I was not searching 'inline elements' term. I adjusted my code and just got rid of the span and p elements. – Neal Jones Fitch Mar 15 '17 at 18:25

score 1 · Answer 2 · edited Mar 09 '17 at 21:42

1

You don't want to include a 'block' element inside of an 'inline' element. That  tag should likely by a span or another inline element.

edited Mar 09 '17 at 21:42

gen_Eric

223,194
41
299
337

answered Mar 09 '17 at 21:42

LegendaryJLD

148
1
1
9

score 1 · Answer 3 · answered Mar 09 '17 at 21:42

Because, as the error says,  is not a valid child of .  is a block level element, and  is an inline element. You can't have a block element within an inline element.

Either invert your two tags, or use a  within a .

For further information, I recommend checking out the WhatWG documentation, which states that  tags should only be used when expecting phrasing content.

Ousmane D. · Answer 4 · 2017-03-09T22:00:07.783

Why is it causing an error when I put a <'p'> inside of a <'span'>?

Side note: --> I had to put quotes around the paragraph tag above otherwise, it would create a line break. same applies to span tag but that would result in different behaviour.

Reasoning to the error:

Only inline elements may be contained within inline elements. span is an inline element. tags such as  which is block element cannot go inside inline elements.

What does this error mean?

There are rules regarding which elements can be nested inside other elements and when this is allowed to happen.

Most notably, block-level elements, such as <div>, are not allowed inside inline elements such as .

This error is telling you that your markup includes a  element inside a  and that this is not allowed.

Here is a LINK that explains exactly what you have asked about the W3C validator error.

Why is it causing an error when i put a inside of a ?

4 Answers4

Why is it causing an error when i put a
inside of a ?