"Element ol not allowed as child of element pre in this context."

StackOverflow https://stackoverflow.com/questions/21613762

  •  08-10-2022
  •  | 
  •  

Question

I am working on an HTML assignment for class, but keep getting the following error when I try to validate my webpage: "Element ol not allowed as child of element pre in this context." Any suggestions on how to fix this problem? The section of HTML is posted below:

<pre class="proterozoic"  style="background-color: #FF99CC">
<ol class="era">
    <li>Proterozoic</li>
</ol>
</pre>
<pre class="paleozoic" style="background-color: #0099FF">
<ol class="era">
    <li>Paleozoic</li>
        <ol class="period">
        <li>Cambrian</li>
            <li>Ordovician</li>
            <li>Silurian</li>
            <li>Devonian</li>
            <li>Mississippian</li>
            <li>Pennsylvanian</li>
            <li>Permian</li>
        </ol>
</ol>
</pre>
<pre class="mesozoic" style="background-color: #66CC66">
<ol class="era">
    <li>Mesozoic</li>
        <ol class="period">
            <li>Triassic</li>
            <li>Jurassic</li>
            <li>Cretaceous</li>
        </ol>
</ol>
</pre>
<pre class="cenozoic" style="background-color: #FF3333">
<ol class="era">
    <li>Cenozoic</li>
        <ol class="period">
        <li>Paleogene</li>
                <ol class="epoch">
            <li>Paleocene</li>
                    <li>Eocene</li>
                    <li>Oligocene</li>
                </ol>
        <li>Neogene</li>
                <ol class="epoch">
                <li>Miocene</li>
                    <li>Pliocene</li>
                    <li>Pleistocene</li>
                    <li>Holocene</li>
                </ol>
        </ol>
</ol>
</pre>
Was it helpful?

Solution

The <pre> element is for preformatted text, so you can't put additional formatting tags inside it.

By the look of things, you would be better off using <div> elements instead. If you want them all to appear in a typewriter font, you can add div { font-family:monospace; } to your CSS template.

The nesting of the lists can be fixed by keeping the nested <ol> elements inside the parent <li> elements, like this:

<ol class="era">
    <li>Paleozoic
        <ol class="period">
            <li>Cambrian</li>
            <li>Ordovician</li>
            <li>Silurian</li>
            <li>Devonian</li>
            <li>Mississippian</li>
            <li>Pennsylvanian</li>
            <li>Permian</li>
        </ol>
    </li>
</ol>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top