CODEWITHSUNDEEP
htmlvalidation
user280109
user280109

Reputation: 1476

Find unclosed HTML tags

I've been editing a lot of HTML pages with basic text editor, notepad. When I went to validate them the validation service is saying there's a div tag that is not closed. I tend to find automatic error reports such as these don't tend to be too reliable, i.e they will give you a line number and the error but often times the error is actually in another part of the file entirely.

I'm just wondering if there is a way to find the closing tag for an opened HTML tag. For example, you click on a tag then click a shortcut, and the program will jump to the closing tag. I know this functionality is in homesite, but I don't have homesite, and its a bit of a bulky program anyway.

To sum up, I would like to know how to find html tags that don't have closing tags.

Upvotes: 29

Views: 59303

Answers (8)

Nemo
Nemo

Reputation: 2544

If your code is very messy, not prettified nor indented, v.Nu (as seen at https://validator.w3.org/nu/) will often get confused (for instance if there's an extre closing tag, it may not manage to select the one which is really wrong).

One solution is code folding: by collapsing all the code which is marked as a child of a certain node, you can often easily spot some incorrect hierarchy.

An example of editor which supports code folding is Kate editor: see the arrows on the left in their screenshot. Kate screenshot

Upvotes: 1

Graham Hannington
Graham Hannington

Reputation: 1957

free lightweight html editors ... online html validation services that can highlight unclosed tags?

Use linter-vnu.

linter-vnu is a package for the Atom editor that uses the Nu Html Checker (v.Nu) to validate HTML or XHTML documents.

Disclosure: I am the developer of linter-vnu.

linter-vnu uses another Atom package, linter, to integrate v.Nu and Atom.

For example, if you open the following test.html file in Atom:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

(with a deliberately missing closing </div> tag)

then Atom (or rather, linter-vnu, thanks to linter and v.Nu) displays the following error messages:

  • Unclosed element “div”. at line 8 col 1 in test.html
  • End tag for “body” seen, but there were unclosed elements. at line 10 col 1 in test.html

and marks those lines in the editor with red dots.

If you click the "at..." (hyperlinked text) in the error message, the editor insertion point moves to the corresponding line, and a popup appears under the line, with the error text ('Unclosed element "div".').

If you save your HTML document with the file extension .xhtml, and open it in Atom, then v.Nu validates your document as XHTML (XML) rather than HTML, with slightly different messages. In this case, just one error message:

  • required character (found “b”) (expected “d”) at line 10 col 3

where line 10 contains the closing </body> tag. v.Nu was expecting a </div> tag instead; it was happy with </ - it was expecting a closing tag - but it was expecting the element name to begin with "d" for "div", not "b" for "body".

I make the following claims, as of November 2016:

  • v.Nu is the best option for validating (X)HTML(5).
  • linter-vnu is the best option for interactively harnessing v.Nu in an editor. linter-vnu itself is trivial; it's just a few lines of "glue" code. What makes it the best option is the Atom editor and the Atom linter package.

I welcome counterclaims and questions about these claims. I'd be happy to be proven wrong and be shown something better. Especially if, like v.Nu and linter-vnu, it's free.

Upvotes: 0

Albert Wiersch
Albert Wiersch

Reputation: 556

CSE HTML Validator Lite is a free lightweight editor (for Windows) that will check your HTML (just press F6) and find missing end tags and other problems. You can also press Ctrl+M on a start tag or end tag and it will take you to the matching start or end tag.

A simple online service that will also do this (and more) is OnlineWebCheck.com. There are other online services but in my opinion the one I just mentioned is the simplest one to use and understand.

Full disclosure: I am the developer of CSE HTML Validator Lite and http://www.OnlineWebCheck.com/ which is based on CSE HTML Validator.

Upvotes: 1

BrainBUG
BrainBUG

Reputation: 125

I am using two online-tool, which work very fine. jona.ca and tormus.com

Upvotes: 2

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

Use the firefox view source - wrong code will be in different color

Upvotes: 16

lucideer
lucideer

Reputation: 3882

If you save your HTML as page.xhtml (instead of page.html), the browser (Firefox/Chrome or Opera) should find the un-closed tags for you without the need for a validator. Just remember to rename them .html before serving them online - IE doesn't support .xhtml files yet.

Edit (3 years later): This post's still getting comments/upvotes so a slight amendment. IE9 and IE10 do now support xhtml files.

Upvotes: 46

Gavrisimo
Gavrisimo

Reputation: 1837

Notepad++ - never had any problems with it and also never had any unclosed html tag with it.

You can just click on any element and see if it has a closing tag. Also you can do this: click on "TextFX"(left from plugins in navigation) -> click on "Text FX HTML Tidy" -> click on lets say hmm "TiDy clean Document - wrap". That should fix your html document, aka close all unclosed elements.

Upvotes: 9

Jason McCreary
Jason McCreary

Reputation: 72971

http://validator.w3.org/

Does more than just unclosed tags. Should be used by all front-end developers, IMO.

Upvotes: 5

Related Questions