Skip to main content

About Author

My photo
Alex George
Alex George has Engineering graduation in Computer Science and an MBA in Finance. He had been working as a senior Network Engineer for ten years. His specialization is in Cisco products. Traveling is one of his hobbies and visited various places as part of his onsite work. He visited different places as part of his onsite work like New York, Dubai, London, etc. Right now Alex is a director of one of the leading career development firms in India, which trains students for UPSC, SSC, and PSC examinations. He guides a lot of students to get selection for various prestigious institutions like CBI, Income Tax Department, etc. Alex George is a stock market investor and a very active intraday trader. Engineering Background: He has a B.Tech in Computer Science and Engineering and passed different network and security courses like CCNA, CCNP (Security), CEH, and various Microsoft certifications. Finance Background: Alex has an MBA in Finance. He is an active intraday trader and a Share Market Investor. Webmaster Skills: Alex is a blogger since 2004. He has a working knowledge of HTML, CSS, PHP, and JavaScrip.

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.

<span class="mob-menu-toggle" data-target="#navbarCollapse" data-toggle="collapse">
        <div id="nav-icon" >
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

      </span>


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

Comments

Recent Comments

Archive

Show more