Switch browser to a strict mode in order to write proper html code

Question

Is it possible to switch a browser to a "strict mode" in order to write proper code at least during the development phase?

I see always invalid, dirty html code (besides bad javascript and css) and I feel that one reason is also the high tolerance level of all browsers. So at least I would be ready to have a stricter mode while I use the browser for the development for the pages in order to force myself to proper code.

Is there anything like that with any of the known browser?

I know about w3c-validator but honestly who is really using this frequently?

Is there maybe some sort of regular interface between browser and validator? Are there any development environments where the validation is tested automatically?

Answer 1

Is there anything like that with any of the known browser? Is there maybe some sort of regular interface between browser and validator? Are there any development environments where the validation is tested automatically?

The answer to all those questions is “No“. No browsers have any built-in integration like what you describe. There are (or were) some browser extensions that would take every single document you load and send it to the W3C validator for checking, but using one of those extensions (or anything else that automatically sends things to the W3C validator in the background) is a great way to get the W3C to block your IP address (or the IP-address range for your entire company network) for abuse of W3C services.

I know about w3c-validator but honestly who is really using this frequently?

The W3C validator currently processes around 17 requests every second—around 1.5 million documents every day—so I guess there are quite a lot of people using it frequently.

I see always invalid, dirty html code… I would be ready to have a stricter mode while I use the browser for the development for the pages in order to force myself to proper code.

I'm not sure what specifically you mean by “dirty html code” or “proper code“ but I can say that there are a lot of markup cases that are not bad or invalid but which some people mistakenly consider bad.

For example, some people think every <p> start tag should always have a matching </p> end tag but the fact is that from the time when HTML was created, it has never required documents to always have matching </p> end tags in all cases (in fact, when HTML was created, the <p> element was basically an empty element—not a container—and so the <p> tag simply was a marker.

Another example of a case that some people mistakenly think of as bad is the case of unquoted attribute values; e.g., <link rel=stylesheet …>. But that fact is that unless an attribute value contains spaces, it generally doesn't need to be quoted. So in fact there's actually nothing wrong at all with a case like <link rel=stylesheet …>.

So there's basically no point in trying to find a tool or mechanism to check for cases like that, because those cases are not actually real problems.

All that said, the HTML spec does define some markup cases as being errors, and those cases are what the W3C validator checks.

So if you want to catch real problems and be able to fix them, the answer is pretty simple: Use the W3C validator.

Disclosure: I'm the maintainer of the W3C validator. 😀

Answer 2

As @sideshowbarker notes, there isn't anything built in to all browsers at the moment.

However I do like the idea and wish there was such a tool also (that's how I got to this question)

There is a "partial" solution, in that if you use Firefox, and view the source (not the developer tools, but the CTRL+U or right click "View Page Source") Firefox will highlight invalid tag nesting, and attribute issues in red in the raw HTML source. I find this invaluable as a first pass looking at a page that doesn't seem to be working.

It is quite nice because it isn't super picky about the asdf id not being quoted, or if an attribute is deprecated, but it highlights glitchy stuff like the spacing on the td attributes is messed up (this would cause issues if the attributes were not quoted), and it caught that the span tag was not properly closed, and that the script tag is outside of the html tag, and if I had missed the doctype or had content before it, it flags that too.

Unfortunately "seeing" these issues is a manual process... I'd love to see these in the dev console, and in all browsers.

Most plugins/extensions only get access to the DOM after it has been parsed and these errors are gone or negated... however if there is a way to get the raw HTML source in one of these extension models that we can code an extension for to test for these types of errors, I'd be more than willing to help write one (DM @scunliffe on Twitter). Alternatively this may require writing something at a lower level, like a script to run in Fiddler.