un-paired tags: highlight opening tag

thorade commented 9 years ago

I sometimes have HTML documents with thousands of lines and HTMLHint shows all un-paired tag warnings at the closing body element and it is difficult to find the opening tag. I think it is technically possible to also highlight the opening tag or show the approximate line number. The following example code can be copy&pasted into the HTMLHint.com box and should then somehow inform the user that the unmatched opening tag is in line 8.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTMLHint</title>
</head>
<body>
    <div>un-matched opening div-tag is in this line
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
</body>
</html>

Just an idea, feel free to close this as won't fix.

yaniswang commented 9 years ago

You can group like this:

<div>un-matched opening div-tag is in this line

    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>
    <div>HTMLHint: help your html code better</div>

</div> <--- missed end tag

thorade commented 9 years ago

Of course putting a closing div in the last line would make it valid HTML, but I was not expecting HTMLHint to tell me where to put the closing tag, I was only hoping it could tell me where the unmatched opening tag is. Does that make sense?

yaniswang commented 9 years ago

HTMLHint only can found the missed tag at the end. Because div tag can nested loop. If you develop HTMLHint, how can you find the first <div> missed end tag?

thorade commented 9 years ago

I do not know how the algorithm exactly should look like, but some editors do something similar with brackets. Brackets can also be nested, but somehow they manage to show what brackets are unmatched. If you think this could be an interesting feature, I can invest more time and try to find a better example and possibly an algorithm.

thorade commented 9 years ago

OK, just a quick google search gave me these examples: http://jona.ca/blog/unclosed-tag-finder http://www.aliciaramirez.com/closing-tags-checker/ http://www.onlinewebcheck.com/check.php?adv=1

And also the W3 validator does this: https://validator.w3.org/nu/#textarea

Just paste in the code I posted in the beginning and it will print some error message saying that there is an opening tag in line 8 that is never closed.

thorade commented 9 years ago

OK, searching the web for "bracket matching alogrithm" returns a lot of results. Reading one answer from stackoverflow, here is basic idea for an algorithm:

Start with an empty stack for each tag
e.g. one stack for the tag div and another stack for the tag p
Scan the file:
- when you find a self-closing tag, do nothing
- when you find an opening tag, push the line where you found it onto the stack
- when you find a closing tag, pop last entry from the stack.
When you reach the end of the file, the stack should be empty,
If the stack is not empty, it is equal to a list of all tags that were never closed.

yaniswang commented 9 years ago

I understand your message, your want to know the line of the start tag?

thorade commented 9 years ago

Yes, that would be very helpful, especially with long documents (my document has 50 000 lines).

Once I have found the opening tag, I have of course to decide manually where to close it.

yaniswang commented 9 years ago

Done! http://htmlhint.com/

Try again.

thorade commented 9 years ago

Awesome, thank you very much! Looks very good. I will do some more advanced testing in the next days and report back if I find any issues.

thorade commented 9 years ago

OK, I do have a comment: It looks like the behavior is a bit different for unmatched opening or closing tags. The error message for unmatched closing tags is displayed directly next to the closing tag. The error message for unmatched opening tag is displayed at the end of the file. This means I have to jump back and forth from the end of the file (line 50 000) to the line where the tag was opened (e.g. line 80). I understand that the unmatched opening tag will become an error only at the end of the file, but maybe it is still possible to display the error elsewhere (where it is more helpful). This also helps if there are multiple umatched opening tags.

But this is just a minor enhancement, your decision to implement it or stick with the current behavior. Thanks.

htmlhint / HTMLHint

un-paired tags: highlight opening tag #57