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

Question

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?

Brevity

Did you ever discover the cause of this? I'm suffering the exact same thing. I'm also using a Vue v-for list inside my p – Dail

Unfortunately, not yet resolved. I'd just set to ignore this warning. Sorry for no helping. – Brevity

Urgghh... Nevermind - I'll do the same. Thanks for the reply. – Dail

Answer 1

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

Ancell

Answer 2

I have met this issue, too in my project.

My DOM structure is like:

<p>test<div>test2</div></p>

And, if i write the DOM structure as above, the WebStorm will alert 'closing tag matches nothing'

While, when i change this structure, e.g.: change the div block elements into inline elements span, then it works fine.

So, my advice is changing your DOM struture. e.g. Using div to replace p or using some inline elements in p tag.

One more thing, as i checked in this document https://www.w3.org/TR/html4/sgml/dtd.html

The doc said that the tag p normally includes inline elements. So, i think this is the root cause for your and my issues as mentioned above. So, using inline elements in tag p or use like div or other elements to replace tag p.

Concerted