CODEWITHSUNDEEP
html
15 Volts
15 Volts

Reputation: 2077

body tag inside head tag in HTML?

I have a weird argument with a school teacher who says body tags go inside the <head> tag in HTML.

Now many students are learning it. Somehow, I can't find a way to prove him wrong. Yes, all the documentation including w3schools and MDN show that body doesn't belong to head tag. I have tried writing some scratchpad codes with HTML + CSS + JS with <body> inside <head> and they worked just fine.

It's quite confusing that the browser's inspect element also didn't warn even after that CSS and JS code added.

Is there any obvious side effect or does something break when <body>...</body> is used inside <head>...</head>?

Upvotes: 0

Views: 2440

Answers (3)

MrRobboto
MrRobboto

Reputation: 752

Here are the hard sources to prove this - the living HTML standard, and the HTML5 recommendation. These are the resources MDN uses but you're better off showing your teacher the original source that can't be disputed - this stuff was spec'd out from the beginning explicitly.

HTML Living Standard - Head:
https://html.spec.whatwg.org/multipage/semantics.html#the-head-element

HTML5 Recommendation - Head:
https://www.w3.org/TR/html50/document-metadata.html#the-head-element

HTML Living Standard - Body:
https://html.spec.whatwg.org/multipage/sections.html#the-body-element

HTML5 Recommendation - Body:
https://www.w3.org/TR/html50/sections.html#the-body-element

It's spelled out...

Head:
"Contexts in which this element can be used: As the first element in an html element."

Body:
"Contexts in which this element can be used: As the second element in an html element."

And also the Content Model for head is totally different, explicitly stating head is for metadata, not flow content:
"Content model: If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element. Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element."

EDIT: It's hard to show anything breaking because this is such an amateur and simple mistake, nearly every browser fixes it for you. That only applies to the DOM structure, properties, etc. though - as soon as you go to parse the innerHTML or textContent you see there are subtle differences in white space when you nest the body.

For instance, say you have an app that has an HTML editor that loads up the current page's HTML (for some reason) to show the user the document markup. If you nest the body, it will screw up white space and not reflect the actual source as it should. It's a stretch but this absolutely breaks the intended functionality of innerHTML and textContent IMO and would require workarounds in a use-case because the indentation and line breaks aren't preserved.

This is innerHTML on a simple doc - looks great, just like the code did:

enter image description here

Now if I nest the body, it does not look the same and is showing some mutated version after browser has messed with it to fix the invalid HTML - not to mention, it no longer reflects the structure that was in source - you will never see the browser allow the body inside the head:

enter image description here

Upvotes: 4

Pete
Pete

Reputation: 2463

You should share with them the standard HTML (root) tag documentation that will show HEAD and BODY as child elements. Reference: The HTML Document / Root element

Upvotes: 1

Dirk J. Faber
Dirk J. Faber

Reputation: 4701

The contents of the <body> tag are displayed in the browsers page, whereas the contents in <head> are not directly displayed. <head> should only contain the meta-data. In might work "just fine" because modern browsers are capable of handling bad code, but you may run into trouble with older (or other) browsers.

Also, it's just wrong and bad coding.

Upvotes: 0

Related Questions