Multiple in same file

Question

I have a multiple html files in one file.

<html>
  <body></body>
</html>

<html>
  <body></body>
</html>

<html>
  <body></body>
</html>

And the result is that I get a messed up html file.

How to correct this without removing <html> <body> tags from the rest?

I am using python to generate the html file.

If I use the self.response.out.write(function(query)) I get a nice html page.
If I use it a second time self.response.out.write(function(query2)) Then the page gets distorted.

Can we correct this using iframes? Can somebody give an example?

The HTML is obviously invalid. How and when do you want to remove the tags? What exactly are you trying to do? — Eilon, Jan 09 '10 at 23:59
Why do you need many HTML tags in one file? There's probably a better way to do whatever you're trying to achieve. — keyboardP, Jan 09 '10 at 23:59
There are many scenarios for e.g. The site is modularized in many parts for e.g. HEADER, MAIN, ABOUT. You need some scripts and styles for ABOUT section, this section can be reused somewhere or maybe removed (I don't want it's styled to be mixed with other styles. So don't suggest putting them in the main style). — Kishan Vaishnav, Oct 17 '19 at 18:04

score 29 · Accepted Answer · answered Jan 10 '10 at 00:56

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.)

Thanks a lot! I was able to merge all the files using python by this method. This is just another way of deleting the unwanted html body sections — , Jan 10 '10 at 05:23
I know this is really self evident, but I would love to know where in the w3c html spec it says that a valid document has only one `` tag and only one `` tag if you have that information. — stiemannkj1, Jan 26 '16 at 15:37
@stiemannkj1: The specification says that the [html element](https://www.w3.org/TR/html5/semantics.html#the-html-element) is the root element, the [head element](https://www.w3.org/TR/html5/document-metadata.html#the-head-element) is the first element in the html element, and the [body element](https://www.w3.org/TR/html5/sections.html#the-body-element) is the second element in the html element. The [frameset element](https://www.w3.org/TR/html5/obsolete.html#frameset) is used instead of the body element in a frameset document. — Guffa, Jan 26 '16 at 16:54
In conforming documents, there is only one body element. -> https://www.w3.org/TR/html5/sections.html#the-body-element — Michele Carino, Oct 01 '16 at 08:04

score 12 · Answer 2 · answered Jan 10 '10 at 00:00

12

There is no way to correct that without removing the extra <html> tags.

Having multiple <html> tags (or <body> tags) means that your document is not valid HTML, and all the rules on displaying it go out the window. A browser can try it's best, but there's really no way of knowing how it's going to look.

answered Jan 10 '10 at 00:00

zombat

92,731
24
156
164

2

HTML file must have exactly one and exactly one tag. – el.pescado - нет войне Jan 10 '10 at 00:26

score 4 · Answer 3 · answered Jan 09 '10 at 23:59

You should not use multiple <html> tags in a single file.

What are you trying to do?

If you're combining multiple HTML files, you should use an XML parser to combine the elements properly. Alternatively, you could make another page with a sequence of IFRAMEs referencing other HTML files.

score 1 · Answer 4 · edited Mar 31 '20 at 15:54

1

Multiple HTML tags inside same HTML doesn't mean it will not working. Try yourself at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Remind this, when something is working, it doesn't mean have to be correct though.

edited Mar 31 '20 at 15:54

M--

25,431
8
61
93

answered May 14 '13 at 04:32

Rizky Wahyudi

31
1

1

It's true that `working != correct`, but it's usually only reasonable to use the incorrect way to get something working when there isn't a correct way. And if it's not correct, it's also much less likely to be forward compatible. – Reed Mar 30 '15 at 20:11

score 0 · Answer 5 · edited Mar 31 '20 at 16:07

0

I don't think that you are supposed to be able to use multiple HTML and body statements in one file. Also there is really no reason to do so.

edited Mar 31 '20 at 16:07

M--

25,431
8
61
93

answered Jan 10 '10 at 00:00

ase

13,231
4
34
46

score 0 · Answer 6 · edited Mar 31 '20 at 15:53

Maybe you could create a script to show only one body at a time in the head and put the other heads in side the bodies of the others. I'm working on a project with someone elses base 64 encoder. Here is the code. Doesn't work but I'm experimenting with different things.

<!DOCTYPE html>
 <html>
  <head>
   <title>Multipage Single HTML</title>
   <script>
    function show(shown, hidden) {
     document.getElementById(shown).style.display='block';
     document.getElementById(hidden).style.display='none';
     return false;
    }
   </script>
   <style>
     .selected {
     background-color: green;
  }

     .navigator {
     background-color: maroon;
     float: center;
  border: groove turquoise 15px;
     }

     .navigation_button {
     color: red;
     font-size: 32px;
     float: center;
     margin-right: 32px;
     margin-left: 32px;
     }

     h1 {
     text-align: center;
     }

     p {
     text-align: center;
     }
    </style>
   </head>
   <body>

    <div id="index" style="display:block">
     <h1>Home</h1>
     <div class="navigator" style="overflow:auto;">
      <p><a href="#" class="navigation_button">Home</a>
      <a href="#" class="navigation_button" onclick="return show('storage','index');">Storage</a>
      <a href="#" class="navigation_button" onclick="return show('2','index');">2</a>
      <a href="#" class="navigation_button" onclick="return show('3','index');">3</a>
      <a href="#" class="navigation_button" onclick="return show('4','index');">4</a></p>
     </div>
    </div>

    <div id="storage" style="display:none">
     <h1>Storage</h1>
     <div class="navigator" style="overflow:auto;">
      <p><a href="#" class="navigation_button" onclick="return show('index','storage');">Home</a>
      <a href="#" class="navigation_button">Storage</a>
   <a href="#" class="navigation_button" onclick="return show('2','storage');">2</a>
      <a href="#" class="navigation_button" onclick="return show('3','storage');">3</a>
      <a href="#" class="navigation_button" onclick="return show('4','storage');">4</a></p>
     </div>

<html>
  <head>   
    <title>Base64 File Encoder</title>
    <style>
    .body {
      text-align: center;
      font-family: Helvetica;
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .item {
      position: relative;
      margin: 10px;
      background: #F5F5F5;
      padding: 20px;
    }
    
    .remove {
      position: absolute;
      right: 10;
      top: 10;
      opacity: 0.5;
    }
    
    textarea {
      width: 100%;
      margin: 2px 0px;
      height: 120px;
      font-family: Courier;
      border: none;
      background: whitesmoke;
    }
    
    #results {
      position: relative;
      margin: 50px;
    }
    #dropper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #dropper.hover {
      opacity: 0.5;
      background: lightblue;
      z-index: 100;
    }
    </style>
  </head>
  <body class="body">
    <h1>Drop Files Here To Save Them To The System</h1>
    <div id="dropper"></div> 
    <div id="results"></div>
    <script>
    if (typeof window.FileReader === 'undefined')
      alert('File API & FileReader not supported');
    
    var dropper = document.getElementById("dropper");
    var results = document.getElementById("results");
    
    dropper.ondragover = function () { dropper.className = 'hover'; return false; };
    dropper.ondragend = function () { dropper.className = ''; return false; };
    dropper.ondrop = function (e) {
      e.preventDefault();
      var files = [].slice.call(e.dataTransfer.files);
      files.forEach(function (file) {
        var reader = new FileReader();
        reader.onload = function(event) {
          fileLoaded(file.name, event.target.result);
        };
        reader.readAsDataURL(file);
        dropper.className = '';
      });
      return false;
    };
    
    function fileLoaded(filename, dataUri) {
    
      var div = document.createElement("div");
      div.className = 'item';
    
      var remove = document.createElement("button");
      remove.className = 'remove';
      remove.innerHTML = 'x';
      remove.onclick = function() {
        if(localStorage) localStorage.removeItem("b64-"+filename);
        results.removeChild(div);
      };
      div.appendChild(remove);
    
      var name = document.createElement("div");
      name.innerHTML = filename;
      div.appendChild(name);
    
      if(/^data:image/.test(dataUri)) {
        var imgDiv = document.createElement("div");
        var img = document.createElement("img");
        img.src = dataUri;
        img.style['max-width'] = '100px';
        img.style['height-width'] = '100px';
        imgDiv.appendChild(img);
        div.appendChild(imgDiv);
      }
    
      var ta = document.createElement("textarea");
      ta.onclick = function() {
        ta.select();
      };
      ta.value = dataUri;
      div.appendChild(ta);
    
      results.appendChild(div);
      if(localStorage) localStorage.setItem("b64-"+filename, dataUri);
    }
    
    if(localStorage)
      for(var filename in localStorage)
        if(filename.indexOf("b64-") === 0)
          fileLoaded(filename.replace("b64-",""), localStorage.getItem(filename));
    </script>
  </body>
