7

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?

Michael Ruth
  • 2,938
  • 1
  • 20
  • 27
sungyong
  • 2,267
  • 8
  • 38
  • 66

2 Answers2

8

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

Michael Ruth
  • 2,938
  • 1
  • 20
  • 27
1

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.

Steven
  • 21
  • 4