Why we write header and footer element inside of the body element in HTML5?
My question is why we do not write them separately when all the three tags has different semantic meaning?
Because the semantic meaning they have isn't what you think it is.
The <head> contents data about the document while the <body> contains the parts of the data that get rendered.
A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.
HTML5 header before body?
No. <header>-tags mark the header of arbitrary sections on your site. Don't confuse them with the website's <head> section that contains scripts, meta-tags, etc. <header>-tags belong into the <body>-tag. The basic structure of a <head> followed by a <body> has not changed in HTML5.
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-header-element
HTML being changed in, footer being placed inside the body when coded outside the body
That's on purpose. The <footer> tag can only be used inside the <body> tag.
Should the header and footer tags be inside the main tag
Since it represents the central part of your page - the "beef" if you want - and headers and footers are considered adjacent content, I would argue that headers and footers should not be child elements.
In theory, yes, using <main> does mean the same as adding role="main". But as it has limited support at the moment, using <main role="main"> is recommended.
Notepad++ Codefolding - Everything but the header is under body tag?
it sounds like you have improper matched tags, or perhaps typos. Did you try a new document that is just
<html>
<head></head>
<body></body>
<footer></footer>
</html>
to see if that folds correctly? If it does, it is quite likely there are simply problems in how your tags are ordered or written.
On an HTML5 note, <footer> goes inside the <body> element, not outside of it. It's a normal content tag, so goes inside the main document body.
BODY tag is added even when I delete it
Putting elements into <html> other than <head> and <body> is a big no-no
The reason is because browsers are attempting to resolve your violation of the HTML specification. According to MDN, the permitted content for an <html> element is as follows:
Permitted content
One
<head>element, followed by one<body>element.
This means that, if HTML is parsed that violates this specification, the browser is allowed to attempt to resolve it in any way it sees fit, including, as you described, injecting a <body> tag where you don't want it.
tl;dr
Just put your tags in the <head> and <body> where they belong respectively and you won't have any issues.
Related Topics
HTML - How to Do a Confirmation Popup to a Submit Button and Then Send the Request
Table Row Won't Contain Elements with Position:Absolute
How to Create a Slanted Background with CSS
How to Use the Z-Index Properly
How to Start a New Line with a Particular Item with Flexbox
Hidden Radio Button But Box Around It in IE8
Making All Images Appear with the Same Height in Bootstrap
How Is Bootstrap V4 Loading _Reboot.Scss
How to Remove the Top Margin in a Web Page
Why Does a Diamond with a Questionmark in It Appear in My HTML
Grails: Displaying Created Image in Gsp
Chrome: Automatic Shift of Web Elements
Three Divs Side by Side with Spacing in Between
Why Does Firefox Not Honor CSS Font-Size for Code Tags Wrapped in Pre
Fonts Not Rendering Uniformly in Browsers
Responsive 2-Column CSS Layout Including Sidebar with Fixed Width