PyCharm warn: Closing tag matches nothing for <p> tag

After inspect code from my PyCharm. It warns me as Closing tag matches nothing at last </p> tag

But I didn't find any wrong my code. p tag is closed correctly.

  <p v-if="files.length">
      <ul>
        <li v-for="file in files">
            {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
            <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
        </li>
      </ul>
  </p>

How can I resolve this warning correctly?

This warning is caused by invalid HTML. The ul element is not allowed within the p element. The warning may be resolved by refactoring the source to follow the HTML specification.

Remove p element:

<ul>
  <li v-for="file in files">
      {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
      <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
  </li>
</ul>

Convert p element to div element:

<div v-if="files.length">
  <ul>
    <li v-for="file in files">
        {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
        <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
    </li>
  </ul>
</div>

There is an excellent summary of the relevant portions of the spec in the answer https://stackoverflow.com/a/5681796. Note that the answer specifically addresses ol rather than ul, but is still applicable because their Categories and Content Model are the same.

It would be better if the PyCharm warning message was more specific. This can be done in the paid version of PyCharm via custom inspections, but is not possible in the Community Edition. https://www.jetbrains.com/help/pycharm/creating-custom-inspections.html