How to find the unclosed div tag [closed]
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
This post was edited and submitted for review 11 months ago and failed to reopen the post:
Improve this questionOriginal close reason(s) were not resolved
A unclosed div problem almost make me crazy. It is very difficult to track especially when the page is long and complex.
<div>
<span>
<b>Text</b>
<a href="/">Title <span>another test</span>
</span>
</div>
How can I find unclosed HTML-tags on开发者_Go百科 a website?
Any suggestions?
I made an online tool called Unclosed Tag Finder which will do what you need.
Paste in your HTML, and it will give you output like "Closing tag on line 188 does not match open tag on line 62."
Update: The new location of the Unclosed Tag Finder is https://jonaquino.blogspot.com/2013/05/unclosed-tag-finder.html
As stated already, running your code through the W3C Validator is great but if your page is complex, you still may not know exactly where to find the open div.
I like using tabs to indent my code. It keeps it visually organized so that these issues are easier to find, children, siblings, parents, etc... they'll appear more obvious.
EDIT: Also, I'll use a few HTML comments to mark closing tags in the complex areas. I keep these to a minimum for neatness.
<body>
<div>
Main Content
<div>
Div #1 content
<div>
Child of div #1
<div>
Child of child of div #1
</div><!--// close of child of child of div #1 //-->
</div><!--// close of child of div #1 //-->
</div><!--// close of div #1 //-->
<div>
Div #2 content
</div>
<div>
Div #3 content
</div>
</div><!--// close of Main Content div //-->
</body>
the World Wide Web Consortium HTML Validator is great at catching HTML errors.
I know that there have already been some good answers, but I came across this question with a Google Search and I wish someone would have pointed out this online checking tool...
http://www.tormus.com/tools/div_checker
You just throw in a URL and it will show you the entire map of the page. Very useful for a quick debug like I needed.
Use notepad ++ . you can find them easily
http://notepad-plus-plus.org/download/
Or you can View source from FIREfox - Unclosed divs will be shown in RED
1- Count the number of <div in notepad++ (Ctrl + F)
2- Count the number of </div
Compare the two numbers!
If you use Dreamweaver you could easily note to unclosed div. In the left pane of the code view you can see there <> highlight invalid code button, click this button and you will notice the unclosed div highlighted and then close your unclosed div. Press F5 to refresh the page to see that any other unclosed div are there.
You can also validate your page in Dreamweaver too. File>Check Page>Browser Compatibility, then task-pane will appear Click on Validation, on the left side there you'll see ► button click this to validate.
Enjoy!
Taking Milad's suggestion a bit further, you can break your document source down and then do another find, continuing until you find the unmatched culprit.
When you are working with many modules (using a CMS), or don't have access to the W3C tool (because you are working locally), this approach is really helpful.
Div tags are easy to spot for me. Just download the file, scan it or so with netbeans, then continue debugging it. Or you can use the Google chrome developer kit, and view the page source. I'm a bit of a weird developer, I don't always use the "best" stuff. But it works for me.
I'll link you with some developer stuff I use
http://www.coffeecup.com/free-editor/
http://www.netbeans.org
Those are just a few of the good ones out there. I'm open to more suggestions to this list :D
Happy programming
-skycoder
加载中,请稍侯......
精彩评论