Multiple ≪Html≫≪Body≫ ≪/Html≫≪/Body≫ in Same File

Multiple html body /html /body in same file

An HTML document can only have one html tag and one body tag. If you just put several HTML document together, it will be an invalid document, and the browsers may have problems displaying it.

You could remove the duplicate tags, but it might not be that simple. The document can also have only one head tag, so you would have to combine the contents from the head tags from the separate pages. If the pages contains style sheets that conflict, it will be harder, then you have to rewrite the style sheets and it's usage in the pages so that they no longer conflict. The same goes for Javascript; if you have scripts with conflicting names, you have to rewrite them so that they no longer conflict.

There may be content in the pages that conflict also. An id may only be defined once in a page, so if the pages uses the same identifiers, you have to change them, and their usage in style sheets and scripts.

If you make sure that there are not such conflicts, you should be able to combine the pages.

If you have documents where you only have control over the body content, you can circumvent this by adding starting and ending tags for comments, so that the ending of one file and start of the next file are ignored. That way you can keep the start of the first file, the content from each file, and the ending of the last file:

<html>
  <body>
  content...
  <!--
  </body>
</html>

<html>
  <body>
  -->
  content...
  <!--
  </body>
</html>

<html>
  <body>
  -->
  content...
  </body>
</html>

(Note that this will only use the head section from the first page, the others will be ignored.)

Make header and footer files to be included in multiple html pages

You can accomplish this with jquery.

Place this code in index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

and put this code in header.html and footer.html, at the same location as index.html

<a href="http://www.google.com">click here for google</a>

Now, when you visit index.html, you should be able to click the link tags.

Is it OK to have multiple html, head, and body elements in single page

First: don't do that.

Browsers are very tolerant if it comes to parse HTML, therefore firefox has a valid DOM in your case. Having multiple html, body and head tags does not affect the performance of the page parsing. But be aware that the browser will propably run in a quirks mode and affect the rendering of any of your elements.

Anyways this is totally against any standards and you should avoid producing such pages. Some browsers could possibly reject to display anything of your site. That may be some browsers you havent thought of, a text browser, or a lightweight browser on a older mobile phone for example.

Is it possible to show multiple HTML file contents in a HTML page at the same time?

This link ( Do I have to rewrite an html header everytime I want to use it? ) will show you how to do that .

Thank you @Shehary and @floor for the best answers.

Multiple ng-content

You could add dummy attributes header and body as opposed to template references (#header, #body).
And transclude using ng-content with select attribute like select="[header]".

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

DEMO

How to add content to html body using JS?

You can use

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

document.getElementById("parentID").innerHTML+= "new content"

Multiple ≪Html≫≪Body≫ ≪/Html≫≪/Body≫ in Same File