Why browser accepts lose html syntax? - html

Below meta tag syntax is accepted by the browser,
<meta http-equiv="refresh" content="3; redirect.html"/>
but, https://validator.w3.org could accept below syntax(only),
<meta http-equiv="refresh" content="3; url=redirect.html"/>
So,
1) Why browser accepts lose syntax of html?
2) For production code, what is the standard approach to validate html syntax?

There were bugs (or simply loose parsers) in browsers.
People wrote code that depended on those bugs.
Other browsers copied those bugs so that the code from the previous step would work.
Go to 1.

Related

How can I get an html5 page to render in MFC

I need to render an HTML5 page with jQuery in a CHtmlView in an MFC application.
The page renders rather pathetically, and I get a syntax error when it gets to the jquery script tag.
I've tried the following:
<meta http-equiv="X-UA-Compatible" content="IE=11">
It did nothing. I even upped the MSHTML browser version to 11 in the registry and get the same syntax error. I really do not want to go back to IE6-style javascript. Can someone help me please?
Apparently the meta tag does solve the issue. What I didn't realize was that my html view was running in a frameset, and the directive is ignored in a frame of a frameset. Does anyone here even remember framesets? Anyway, adding this line and removing the frameset was the answer:
<meta http-equiv="X-UA-Compatible" content="IE=11">
If you don't set the correct browser Emulation for your application this will not work.
Please read this MSDN article.
So create an entry for your application in FEATURE_BROWSER_EMULATION and set the Version to 11000!

X-Frames-Options in the meta tag

