<brython-options> in <head> causes validation errors
CookiePLMonster opened this issue · comments
I'm including Brython on my page by including the following in the <head> element:
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js" crossorigin="anonymous"></script>
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js" crossorigin="anonymous"></script>
<brython-options pythonpath="/assets/brython" cache="true"></brython-options>However, this appears to be causing validation errors, that then snowball into a lot of other errors:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fcookieplmonster.github.io%2Fbonuscodes%2Fcmr-3%2F
Error: Element [head](https://html.spec.whatwg.org/multipage/#the-head-element) is missing a required instance of child element title.
Considering this is an issue, where should page-wide <brython-options> be placed? In <body>?
According to this post, browsers automatically move such unknown tags to <body>, which is the main reason why I am seeing so many validation issues:
https://stackoverflow.com/questions/65392061/are-html5-custom-elements-allowed-in-head
I identified that moving <brython-options> to <body> resolves the validation errors. By the time you are checking this issue, an update to my website will probably be live and the validator link from the first post may not be showing those errors anymore.
I just check, and I confirm that there is no such error anymore. Anyway, getting a validation error is not a big deal if the browser runs the content correctly.
Can we close this issue ?
Anyway, getting a validation error is not a big deal if the browser runs the content correctly.
I'm not sure about that, maybe they don't cause any issues, but as it stands, the presence of this element in <head> scrambles the resulting HTML quite badly. Let me illustrate:
I reintroduced the tag in <head>, like so:
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js" crossorigin="anonymous"></script>
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js" crossorigin="anonymous"></script>
<brython-options pythonpath="/assets/brython" cache="true" debug="1"></brython-options>
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,700italic,600italic,400italic" rel="stylesheet" type="text/css">
<title>Colin McRae Rally 3 | Silent’s Blog</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="Colin McRae Rally 3" />
<meta property="og:locale" content="en" />
<meta name="description" content="Cheat Generator for Colin McRae Rally 3." />
<meta property="og:description" content="Cheat Generator for Colin McRae Rally 3." />If you open this page in Chrome and use Inspect Element (not View Source!), you'll see that the browser has pushed the element to <body>, and that also pushed the meta tags there:
Therefore, it's likely one of those things that probably are not an issue, but seeing this resulting HTML does not make me confident enough to keep it as-is. Personally I think the documentation might need to be updated to mention that <brython-options> must be placed in <body>.
Ok, I have updated the documentation. Thanks !
Looks good, thank you!