Switch browser to strict mode to write correct html code
Is it possible to switch the browser to "strict mode" to write correct code, at least during development?
I see always invalid, dirty html code (besides bad javascript and css) and I feel like one of the reasons is also the high tolerance of all browsers. So at least I would be ready for a stricter mode as long as I use the browser to develop for the pages to force myself to use the code correctly.
Is there anything similar with any of the well-known browsers?
I know about w3c-validator, but honestly, who really uses this often?
Is there some kind of regular interface between browser and validator possible? Are there any IDEs where validation is checked automatically?
source to share
Is there anything similar with any of the well-known browsers? Maybe some kind of regular interface between browser and validator? Are there any IDEs where verification is done automatically?
The answer to all of these questions is "No." No browsers have built-in integrations like what you are describing. There are (or have been) some browser extensions that will download each individual document and submit it to the W3C validator for validation, but using one of these extensions (or anything else that automatically sends things to the W3C validator in the background) is great a way to get the W3C to block your IP address (or the range of IP addresses for the entire company network) for abuse of W3C services.
I know about w3c-validator, but honestly, who really uses this often?
The W3C validator currently processes about 17 requests every 1.5 million documents every day, so I think they are used quite frequently.
I see always invalid, dirty html code ... I would be ready for a stricter mode as long as I use the browser to develop for pages to force myself to use the code correctly.
I'm not sure what exactly you mean by "dirty html code" or "correct code", but I can tell you that there are many cases of markup that are not bad or invalid, but which some people mistakenly consider bad.
For example, some people think that every tag <p>
should always have a matching tag </p>
, but the fact is that since the </p>
HTML was created, it never required documents to always have a match (in fact, when the HTML was created, the element <p>
was mostly empty an element, not a container, so the tag was <p>
just a marker.
Another example of something that some people mistakenly think is bad is the case of unquoted values; eg <link rel=stylesheet …>
. But the point is, if the attribute value does not contain spaces, it does not need to be specified at all. So that actually is really nothing wrong in this case, there is, for example <link rel=stylesheet …>
.
So there is basically no point in looking for a tool or mechanism to test such cases, because these cases are not really real problems.
All that said, the HTML spec defines some cases of markup as errors, and those cases are checked by the W3C validator.
So, if you want to catch real problems and can fix them, the answer is pretty simple: use the W3C validator.
Disclosure: I maintain the W3C validator. 😀
source to share
As @sideshowbarker points out, there is nothing built in in all browsers at the moment.
However, I like the idea and wish there is such a tool too (how I got to this question)
There is a "partial" solution: if you are using Firefox and viewing the source code (not developer tools but CTRL+ Uor right click on "View Page Source") Firefox will highlight invalid tag nesting and red attribute issues in the original HTML source source. I find it invaluable as a first pass looking at a page that doesn't seem to work.
This is pretty good because it doesn't really matter for an asdf
id that is unquoted, or if an attribute is deprecated, but it highlights buggy things like whitespace in attributes td
, gets messed up (this can cause problems if no attributes were specified), and found that the tag was span
not properly closed and that the tag script
is outside the tag html
, and if I missed doctype
or had content in front of it, it indicates a checkbox too.
Unfortunately, "seeing" these issues is a manual process ... I'd love to see them in the developer console and across all browsers.
Most plugins / extensions only access the DOM after it has been parsed and these errors are gone or thrown ... however if there is a way to get the raw HTML source in one of these extension models we can code the extension to validate of these types of errors, I'd more than like to help write one (DM @scunliffe on Twitter). Alternatively, this may require writing something at a lower level, such as a script to run Fiddler .
source to share