We Keep Coding

Only allow access to the site for HTML5 Users [duplicate]

What is the best way to detect browser compatibility for HTML 5 syntax? And prompt the user if the browser is not compatible?
I understand the tutorial which shows how to test browser compatibility for HTML5. But I am curious to know if that is the only way? Do I need to inspect each and every element?

Have a look at Modernizr:
Taking advantage of the new capabilities of HTML5 and CSS3 can mean
sacrificing control over the experience in older browsers. Modernizr 2
is your starting point for making the best websites and applications
that work exactly right no matter what browser or device your visitors
use.
Thanks to the new Media Query tests and built-in YepNope.js
micro-library as Modernizr.load(), you can now combine feature
detection with media queries and conditional resource loading. That
gives you the power and flexibility to optimize for every
circumstance.
It has a lot of built in methods to test for browser features and provides a useful way of providing fallback code for when features you want to use are not supported.
More info: http://www.modernizr.com/

"HTML5 compatibility" is a very vague thing.
When people ask about HTML5 compatibility, they generally mean "what browsers support these new-ish browser features X, Y and Z which I want to use?"
There are a whole raft of features which have been added to browsers in the last couple of years, and which are now commonly referred to as "HTML5".
In fact, there aren't any browsers which support every new feature out there.
What you need to do is work out which features have wide enough support to make them worth using, which features you'd like to use but are happy to work around if you encounter a browser that doesn't support them, and which features you absolutely have to use to achieve what you want to do.
A fairly comprehensive list of new browser features, along with browser support charts for them all is available at http://caniuse.com/ (if you scroll to the bottom, you'll see in the overall compatibility table that the very best current browsers only support 89% of features they've tested. This will improve over time as new versions are released... but of course, also new features will be introduced too)
For determining at run-time whether the user's browser supports a given feature, you can use Modernizr. This is a Javascript-based tool which will give you a set of CSS classes and Javascript flags which tell you what features are supported. You can use this to trigger alternate behaviour in your site if the browser doesn't support a feature you want. (Modernizr also includes the HTML5Shim functionality, which allows IE to at least cope with HTML pages containing new HTML5 elements).
For more cross-browser compatibility, there are a whole range of hacks which have been written to allow older browsers (mainly IE to be fair) to support a range of newer features. You can see a fairly comprehensive list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Obviously, trying to run more than a few of these at once in IE will severely impare your site's performance, but it can be handy if you need to support one or two features. My favourite at the moment is CSS3Pie, which gives IE6/7/8 support for CSS rounded corners, shadows and gradients.
Hope that helps.

Here is a tutorial of detecting HTML5 compatibility & capabilities :
http://diveintohtml5.ep.io/detect.html
There are alternative HTML5 detectors using similar techniques, but I would suggest to use Modernizr.
To sum up the "score" of HTML5, you can design your own "marking scheme". Sum up weighted score gives you the total score.

The simplest method : in JS you create a new element, and set the attributes to be a colorpicker (HTML5) in JS, and return the type of the element (it is a picker only if the browser ic HTML5 compatible) :
var element = document.createElement("input");
element.setAttribute("type", "color");
return element.type !== "text";

do I need to inspect each and every element?
Nope. Only the parts you want to use that aren’t backwards-compatible.
See Five Things You Should Know About HTML5, especially points 1 and 4.

I would suggest you can try using <audio>Anything within Audio tag here</audio>.
Any text written inside the between <audio> and </audio> will be displayed in browsers that do not support the <audio> tag.
Since the audio tag is newly added in HTML5.

This works on IE 11 (and hopefully other browsers too).
// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
It's a take from Clement's answer and the link from Shivan (http://diveintohtml5.info/detect.html). Clement's answer didn't work in IE 11.
In my case I use jQuery UI for everything so don't need Modernizr (also it seemed slower). Reading the rather negative "How to use Modernizr" blog comments supports this assumption.
But now jQuery have split browser compatibility between v1 and v2 development streams, its necessary for people wanting to support non-HTML v5 browsers to load EITHER the v1 or v2 jQuery core script at the start. So this "one liner" HTML v5 detection is perfect. Here's how I load jQuery properly using the result:
// Use jQuery v2 for HTML v5 browsers else v1 to support old browsers
var jQueryScriptPath = (isHtml5Compatible)
? "/Scripts/jquery-2.0.3.js"
: "/Scripts/jquery-1.10.2.js";
document.writeln("<script src=\"" + jQueryScriptPath + "\" type=\"text/javascript\"><\/script>");
If you vote this answer up please also vote clement and Shivan's answers too :-)

input type=button with and without form tag

I have created lots of buttons for a large number of pages (usually 5-10 in a row at the bottom of each page inside a table cell) using input type="button" name="..." value="..." onclick="some javascript event handler" etc, basically to link to other pages of the same group. All these pages are ultimately linked from an iframe tag on a single page. The buttons are working fine offline on my PC at least. But, now I've suddenly realized that I haven't used any 'form' tag for these buttons.
So my question is, is this 'form' tag really necessary? Will there by any problem after I upload? I would prefer not to add the form tag now to so many pages if it's not really necessary, because that's going to be a real drag. But, I don't want to suffer afterwards either.

No it is not necessary as long as you are not doing any Get/Post and grouping form elements together. They should work completely fine without a form tag.

There are two issues to be concerened with:
Is it valid HTML?
Turns out that it is valid HTML (see Is <input> well formed without a <form>?), so you are on the safe side here.
Will all common browsers accept it?
After googling around I haven't seen any information on problems wih this use of Input tags. That suggests that all common browsers accept this valid HTML (as they should). When developing any website that is accessible to the general public I would always do a manual cross-browser check to discover any abnormalities certain browsers may habe with my site.
Problem is that you most likely won't be able to tell from looking at your server logs whether certain browsers have a problem with your HTML. It may just not work on IE 6 and you would never be able to find unless a disgruntled customer calls up and informs you.
If this is a generally accessible website get some stats on the most commonly used browsers, decide which ones you want to support, and verify that the website is behaving properly on thiee browsers. This is a pain in the ass, but there is no way I know of to get around that. Browsers may not react to valid HTML properly.
As a rule of thumb, Firefox, Chrome, and Safari unsually behave well, and because of auto-updates most people will have a very recent version installed. If the latest version of the browser works I wouldn't be too concerned that users with some older version will have trouble.
The real test is always Internet Explorer. While version 8 and 9 are pretty standards-compliant, IE 7 certainly needs checking. IE 6 is the worst offender for unusual behavior. It was introduced in 2002, but today still 6% of the population use it! Most of this comes from cracked copies of Windows XP in China, but it is also used quite a lot in corporate networks, where OS and browsers are centrally deployed, and administrators have not managed to progress since early 2000.
In conclusion: Your code is unusual but ok, test it manually on the browsers you expect.

JavaScript creating DOM elements behind the scences

There are a some elements (HTML5) that are not supported or partially supported in some browsers.
I'm interested in what is happening when document.createElement() is used - an element is created and then if there is no support, it becomes text, which is not rendered?
Just out of a curiosity is there a way to see what elements are supported, something like a list of them, by using JavaScript and not by compatibility sheets?

1) the site gives detail about what is supported by your current browser.
http://html5test.com/
2) give full detail for every browser, what is supported and what is not
http://www.findmebyip.com/litmus

