A consultant who is helping us with Microsoft Marketing has recently sent me a snippet of code to add to our website. The code contains both SCRIPT tags and DIV tags and should be placed in the HEAD tag according to him. I questioned that at first because DIV's shouldn't be placed in HEAD but he persisted and I did as told. Now we are setting up a routine where we on a regular basis will set up registration pages, where each time this type of code (with both DIVs and SCRIPTs) will be placed in the HEAD element of those pages. It looks like it works but I prefer to follow HTML standards. How bad a violation is this? Should I just roll with it as long as it works and what are the risks?
CodePudding user response：
How bad a violation is this?
Your HTML is invalid. Quoting the spec on the <div> element:
Contexts in which this element can be used:
- Where flow content is expected.
- As a child of a dl element.
The second one is easy: a <head> element is not a <dl>. How about the first? What can a <head> element contain?
Content model:
- [...]
- Otherwise: One or more elements of metadata content, of which exactly one is a
titleelement and no more than one is a base element.
The <head> element cannot contain flow content.
What can a <body> element contain?
Content model:
- Flow content.
It's the appropriate parent for a <div> element.
Should I just roll with it as long as it works and what are the risks?
The browser will be doing this:
- It starts to evaluate your page. So far, your HTML is valid.
- It sees a
<div>element. Technically, you don't need to close the</head>, so the page is not yet invalid.- First, it implicitly renders a
</head>, - starts a
<body> - and then renders your
<div>
- First, it implicitly renders a
- It might now encounter more of your the elements that should be in the
<head>but are not. It will do its best to use these metadata tags (like<link>,<meta>, etc.). Already ambiguity seeps in. - It will then encounter the
<body>you wrote yourself. It will now have to either ignore it or merge it in some way with the implicitly opened<body>.
It re-shuffles some of your HTML so that the DOM tree is somewhat sensible. You've lost control of what you want the browser to do and are up to its whims.
CodePudding user response：
You can put divs in <header> as of HTML5, but never in <head>.
<head> is reserved for metadata, loading css...
Elements in the <body> part are the ones that will be displayed on the website, the <head> elements are like the "backend" of your frontend.
<div> goes in the <body> part of the website, but never in the <head>
The reason is that the user experience will be unpredictable. If it works, it's because today's browsers are very forgiving, but it's better not to tempt the fate. It'll work until some point when it's gonna create huge problems.
References: