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.
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.
Use the firefox view source - wrong code will be in different color
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.
http://validator.w3.org/
Does more than just unclosed tags. Should be used by all front-end developers, IMO.
I am using two online-tool, which work very fine.
jona.ca and tormus.com
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.
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.
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.
Related
Dev Ed has a number of courses on YouTube. I have been viewing on named HTML and CSS Tutorial.
I have Visual Studio Code installed and added the packages suggested in the Tutorial. I get to the point where the <!DOCTYPE html> tag has been created and on a new line the tag <html> has been typed. This automatically completes the end tag, hence <html></html>. If I am understanding this correctly, Ed then says hit the Tab key but it just produces spacing as you would normally expect with a Tab.
My expectation is that it formats the code as follows:
<html>
</html>
This does not happen.
According to VSCode release notes, such a feature has been removed from the IntelliSense and replaced with </.
In order to autocomplete your tags you can do either of these:
Use ctrl + space to select from provided items in the suggestion list.
Use third party plugins like this.
Save your file as .html or if already have done that, click on the text between CRLF and smiley face and select HTML
we are using CKEditor in our project. We recently upgraded the version from 3.X to 4.x. After the update, we are not able to see <img> tags in the old saved documents. When we click on the source, we see
<p> <p> in place of a <p><img ......><p>.
On further debugging, we found that many documents which had the <img> tag were also having a junk attribute in the <img> tag like <img /="/" src="/folder/11801321/112267100.neck.png" height="308" width="467">.
By junk, I mean this part of tag /="/". This was a bug introduced while we were processing the user's input. We reverted old CKEditor version to 3.X and the editor was internally taking care of the junk values. it was trimming it off. so the users never complained.
But now the CKEditor 4 is not handling the HTML in the same way. It is actually stripping the whole <img> tag.
We have two options to fix this issue.
1. Remove the junk characters in all the documents. This is huge data. Needs approval from the user to do it.
2. Change CKEditor 4 config settings to get the same behavior as the CKEditor 3.X.
We are in favor of point 2. I have been searching and trying couple of config settings but haven't been able to nail it.
Let me know if any one has faced the same issue and have resolved it.
If you really want you can set all the code inside the img tag as "protected" and this way the editor will not strip this code:
CKEDITOR.config.protectedSource.push(/<img \/="\/" .*?>/g)
Remember that your final html will not be valid.
Since that part of the code is "protected" you will not see these images in the editor.
Here is a working example for that:
https://jsfiddle.net/oLb4Lmdb/
However - I really think it will be best to replace the string <img \/="\/" with <img in the source once the ckeditor instance is ready:
CKEDITOR.instances.editor1.on('instanceReady', function() {
this.setData(this.getData().replace("<img /=\"/\"", "<img"))
})
This way you don't need to go over all the data in the "backround", and the replacement will be done "on the fly" for every document that you need to edit.
You can check this jsfiddle:
https://jsfiddle.net/k1ewc29p/
I'm starting to learn web development and am using pyramid with chameleon. I just took some sites html source as a template in Dreamweaver and then copied the code into a chameleon .pt file.
The html code displays fine in dreamweaver but I get this error when running it in pyramid:
chameleon.exc.ParseError
ParseError: Unexpected end tag.
- String: "</div>"
I have tried dreamweavers cleanup function and it said it removed 2 empty tags but I still get this error. My traceback is all related to errors in the chameleon and doesn't show the specific line its having problems with in my template itself.
Is there a way to identify the actual line where the error is occurring?
I'm not sure if there's a pyramid or chameleon specific solution or if there are general methods to find errors in HTML tag.
Chameleon expects templates to be well-formed, and is less forgiving of unbalanced tags and incorrect attribute markup as DreamWeaver is.
Note that the error doesn't necessarily mean that there is a </div> tag too many. If the opening <div> has a syntax error such as a missing = on an attribute declaration (e.g. <div class"foobar"> then the opening tag is not recognized and the corresponding closing tag is going to be flagged as well.
You could run your template through an XML validator, there are several available online (such as http://www.validome.org/xml/, http://www.xmlvalidation.com/ and http://xmlgrid.net/, Google lists many more). These are bound to give you a slightly more helpful message as to what is wrong with your template.
Never used pyramid/chameleon before, but it looks like you have to go through the code and remove an extra </div> tag. When you get the message that it removed two empty tags, that probably means it removed the open and closing of a set of tags
e.g. <div></div> or <p></p>
Go through your code and for every <div> there should be a </div>.
i have 2 errors coming up on firefox. Theses errors are shown below.
1-there is no attribute "property". This refers to the line below:
<meta property="og:title" content="blahblahblah"/>
This is to do with linking it to social networks i.e facebook etc
2-there is no attribute onerror. This refers to the line below:
<img src="281.jpg" width="125" height="125" onerror="onImgErrorSmall(this)"/>
This basically displays a default image if the actual image dose not show up.
the question really is, i know these are not valid attributes but how can i get around them, if anyone has any ideas id be grateful.
For the meta tag there is no property attribute
For the img tag there is no attribute called onerror
No way to get around them as they are not part of the html markup
Live with them or remove - they will never validate against a web standard
You pasted stuff into a wysiwyg editor directly from Microsoft Office or OpenOffice document.
These properties are proprietary.
You should clean up or remove the markup before pasting. (Most of wysiwyg editors in use today have this function (a.k.a. paste from Word))
This link may be able to help you out.
onerror is only supported by the "browser" that Microsoft makes.
I've build a website for a client and as we all know 'it works just fine on my machine' :-) as it does on several machines at my clients location. But they have (so far) 3 pc's on wich some errors occur, like cannot find ElementById. These machines are normal up-to-date windows machines running IE8.
When comparing the html-source of the page on my machine with one of a machine on wich the error occurred I found that there seems to be a s--tload of html injected. Loads of DIVS and SPAN around attributes and elementID's and even javascript :
Normal:
<script type="text/javascript" language="JavaScript">
After injection:
script will be surrounded with a SPAN tag using class 'HTML_ELM'
type will be surrounded with a SPAN tag using class 'HTML_ATR'
"text/javascript" will be surrounded with a SPAN tag using class 'HTML_VAL'
<<span class="HTML_ELM">script</span> <span class="HTML_ATR">type</span>=<span class="HTML_VAL">"text/javascript"</span> <span class="HTML_ATR">language</span>=<span class="HTML_VAL">"JavaScript"</span>>
even ID's of html elements are surrounded with these SPAN tags (class='JS_STR') probably causing the problem of cannot find ElementById
I have no idea why this is happening, I also cannot find a cause on Google when searching for these weird classnames used by the injected SPAN/HTML tags (HTML_VAL, HTML_ELM, HTML_VAL).
Does anyone here know what could be causing this ?
many thanks,
Jurjen.
Well, since you are running IE8, are some of the machines in compatibility mode?
This extra code comes from the IE8 source viewer. In IE8, if you view source and go to the File menu there are two options under Save, HTML Source and Formatted HTML View. The Formatted HTML View contains all the extra code you are seeing.
Do your HTML files start with a valid DTD ?
like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Try running it through html-tidy.
An online tidier can be found at http://infohound.net/tidy/.
Then, it'll be easier to track down the problem. It sounds like malformed html.
Googling span class=HTML_ELM returns lots of results but they've got nothing much in common.
You don't have a syntax highlighter script (or something similar) running on the site by any chance?