You could take a look at these pages:
http://html5accessibility.com/
http://wufoo.com/html5/
They list up what elements are supported and not. What happens if the element is not supported depends on the browser.
You should take a look at http://modernizr.com/ . Which is a js-project that helps older browser to render and display html-elements.

Do something if web browser is IE, in JavaScript

Where do I place this script in my HTML for it to work? And what changes do I have to make to it?
<script type="text/javascript">
var browser=navigator.appName;
if(browser="Microsoft Internet Explorer")
{
document.getElementById("html").innerHTML="\
<body><p>Your browser is IE.</p></body>";
}
</script>

Could I make a slightly alternate suggestion, skipping the spoofable UA string, and using a Microsoft-implemented (and standards-compliant) strategy:
<!--[if ie]>
<script type="text/javascript">
document.getElementyId("html").innerHTML = "<body><p>Your browser is IE.</p></body>";
</script>
<![endif]-->
To use this put it in the head of the document. I don't think it can be placed inside script tags (since it's based on html comment syntax, not JavaScript).
This uses conditional comments (Quirksmode.org link).

If at all possible, I would suggest avoiding direct browser detection.
Almost every case where someone wants to detect a specific browser (usually IE), it is because there is a particular feature that they want to use which isn't available in that browser, or has bugs.
But browser detection fails as a strategy here for a number of reasons:
You don't know whether a future version of that browser may correct the problem, in which case your code to fix the issue may itself cause problems.
If another browser also has a problem with that feature, you would have to detect that browser as well. Taken to the logical extreme, since no two browsers have exactly the same set of features, you end up having to detect every possible combination of browser, version and operating system.
Browser detection is virtually impossible to guarantee to be accurate. Most browser detection scripts are based on hacks that trigger quirks that only affect a particular browser, and most are pretty un-reliable.
Even just IE detecting isn't good enough. There is a big difference between IE6, IE7 and IE8. And IE9 is just around the corner, which will be massively different again.
So what should you do instead of browser detection?
Detect the feature. There are a number of ways of doing this, but the best solution I know of is a script called Modernizr. Place this script in your site, and your page will be given a bunch of CSS classes and Javascript properties which you can use to determine whether a given feature is available or not.For example, if you want to use gradients on your site, most browsers can use CSS for this, but IE and older versions of other browsers cannot. For these browsers you easily can use a background image instead. Modernizr will give you a CSS class of either cssgradients or no-cssgradients, and you can style these two classes accordingly.
Add the missing features to the browser. This is more tricky, but for certain features it can be done, particularly for IE. A good example is CSS3Pie which is a hack that allows IE to use the CSS border-radius feature (and one or two other features too) which is available in all other browsers. There are whole range of other little scripts like this which can improve the functionality of IE.
Use a library like JQuery which does all this work for you. With JQuery, you can be much more confident that most of your Javascript code is going to work across all browsers.
If you must use browser detection to tell if the user is running IE (and I accept that there are some occasions when it is necessary), then use conditional comments, as per #David Thomas's answer. But do so sparingly, after considering any other ways around it.

if(browser=="Microsoft Internet Explorer")
== for comparison, = for assignment
Place it in the head tags.

Dynamically added AJAX content with wrong markup

i am using jQuery to dynamically add content
$("#articles").prepend('<article><header><p>info</p><h2>You are using Internet Explorer</h2></header><p>It is recommended that you use a modern browser like Firefox, Chrome or install Google Chrome Frame to experience better performance and advanced HTML5 and CSS3 features.</p></article>');
but the HTML i got was
notice the />

jQuery is using innerHTML, which doesn't always work with HTML5 elements even when the normal ‘shiv’ is in use. You would need another extra workaround hack, eg this.
I really don't think the proposed new HTML5 elements are ready for real-world use. They get you no practical gain yet, aren't even finalised, and cause a bunch of problems (working around which can be fragile and cost performance).
They don't really add anything semantic to your warning markup, and you're only ever showing it to IE anyway—the browser that can handle them least well of all.