Weird case from a project I recently took over.
There are some HTML tags that are missing their closing '>'
e.g.:
<div
class="example"
</div>
This is currently not breaking anything in Chrome but when viewed in IE it has issues.
I've tracked down a number of mistakes with it (looked like copy paste work with an iron-ajax block) but would really like a tool that could help me find other places this is happening.
I currently use Atom but would be willing to use anything to track this down.
you can use the below package for Atom to validate HTML
https://atom.io/packages/w3c-validation
HTMLhint(https://github.com/tcarlsen/atom-htmlhint)
https://github.com/atom/bracket-matcher
HTML Tidy? Or any of a number of other HTML validators or linters.
Related
Paragraph
why <p> hello </a> still print out the result?
i know that the proper one is this <p> hello </p>
anyone willing to explain this for me please?
Unlike most other mark-up languages like XML or JSON, HTML was designed from the beginning to allow invalid code. Browsers are supposed to do their best and fix your errors. Whether you have static HTML or you use a server-side language like PHP to generate it is completely irrelevant: the browser doesn't know or care about how you've created the mark-up.
You can see browser's fixes with built-in developer tools (in most browsers it's mapped to F12 or you can right click and select Inspect Element):
The opening p tag is enough for it to work, but you need the closing tag in order to make sure that elements that come after function correctly. Without the proper closing tag your code will inevitably face issues.
This is basic HTML, not much to do with PHP; For all you care you can even create a blank file called "index.html" or "index.php" and type in it hello without any brackets, any headers etc. and you will still get the web browser to display "hello".
Now for paragraphs - you can easily type <p>hello without a closing and this will work fine for MOST browsers, but it is inadvisable to do so, because it might produce unexpected results.
You should read a bit more about HTML's paragraphs, for example here: http://www.w3schools.com/html/html_paragraphs.asp
I'm having a problem regarding html.I got a html script contains no </body> nor </html> closing tags in the file yet when its source code view in the browser,both the </body> and </html> closing tags appears in the source code together with a <div>...</div> block of code.
How could this possible to happen?
Sometimes, if you are using web authoring applications like dreamweaver, netbeans, .... etc, they complete your un-complete tags before publishing them.
And, nowadays browsers are smart enough to correct those mistakes, while rendering the HTML file.
May be you will not get the same result in old browsers like IE6, FF1........ Try it...
Those tags are defined as being optional in the specification. Their presence can be implied via the rules of HTML, so the tags themselves don't actually need to be present.
They should not show up when you view the source though.
Are you perhaps using something that shows a serialization of the DOM instead? e.g. the DOM Inspector in Firebug? The div sounds suspiciously like an element I remember older versions of Firebug adding.
Occasionally press a hyphen so the first symbol in a html file (php generated) was not a tag start, but a general symbol. Firefox didn't care about it (it was a joomla source), but IE acted like I did something more dangerous: not centered table, misaligned text, looked like a complete mess. I know that there are always things like this, but I wasted a couple of hours to figure out what was going on. Is there a html validator that can point to things like this?
Thanks
Total Validator would flag it with This element is not recognised.
Most validators will do that.
Try the w3c validator. I tried a valid file with a symbol at the start and it flagged it.
I've inherited some rather large static HTML files that need to be fixed up to work in webkit-based browsers, Safari in particular. One of the common bugs I've found that cause rendering differences is missing </div> tags. (Both IE7+ and FF3+ seem to ignore these, or make good guesses as to where to close the DIVs, and render as expected.) I'm used to using vim with HTML syntax highlighting for editing, but end up writing awk scripts to match starting and ending tags.
What is your favorite tool or technique for matching start and end tags in a large HTML file?
UPDATE: I'm currently in a shop that targets HTML 4.01 Strict, not XHTML.
The W3C HTML Validator works fairly well, or if you want something a little simpler then the Tidy FireFox plugin also works.
The w3c Validator can be (extremely) verbose, but it does check for missing closing tags.
HTML Tidy is a great command line tool. I often use it with WGet
Most IDE's usually let you know via highlighting, fuzzy-underline or a warning.
Div Checker is a great tool that focuses on div tags specifically.
While other tools were only able to tell me that "some tag was missing somewhere".
Div-Checker removes other tags, code, and most comments, to create a clean visual structure of just the divs themselves.
From this div map, it's fairly easy to see if nested divs are correctly paired !
I was able to locate a missing div left out by a wordpress theme developer, with the help of this tool.
Here is the Posted Answer from #noah-whitmore that enlightened me to this awesome tool.
There are a couple other useful tools mentioned in that thread as well, such as unclosed-tag-finder (visually not so easy to read, but helpful if your missing tag is not a div).
vim/gvim & NetBeans both do a great job of tag matching
What is your favorite tool or technique for matching start and end tags in a large HTML file?
A text editor with a built-in XML well-formedness checker, combined with using XHTML for everything.
Sublime Text with the Tag plugin has a Tag Lint feature which which aims to check correctness of opened and closed tags.
Is there a firefox plugin or something similar I can use to validate that my html output has properly closed tags?
You can use either the W3 HTML Validator or HTML Tidy online.
If all you want to check is whether or not your tags are nested and closed properly (and not other things like that all images have an alt, etc), then you just want to check the XML well-formedness of it.
Run it through this validator http://www.validome.org/xml/ and tick the "Well-Formedness Only" checkbox.
I use this little guy Html Validator. I like him. The errors it makes help you find your nesting problems (along with others). I don't know of a validator that only checks for nesting issues.
The best is to install web developer tabs:
https://addons.mozilla.org/en-US/firefox/addon/60
There you can find the link for validator and many other things.
I've been using the web developer addon for a long time.
https://addons.mozilla.org/en-US/firefox/addon/60
It's got an HTML validator link in the tools menu.