Why is this </p> out of place in this HTML5 document (rendered by Django)?

Question

The indentation was created by Firefox's source. Both Firefox and HTML validators said that the </p> is misplaced. But I can't figure out why.

<p>
  <ul class="errorlist">
    <li>This field is required.</li>
  </ul>
  <label for="id_creator">Creator:</label>
  <select onchange="Dajaxice.doors.orders_create_creator_changed(fill_other_fields, {&#39;creator_pk&#39;: this.options[this.selectedIndex].value})" name="creator" id="id_creator">
    <option value="" selected="selected">Select a user</option>
    <option value="9">Amy the Tenant</option>
    <option value="6">Alex the Tenant</option>
    <option value="3">Bob the Property Manager</option>
  </select>
</p>

On a side note, when Django doesn't render the error messages, then the closing </p> tag is valid. Here is the code:

<p>
  <label for="id_creator">Creator:</label>
  <select onchange="Dajaxice.doors.orders_create_creator_changed(fill_other_fields, {&#39;creator_pk&#39;: this.options[this.selectedIndex].value})" name="creator" id="id_creator">
    <option value="" selected="selected">Select a user</option>
    <option value="9">Amy the Tenant</option>
    <option value="6">Alex the Tenant</option>
    <option value="3">Bob the Property Manager</option>
  </select>
</p>

Answer 1

<p> can't include any block-level elements (see MDN docu).

<ul> on the other hand is an block level element (MDN).

The reason your code might be displayed "correctly" is that most html5 parsers insert a closing </p> when they encounter a block level element inside a <p>. With this being inserted your actual </p> has no accompanying opening <p> and in consequence is not valid at that point.

Answer 2

an <ul /> is block level so it can't be held inside a <p />