How to properly Include Html file in Html using Html only? : I have bootstrap template called [**Couponia**][1].

I wanted to make it less coded so i choose the **embed** method to embed the Html from Another Html file.
I was try the [Javascript method][2] but without success. The PHP inclode method is irralevant.

Also [another Html method][3] didnt work at all.

My embed method is coded like that:

    <embed type="text/html" src="header.html">

Now, i successeded to embed the header.html file into the index.html but as a result i got also a wierd long padding gap from the top header.

I embed this:

    <div class="top-main-area text-center">
        <div class="container">
            <a href="index.html" class="logo mt5">
                <img src="img/logos/logo4.png" />
            </a>
        </div>
    </div>
    <header class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <!-- MAIN NAVIGATION -->
                    <div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
                    <nav>
                        <ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">

                            <li><a  href="contact.html">Contact</a>
                                <ul>
                                </ul>
                            </li>
                            <li><a href="#">News</a>
                                <ul>
                                </ul>
                            </li>
                            <li class="active"><a href="index.html">Home</a>
                                <ul>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                    <!-- END MAIN NAVIGATION -->
                </div>
                <div class="col-md-6"> 
                </div>
            </div>
        </div>
    </header>
    <div class="gap"></div>

from a file **header.html** i made.

Here is how i embed it in the index.html:

<!DOCTYPE HTML>
<html>

    <head>
        <!-- Bootstrap styles -->
        <link rel="stylesheet" href="css/boostrap.css">
        <link rel="stylesheet" href="css/font_awesome.css">
        <link rel="stylesheet" href="css/styles.css">
        <!-- IE 8 Fallback -->
        <!--[if lt IE 9]>
    	<link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->
    
    </head>
    
    <body class="boxed bg-cover" style="background-image: url(img/backgrounds/wood.jpg)">
    
    
        <div class="global-wrap">
    
    <embed type="text/html" src="header.html">

I tried to play with the CSS settings but i didnt success.

Why i keep getting that long padding gap?


  [1]: http://remtsoy.com/tf_templates/couponia/demo_v3_3/index-coupon-layout-2.html
  [2]: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file
  [3]: http://www.w3schools.com/howto/howto_html_include.asp