After building a Wordpress site and setting the tracking list, the W3C validation fails. I examined the issues and found that Facebook's tracking code is causing the issue, particularly the following part being in the site's <head> part.
<noscript>
<img height="1" width="1" src="https://www.facebook.com/tr?id=XXX&ev=PageView&noscript=1"/>
</noscript>
It's funny, because Facebook offically recommends inserting this code in the <head> part.
I solved it by separating the <script> part from the FB tracking code in the <head> element and the <noscript> part in the <body> element. The validation now passed just fine.
Wondering if there is a better way to accomplish this, especially for maintenance purposes? This way one can easily forget that the Facebook tracking is present in 2 places and forget to change either one when changing the pixel code.
Related
I have, what I think, is a strange problem.
I have been creating a webpage for my site that, whenever I refresh the page, prompts Microsoft Edge (but not Chrome or FireFox) to ask me if I would like to translate the page from Portuguese and sometimes French.
I have been going through the HTML to identify what is causing this issue and I have discovered the following block of code is causing the issue:
<p class="ltol__pub">
This website is a publication of the livingtheOKlife company.
</p>
You may at this point be thinking that the name "livingtheOKlife" is causing the issue. However, I have used this name on multiple webpages in the past and never had this problem before. Furthermore, if I use a different line for the paragraph:
<p class="ltol__pub">
This website was designed and created by the livingtheOKlife
company.
</p>
The issue is resolved.
It is not an problem if I have to use the second line instead of the first. I can sleep at night if that is to be the case. However, I would very much like to know if anyone knows what may be causing the translate prompt to appear?
... and before you say it, I have included <html lang="en"> in the document.
... and I'm also aware this could be a bug, but I cannot find any record of it anywhere.
Add translate="no" in the <html> tag of your page. Also add <meta> tag with name="google" and content="notranslate" in the <head>. This tag should also work on Edge.
<html lang="en" translate="no">
<head>
<meta name="google" content="notranslate">
</head>
...
</html>
I am trying to write some HTML5 standards compliant code, where certain scripts need to be run only after the user has consented to cookies.
The html code looks like this, where the consent-script element, works exactly the same as the script element, however holds off loading the script until the consent has been given.
<head>
<consent-script src="myscript.js"></consent-script>
</head>
Everything works fine in all browsers,
However when I attempt to validate this using https://validator.w3.org/ , the custom-element tag apparently closes the head section, and generates a pile of errors.
Looking at the specifications, I can't see any reason why custom-elements cant be used in the section. But I am not sure.
My question is, can HTML5 custom-elements be used in HEAD? If I can, then its a bug in the validator service. If not, then I will have to find another way of not running a script until the right moment.
Thanks.
EDIT. Further investigation (Thanks #Danny'365CSI'Engelman) leads me to believe that even a browser is moving the custom element out of the head section, into the body section.
Some mock up code:
The source is:
<!DOCTYPE html>
<html>
<head>
<my-custom-elem></my-custom-elem>
<!-- other tags in the HEAD -->
</head>
<body>this is the body
</body>
</html>
Yet, chrome developer tools gives me:
<html>
<head>
</head>
<body>
<my-custom-elem></my-custom-elem>
<!-- other tags in the HEAD -->
this is the body
</body></html>
I am doing some work that would require me building up html inside of embedded iframes. Sort of like jsbin does.
However I'm stumped with my very first spike.
How come my html isn't being rendered when I put it inside an iframe?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<iframe>
<html>
<head><meta charset=utf-8 /></head>
<body>
<h1>Big Header</h1>
</body>
</html>
</iframe>
</body>
</html>
Here's my jsbin.
Additionally when I tried drawing some svgs inside the iframe with d3 they came out looking all weird and not scaling. After opening dev tools and editing the svg text as html I found that even adding a non-meaningful space anywhere would get it to redraw and render correctly. So bonus points if anyone can tell me any resources I can read up on cause clearly iframes don't work like I thought.
iframes need to be pointed at a page to load. you don't put html between iframe tags. if you put anything between iframe tags - it is text you want to display in the case the browser the client is using doesn't support the tag. you should make the html above its own local html page, and point the iframe src attribute above to point at that web page.
After a day of research:
Like Mike said, html inside an iframe is for the case the browser does not support iframes and will not show up otherwise. However, it IS absolutely possible to construct a document inside an iframe on the fly and without a server-side query. To do this, you have to use javascript to construct the document. You can get a reference to it and write html like so:
var iframe = document.getElementsByTagName('iframe')[0];
,doc = iframe.contentDocument || iframe.contentWindow.document
;
doc.open();
doc.write('<p>Some html</p>');
do.close();
Note that as Remy mentions here the document must be opened before writing and closed after.
From Richard Kiessig's ultra fast asp.net book,
Head section can't contain any tags that cause the browser to draw content on the screen, users will see noting until it has downloaded all resources in the section.
-- What he is referring from this statement?
<HEAD runat ="server">
<title>WebForm1</title>
<h1> Hi </h1>
</HEAD>
Browser is rending 'hi'.
h1 inside head is invalid html. It is not allowed. But if producers of webbrowsers would reject every invalid html-document, about 90% (or even more) websites would not displayed to the user.
So one browser producer built a browser who was able to render invalid sites too, and all the user started to use this browser. So the producers of correct webbrowsers had no other chance. They also built browsers that can render invalid html. And because of this, all webbrowsers that are in use are browsers that are able to render invalid html.
BUT:
There is no standard defined on how to render invalid html. So each producer has his own ideas about how to display an invalid document, and so, when you write invalid html, you could have luck, and the document looks fine in the one browser you used for developing and testing. But the users of your website do not only use YOUR browser. They use ALL available browsers, and if your html-code is invalid, the chances are really high, that many users use a browser you dont know, and this browser don't display what you want, but some garbage.
Conclusio:
Producers of really good Web-Browsers MUST produce browsers that can render any garbage.
Producers of really good html-documents MUST procuce valid html.
The statement “Head section can't contain any tags that cause the browser to draw content on the screen, users will see noting until it has downloaded all resources in the section.” is best ignored; it just causes confusion and lacks a point. Trying to correct the mistakes in it would take long and would not really lead to anything.
Regarding the treatment of the invalid markup
<HEAD runat ="server">
<title>WebForm1</title>
<h1> Hi </h1>
</HEAD>
the simple answer is that browsers have parsers that imply a closing </head> tag and an opening <body> tag, when they encounter <h1> while parsing a head element. This is in full conformance with HTML specifications.
In the fragment, the only invalid thing, apart from the runat ="server" attribute, which is not expected to be delivered to clients at all (it’s ASP not HTML), is the spurious end tag </HEAD>. The head element was already closed, it cannot be closed again.
Yeah, sure the <head></head> can contain all tags that by default carry the display:none; property. Those are elements like <meta> and <title>. But <h1> has to render on the screen, it is display:inline;. Most elements aren't display:none; though, and should be placed in the <body></body> section.
At that point it won't validate with w3c therefore you're breaking web standards. However, it should render just fine in all modern browsers. Most people would say you want to retain organization and quality when building web pages, part of that is making sure your code is the correct syntax.
ETA: Standard HTML5 markup...
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
In that lt IE9 comment, it adds HTML5 support to IE 8 and below which do not support it. ;-)
I am having trouble getting consistent behaviour from my Facebook Like button. I have created this example which I believe to be the simplest possible implementation...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Untitled Page</title>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
</head>
<body>
<fb:like href="http://www.stackoverflow.com" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</body>
</html>
I have saved this as an HTML file which I am serving from a webserver running on my machine (localhost - I assume this won't be a problem as the page I'm 'liking' in this example is public-facing).
If I try this in Google Chrome, it appears to work without a problem.
When I try it in IE9, the like button renders, but when I click it, a new IE window opens which is mostly blank apart from a blue Facebook header. The URL of this page is: http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?social_plugin=like&external_page_url=http%3A%2F%2Fwww.stackoverflow.com%2F
This is really confusing me as the example is about as simple as it gets! Any help would be really appreciated!
EDIT: A little more information. If I go to Facebook in IE9 and log-out, then try my like button again, a new window still opens but this time I can login. After logging in, though, I still get taken to the same blank page.
In desperation, I tried accessing my local page from http://127.0.0.1 instead of http://localhost
This appears to have solved (or at least worked around) the problem.
I would love to hear from anyone who can explain what this is all about!!