Include HTML5 file in another HTML5 file

Question

A moron-level question here: how do I include one HTML5 file (like a navigation bar or sidebar) inside another one? I would prefer not to have to copy/paste all of the same stuff over and over across a website.

I've done a lot of searching through this site so far, and all of the answers I've found so far seem to strip all of the formatting and css from the "included version". If it helps, I'm using GitHub Pages and an HTML5 template to make a personal website, which sorta leaves out server-side stuff like server-side includes or PHP (I hear those don't work there).

What I've got right now:

<!--some html-->
<header id="header">
    <a href="index.html" class="logo">Some text</a>
    <ul class="icons">
        <li>Some more stuff that I want to include </li>
    </ul>
</header>
<!--more html-->

And then this solution results in the HTML getting included, but all of my styling getting stripped. I also tried <embed> and got the same result.

Main file:

<!--some html-->
<object name="foo" type="text/html" data="header.html"></object>
<!--more html-->

Header file to include (header.html):

<header id="header">
    <a href="index.html" class="logo">Some text</a>
    <ul class="icons">
        <li>Some more stuff that I want to include </li>
    </ul>
</header>

Answer 1

http://www.hongkiat.com/blog/html-import/

The above link discuss about your issue. Import is used to use to include html file to other html file. Hope this solves your problem.

Answer 2

Github pages brings all the features you want.

And no : you're not a moron to ask such a question.

You can start your journey : here

Then go Jekyll.