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>
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>
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.
I am in the process of building a website and the browser keeps rearranging my HTML for some unknown reason. This is my code:
<DOCTYPE! html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
And here is a screenshot of what the browser uses:
(Sorry, don't have enough reputation to insert a real image)
This is all fine except when I want to use link to link an icon to the page, and it won't display unless it's in the head (I used the browser's dev tool and literally dragged the link up to the head and watched it appear immediately)
I've checked the source using the browser's developer tool and it looks exactly the same as in my code editor, so I know my web server isn't messing with it.
It does the same in Chrome and Firefox. It appears that they both use the head for script when a browser extension decides to put it there, but it does this even with no browser extensions.
I have tried the Notepad++ Encoding -> Convert to UTF-8 trick to remove the BOM character which supposedly fixes my issue but that did no good.
So how can I make the web page display as I wrote it?
Here is a download link to the file with the code snippet seen above:
http://www.filedropper.com/testpage_1
Thanks for any help!
Your Doctype is invalid. Error recovery is causing it to be treated as text. Since text is not allowed outside the body, it implies the start of the body element.
The correct syntax is:
<!DOCTYPE html>
The exclamation mark needs to be the second character.
This would have been picked up if you had used a validator.
I created a test page with your code and I can confirm that the developer tools show it like that. However, there is a typo in the DOCTYPE. Change the code to the following to fix it:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
The difference is that the exclamation mark needs to be before DOCTYPE, not after it. See The DOCTYPE in the HTML5 specification, which also points out that <!DOCTYPE html> is not case sensitive.
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.
Ridiculous simple HTML-file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="refresh" content="5; URL=./test.html">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
When I open the file with any browser, the browsers behave well and reload the page every 5 seconds.
But when I refresh the page manually between two refreshes (F5), the IE (V 8.0.6001.18702) doesn't evaluate the meta tag anymore and the page gets no longer refreshed. Opera, FF and Safari still work as expected and refresh every 5 seconds.
Has anybody else experienced such a problem? How (apart of using Javascript, of course) could this issue be solved?
Edit 1:
Verified this behavior also on IE6, so I guess it's a general IE problem. Any hints how to overcome this?
Edit 2:
To keep that topic going:
is that a known problem or would it
be worth to file a bug ticket
somewhere (where?)?
Could someone
verify that behavior with IE7 and/or
IE9?
In IE 9 it works fine.
P.S. you missed a few quotation marks should be:
<meta http-equiv="refresh" content="5;" URL="./test.html">
As far as i know theres only the mta or javascript way.
Another option might be to use
header("Location: url");
if you can use php, its not really a refresh in it common way, but you could use to redirect to the same page again
As with the meta way, did you tried to put a full url? ( IE, arrg )
Generally speaking, use of the non-standard META-REFRESH is frowned upon by the standards bodies. Having said that, did you try with a fully qualified URL instead of the relative URL? If you're trying to reload the same page over and over again, did you try omitting the URL entirely?
Use this, I suspect your URL is not setup correctly
<html>
<head>
<meta http-equiv="refresh" content="1">
</head>
<body>
</body>
</html>
This always refresh itself.
Hope helps
:)
Javascript is going to be your friend for this one... it ends up working a lot better across browsers for the most part. Besides, meta-refresh is going out of style.
The following script and body onload attribute will continuously refresh the page every 5 seconds.
<html>
<head>
<script>
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
</script>
<noscript>
<meta http-equiv="refresh" content="5" />
</noscript>
</head>
<body onload="javascript:timedRefresh(5000)">
<!-- Content -->
</body>
</html>