Join the Stack Overflow Community
Stack Overflow is a community of 6.2 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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?

Thanks

share|improve this question
3  
The HTML is obviously invalid. How and when do you want to remove the tags? What exactly are you trying to do? – Eilon Jan 9 '10 at 23:59
1  
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 9 '10 at 23:59
up vote 14 down vote accepted

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

share|improve this answer
    
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 – user244333 Jan 10 '10 at 5: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 <html> tag and only one <body> tag if you have that information. – stiemannkj1 Jan 26 at 15:37
    
@stiemannkj1: The specification says that the html element is the root element, the head element is the first element in the html element, and the body element is the second element in the html element. The frameset element is used instead of the body element in a frameset document. – Guffa Jan 26 at 16:54
    
In conforming documents, there is only one body element. -> w3.org/TR/html5/sections.html#the-body-element – Pherserk Oct 1 at 8:04

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.

share|improve this answer
    
HTML file must have exactly one <html> and exactly one <body> tag. – el.pescado Jan 10 '10 at 0:26

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.

share|improve this answer

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.

share|improve this answer

i dont know... 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. im working on a project with someone elses base 64 encoder. here is the code. doesnt work but im 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>

share|improve this answer

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

share|improve this answer
    
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. – Jakar Mar 30 '15 at 20:11

Multiple HTML tags and Body tags works well with all browsers. For example you can see this page with multiple html and body tags: http://www.codefire.org/contact-us.html

but don't know it is valid and works well for search engines also.

share|improve this answer
    
The only reason that this page “works well” is due to the browsers’ rendering engine performing error correction. The browser will automatically strip out the extra <HTML>, <HEAD> and <BODY> elements, effectively making it the same as putting all the HTML into one page. – Jordan Clark Aug 28 at 18:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.