I've created an test application where i look into the different defense techniques against Clickjacking and other UI redressing attacks. One of the most used techniques is the X-Frames-Options along the Frame-Busting code. What i fail to understand is the reason why the following isn't recommended, and according to OWASP: (https://www.owasp.org/index.php/Clickjacking_Defense_Cheat_Sheet) doesn't work (Even though it works in my test applciation, i can't frame the page if the following is included)
<meta http-equiv="X-Frame-Options" content="deny">
Any explanation or link to an answer would be greatly appreciated.
Apparently this is because the META tag might not be received until information has already rendered in the subframe. This still works in browser such as Chrome and Firefox, but is ignored by IE.
According to many resources (not only your URL, but also e.g. this one) the <meta> tag should be ignored.
If your browser does not do so, that does not mean that all browsers don't do that as well. So to be on a safe side you must specify the HTTP header.
The question why so? Probably one of the reasons is the same why they tell to avoid using the following:
<meta name="robots" content="noindex" />
The reason, in my opinion, is that to get this meta tag you need to download and parse the whole page. To read the HTTP header you don't need to do so.
In this case HTTP header is just more efficient way to speed up the browser, so that could be the reason of forcing you to kill the meta tags.

IE renders my page in Quirks mode

I've spent the past few hours trying to fix several issues and confusing myself.
When the site is viewed in IE8 it appears to go into quirks mode, I say appears as I don't have access to that machine, only a screen print but to replicate the mess I had to select Quirks form Dev tools.
The site is a fairly complicated one. At the top of each page a php init file is called and so on.
The index currently looks something like:
<?php require'core/init.php';?>
<?php include_once 'include/IE8Etc.php';?>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
The IE8Etc and IE=Edge are recent additions. I then read that IE will enter this mode if the doctype is not the first thing it sees and that comments can cause problems.
Does this apply to the php I have before it? Should my doctype declaration stay where it is or should it be moved to the top of the init page. Even as I write it it sounds like a ridiculous question and I'm sure it's fine where it is but I need to make certain.
Thanks.
The point you mentioned in the question about the doctype needing to be the first thing in the page applies to the page as it is seen by the browser.
The content of the PHP code is entirely irrelevant, if it doesn't generate any output.
However, if the PHP is generating output -- even if that output is nothing more than a blank line -- then it will be making the doctype invalid.
So the first thing you should do is open the page in your browser, and select the 'view source' option. look at the actual HTML that the browser receives. If there's anything before the doctype, then it needs to be moved or removed.
Once you've done that, the second thing to do is run your page through the W3C Validator. This will tell you about any other HTML errors you might have on your page. You have at least one, as the <meta> tag needs to be inside the <head> tag, but there may be other errors too. It is possible for some HTML errors to throw the browser into quirks mode, so you should fix anything that is reported by the validator (although the doctype issue is by far the most common cause).
Hop that helps.
The Problem
The linebreaks after both of the <?php ?> snippets are counting as characters. If Internet Explorer detects characters (even whitespace) before the doctype declaration, it enters quirks mode. As EricLaw correctly states, you should also consider moving all your meta tags into the head section, and consolidating your php code.
The Solution
The correct code would look like this:
<?php
require'core/init.php';
include_once 'include/IE8Etc.php';
?><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Title</title>
The whitespace in front of the DOCTYPE may come from the BOM (byte-order mark) at the beginning of files saved in UTF-8 encoding with BOM. After removing the BOM (save as ANSI as UTF-8 in Notepad++), the DOCTYPE was correct, but it still went to Quirks mode until the meta tag/header for IE-Edge was added.

any side effect if I add ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">' on my page?

HTML5Boiler plate suggests we put this one in our HTML page if we favour Chrome over IE
(which is my case)
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
We all understand how it works.
If the user is using IE but it has also installed the Chrome Frame the chrome frame will be used to run the page (which is probably much faster when it comes to execute my js)
The question: is there any 'bad' side effect ?
any particular reason why I should not add that snippet ?
Thanks
The only downside I know about this snippet is that validators don't accpet yet the content value of this meta (even if they should), so if it seems annoying to you, just remember you can also specify it inside an .htaccess (as suggested also on html5 boilerplate site)
See https://gist.github.com/1292092 for an example of htaccess inclusion
See also this thread about meta validation
This does not have any downsides.
This will force the browser to render as properly as it can, ignoring those awful IE Compatibility modes.
This will not break the browser, just peacfully explain to it, that this page doesn't wish to be experimented with, and just to be shown properly.
There are in fact downsides to this meta tag (along with conditional comments) which is why we recommend you reference it from the server. See this issue for details.

Meta-refresh doesn't work?

I have a page using something along the lines of
<meta http-equiv="refresh" content="0;url=http://example.com/" />
but for certain users on a certain workstation this doesn't work. The is in IE. Is there something wrong with cookies or a setting somewhere which would cause this to fail? I never heard of such a thing.
The problem is that when IE sees this:
<meta http-equiv="refresh" content="0;http://www.example.com" />
it expects the contents attribute to contain a number. The only time IE will check for a URL is if the content attribute contains "URL=" so the redirect that is most usable in all browsers is this:
<meta http-equiv="refresh" content="0;URL=http://www.example.com" />
The above example would redirect immdetiately but if you changed the 0 for another number it would wait that many seconds. Hope this all makes sense, it should work just fine but I still think my first idea was the better one.
There is a security setting in internet explorer that does not allow meta tag refresh. It is under the Security tab, then choose Custom Level and the Meta Tag Refresh under Miscellaneous. If that is disabled, it would stop the meta refresh from working.
Aside from being able to disable it selectively, it is automatically disabled if you set IE's security level to 'High' [observed in IE9].
is it a really old version of IE? if so, try:
<meta http-equiv="refresh" content="0;url=http://example.com/"> </meta>
It needs a white space. HTML editor will complain, but just ignore it.
Check out this solution. It handles both javascript and meta-refresh at the same time:
Meta-refresh and javascript
The META tag is not an empty tag and does not have a closing tag in HTML, only in XHTML. (If you are really are sending XHTML, it may not work right on older versions of IE anyway, there are only workarounds to send XHTML to older IE versions.)
Try:
<meta http-equiv="refresh" content="0;url=http://example.com/">
W3 Schools META Tag Description
You might also try:
Checking the major and minor versions of IE. You can do this on the help->about menu option.
IE has historically gotten all confused by filenames and MIMEtypes. Make sure that you are sending your HTML as an htm or html extension file, and that those filetypes are set up on your server to send text/html mimetype.
Make sure your server isn't sending a conflicting meta refresh http header.
In case anyone tries to use meta refresh to redirect to new URL in Facebook applications ( either Page Tab app or IFRAME app ), the tag is disabled by Facebook somehow.
Workaround is:
<script>
top.window.location = 'http://example.com';
</script>
Remember to target "top", as Facebook applications are in IFRAME.
Just a wild guess: maybe there are some adblockers installed on those machines where the redirect does not work.
Can't think of any other reason why this common technique works on some machines while it fails on others for you.