6

I am making a huge website, with on all pages a navbar. Is it possible to create the navbar in a .html file and import it into all the other pages, and if so, how?

user3032715
  • 221
  • 1
  • 4
  • 9

5 Answers5

7

You can do this with HTML alone using Server Side Includes. Simplest example:

index.html

<html><head><title>Test</title></head>
<body>
    <!--#include file="navbar.shtml" -->
</body>
</html>

navbar.shtml

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>

What you should never do is use framesets or iframes to do this. https://stackoverflow.com/a/15938545/822711

Please note, this will not work using the file:// protocol, it needs to run on a web server as it would in a live environment. This could be on a private or public server, or localhost using a server running on your computer such as wamp.

Community
  • 1
  • 1
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • The link you posted refers to frames, not the HTML tag ` – Shadow The GPT Wizard Jan 01 '14 at 12:11
  • 2
    I'm sorry, using any type of frame to load navigation is a horrendous idea for any site no matter how simple. –  Jan 01 '14 at 12:15
  • Before give this answers have you checked it ?Please give a full example.Your code is not working! – Alimon Karim Jan 01 '14 at 12:43
  • 1
    @user3085661 my code is not working where? On your localhost? On some random server? Did you read the wiki? Is your server set up to recognise SSI? "Is not working" is not a valid description of the problem – Popnoodles Jan 01 '14 at 12:53
  • @user3085661 best guess is you're trying to run **server side** code while opening the page as `file://`. I've updated my answer accordingly. Thanks. – Popnoodles Jan 01 '14 at 13:01
  • This is new to me. include shtml file in a comment tag. thanks. – Elyor Aug 26 '15 at 04:50
4

I prefer try to use Jquery,Like as 

<!doctype html>
<html>
<head>
<title>Home page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script> 
   $(function(){
      $('.header').load("header.html"); 
   });
</script> 
</head>
<body>
<div class="header"></div>
</body>
</html>

In same folder open a file with name header.html.Same thing you can apply for footer.

Alimon Karim
  • 4,354
  • 10
  • 43
  • 68
  • Just so you know, answers that suggest using jQuery to do something simple that can easily be done at root level often get marked down. – Popnoodles Jan 01 '14 at 12:21
  • where suggest ?It's the ans I know so why I will not answers? – Alimon Karim Jan 01 '14 at 12:24
  • You're introducing a client-side framework to do something that is easily achievable server side, and works far better done server side. No FOUC, no extra page load, no extra framework. – Popnoodles Jan 01 '14 at 12:26
  • If he want to convert it in server side he have to convert file type,like as .php etc.In here he don't need to change anything without this small code. – Alimon Karim Jan 01 '14 at 12:28
  • *"If he want to convert it in server side he have to convert file type,like as .php"* No he/she doesn't. HTML can be included in HTML. – Popnoodles Jan 01 '14 at 12:30
  • Please give a full example in your answers.I want to see how it is working.Thank you. – Alimon Karim Jan 01 '14 at 12:44
  • https://www.google.co.uk/search?q=SSI+html – Popnoodles Jan 01 '14 at 13:09
  • This way to load html inside another html works...but that is very slow. Can you suggest some other way ? This way make page very slow. – Gaurav vijayvargiya Jan 06 '16 at 17:07
4

1) In html we can load other files into one html file using Iframe 

<!DOCTYPE html>
<html>
<body>

<iframe src="header.html">
  <p> display</p>
</iframe>

</body>
</html>

2) We can use jquery function to load the file into some specific div.

 <script> 
    $(function(){
        $('#header').load("header.html"); 
    });
</script>

3) Use other languages like php , .net for that we use php include and require for that

**Apart from using iframe there is no other way in html that we can include one html file to another.**
Mitul Maheshwari
  • 2,647
  • 4
  • 24
  • 38
1

with PHP it's possible, but you have to change the files to .php files.

put this in the main file:

<?php 
     include("navbar.php");
?>

I don't know a good way with HTML

-1

For this you need to add server side language if you are using PHP you can create a nav.php file. In this file you can add the complete HTML of your navigation and you can include this PHP file in your code instead of putting navigation HTML. Like this

<?php include("nav.php");?>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Rizwan Sultan
  • 187
  • 10