How to use import in HTML

Question

I want to put a common header and footer for multiple html pages and thought of using HTML5 import.

But the header is not coming... Is there something I am missing?

I used in my index.html.

My index.html code:

<html lang="en">
 <head>
  <!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Life</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="img/favicon.jpg"/>

<!-- CSS
================================================== -->       
<!-- Bootstrap css file-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome css file-->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Superslide css file-->
<link rel="stylesheet" href="css/superslides.css">
<!-- Slick slider css file -->
<link href="css/slick.css" rel="stylesheet"> 
<!-- smooth animate css file -->
<link rel="stylesheet" href="css/animate.css">  
<!-- Elastic grid css file -->
<link rel="stylesheet" href="css/elastic_grid.css"> 
<!-- Circle counter cdn css file -->
<link rel='stylesheet prefetch' href='css/jquery.circliful.css'>    
<!-- Default Theme css file -->
<link id="orginal" href="css/themes/eucalyptus-theme.css" rel="stylesheet">
<!-- Main structure css file -->
<link href="style.css" rel="stylesheet">

<!-- Google fonts -->
<link href='css/opensans.css' rel='stylesheet' type='text/css'>
<link href='css/varela.css' rel='stylesheet' type='text/css'>
<link href='css/montserrat.css' rel='stylesheet' type='text/css'>
</head>
<body> 
 <!-- BEGAIN PRELOADER -->
<div id="preloader">
  <div id="status">&nbsp;</div>
</div>
<!-- END PRELOADER --> 
<!--=========== BEGIN HEADER SECTION ================-->
<header id="header">
<link rel="import" href="header.html">     
</header>
<!--=========== End HEADER SECTION ================--> 
<!--=========== BEGIN ABOUT SECTION ================-->
<br>
<br>
<br>
<br>
            <br>
            <br>
<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12">
        <div class="about_area">
          <!-- START ABOUT HEADING -->
           <div class="heading">

            <h2>Introduction</h2>
            <br>
            <br>
            <p>Intro content here </p>
          </div>

                </div>
              </div>
            </div>
          </div>


</section>
<!--=========== END ABOUT SECTION ================-->


 <!-- Javascript Files
 ================================================== -->

 <!-- initialize jQuery Library -->
<script src="js/jquery.min.js"></script>
<!-- Google map -->
<script src="js/map_js.js"></script>
<script src="js/jquery.ui.map.js"></script>
 <!-- For smooth animatin  -->
<script src="js/wow.min.js"></script> 
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- superslides slider -->
<script src="js/jquery.superslides.min.js" type="text/javascript"></script>
<!-- slick slider -->
<script src="js/slick.min.js"></script>    
<!-- for circle counter -->
<script src='js/jquery.circliful.min.js'></script>
<!-- for portfolio filter gallery -->
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/elastic_grid.min.js"></script>
<script src="js/portfolio_slider.js"></script>

<!-- Custom js-->
<script src="js/custom.js"></script>
</body>
</html>

As of now I just considered the header.

header.html code :

    <!-- BEGIN MENU -->
  <div class="menu_area">
    <nav class="navbar navbar-default navbar-fixed-top past-main" role="navigation"> 
      <div class="container">
      <div class="navbar-header">
        <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>



        <!-- TEXT BASED LOGO -->
        <a class="navbar-brand" href="index.html">eXpOS<span>NITC</span></a>


      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="Roadmap.html">Roadmap</a></li>
          <li><a href="Documentation.html">Documentation</a></li> 
           <li><a href="#pricing">Downloads</a></li> <!--Change here--> 
           <li><a href="faq.html">FAQ</a></li>
          <li><a href="About_us.html">About Us</a></li>                                     
        </ul>           
      </div>
      </div>     
    </nav>  
  </div>
  <!-- END MENU -->

Is there any other way to use a common html file for header and calling it?

Duplicate: http://stackoverflow.com/questions/17148357/including-external-html-file-to-another-html-file — ZeroBased_IX, May 17 '15 at 10:25
Try the feature detection here: http://www.html5rocks.com/en/tutorials/webcomponents/imports/ — mplungjan, May 17 '15 at 10:25
@jezzabeanz - neither the duplicate nor the duplicate of the duplicate addresses HTML5 import — mplungjan, May 17 '15 at 10:27
@mplungjan it addresses that the OP asked *"Is there any other way ..."* — Filburt, May 17 '15 at 10:28
Yes, but is not a duplicate which would suggest this question should be closed — mplungjan, May 17 '15 at 10:29
Good point @mplungjan thank you. Yes you're right Filburt, but it doesn't need to be closed. The question is low quality but mplungjan is right. — ZeroBased_IX, May 17 '15 at 11:14
Do you use a supporting browser? http://caniuse.com/#feat=imports — mplungjan, May 17 '15 at 16:20

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

What you might have meant in your question is Apache mod_include. It can include other files into your html.

You would put

 <!--#include file="header.html" -->

into your file, after enabling the module.

For other solutions (apparently, the <object> tag works as well), see the link by @jezzabeans.

If you meant HTML imports, @mplungjan gave the link to browser support. Seems like it is supported in Chrome and Opera, but in no other browser. (Firefox has a workaround, as referenced above)

edited May 23 '17 at 12:21

Community

1
1

answered May 17 '15 at 10:32

serv-inc

35,772
9
166
188

1

No, what he meant was the HTML5 import statement: http://w3c.github.io/webcomponents/spec/imports/ http://www.html5rocks.com/en/tutorials/webcomponents/imports/ – mplungjan May 17 '15 at 16:18

How to use import in HTML

1 Answers1