HTML Nested Lists

<ul>
  <li>Breads</li>
  <ul>
    <li>Sourdough loaf</li>
    <li>Rye loaf</li>
  </ul>
  <li>Pastries</li>
</ul>

Open this markup in a browser, and it looks correct. "Sourdough loaf" and "Rye loaf" appear indented under "Breads", with hollow bullets. Yet the markup is invalid. The validator reports: "Element ul not allowed as child of element ul in this context." The browser does not fix the mistake: it keeps the inner <ul> directly inside the outer one, exactly as written. It simply draws it and shows no message, so the error is easy to miss.