How to fix: Document type does not allow element "style" here

Most Likely Cause and Fix

You have placed a style element outside the head of your markup.

Use

<html>
  <head>
    <style>
    </style>
  </head>
  <body>
  </body>
</html>

instead of

<html>
  <head>
  </head>
  <body>
    <style>
    </style>
  </body>
</html>

What This Error Means

HTML is often comprised of elements nested inside other elements, such as the placing of an anchor within a paragraph:

<p>
    Hello <a href="http://example.com">World!</a>
</p>

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 <span>.

This error relates to the when and is telling you that the <style> element on the relevant line number is not allowed at that point.

How To Fix It

For style elements

Make sure all style elements are defined within the head of your markup and not elsewhere.

Use

<html>
  <head>
    <style>
    </style>
  </head>
  <body>
  </body>
</html>

instead of

<html>
  <head>
  </head>
  <body>
    <style>
    </style>
  </body>
</html>

For strings in JavaScript

If the line and column number in the specific error message you encountered points to a section of JavaScript, you have a character data problem.

Markup-like strings within JavaScript that is not marked as CDATA may be interpretted not as JavaScript but as markup. You do not want this.

Use

<script type="text/javascript">
//<![CDATA[
var string = "<style>";
//]]>
</script>

instead of

<script type="text/javascript">
var string = "<style>";
</script>

In general

The specific error message you encountered will refer to a line and column number. This will guide you to the exact point in your markup to which the error relates.

Find the <style> element in question and check to see what element it is inside of.

Check that you haven't failed to close a preceding sibling.

Check that the relevant <style> is actually used in a place that it is allowed to be used.

Many elements have restrictions on the types of elements allowed inside them. For example, a list element can only have children that are list item elements.

Discuss, Comment and Improve

Did this help you? Can this page be improved? Let us know!

comments powered by Disqus