</html>

    </div>

    <div id="2" style="display:none">
     <h1>2</h1>
     <div class="navigator">
      <p><a href="#" class="navigation_button" onclick="return show('index','2');">Home</a>
      <a href="#" class="navigation_button" onclick="return show('storage','2');">Storage</a>
      <a href="#" class="navigation_button">2</a>
      <a href="#" class="navigation_button" onclick="return show('3','2');">3</a>
      <a href="#" class="navigation_button" onclick="return show('4','2');">4</a></p>
     </div>
    </div>

    <div id="3" style="display:none">
     <h1>3</h1>
     <div class="navigator">
      <p><a href="#" class="navigation_button" onclick="return show('index','3');">Home</a>
      <a href="#" class="navigation_button" onclick="return show('storage','3');">Storage</a>
      <a href="#" class="navigation_button" onclick="return show('2','3');">2</a>
      <a href="#" class="navigation_button">3</a>
      <a href="#" class="navigation_button" onclick="return show('4','3');">4</a></p>
     </div>
    </div>

    <div id="4" style="display:none">
     <h1>4</h1>
     <div class="navigator">
      <p><a href="#" class="navigation_button" onclick="return show('index','4');">Home</a>
      <a href="#" class="navigation_button" onclick="return show('storage','4');">Storage</a>
      <a href="#" class="navigation_button" onclick="return show('2','4');">2</a>
      <a href="#" class="navigation_button" onclick="return show('3','4');">3</a>
      <a href="#" class="navigation_button">4</a></p>
     </div>
    </div>

   </body>
 </html>

Multiple in same file

6 Answers6

Linked