Element div not Allowed As Child of Element Span in this Context

Today morning I tested some of my websites using W3 validator (https://validator.w3.org) to check whether they have any HTML errors. They were developed by a freelance HTML developer hired online. One website showed an error - "Error: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree)". This is one of the easiest error we can fix and it happens by a web developer who doesn't follow the basic rule of never put block-level elements inside inline elements. While testing the code I found the following lines which created the error.


Here, the block level element <div> is placed inside an inline element <span>


Solution

All you need to remember to solve this error message is to never place a block level element in an inline element. If you are not sure which are block level elements and inline elements, follow the chart below. In this chart, you can see examples of both types of tags.

List of Block-Level Elements

• <div>
• <h1>
• <h2>
• <h3>
• <h3>
• <h4>
• <h5>
• <h6>
• <p>
• <form>

List of Inline Elements

• <span>
• <a>
• <img>

Element <div> is a block element which defines a section of HTML as a container. Where <span></span> is used to group inline elements in a document used for text. The principle is applicable when we use ul and span. In webmaster forums, many persons asking similar questions like "Validation error: ul not allowed as child of element span" while they test their website for HTML errors using HTML validators. The answer is same, here UL is a block level element but <span></span> is inline element. If anyone use UL inside <span></span>, HTML validators will show the error.

Popular Articles

1. Prevent Malicious User Inputs In PHP Form
   
   
2. Warning: Invalid Argument Supplied For foreach()
   
   
3. PRevent Others Display Images Hosted On Your Server
   
   
4. Forcing Google To Manually Index a Website