CODEWITHSUNDEEP
htmlmaster-pagesdhtml
mahesh
mahesh

Reputation: 3207

how can we avoid header and footer code repeating in each html pages

I have some ten html pages each page also has same header and footer tag can i have one page with complete header and footer ,and i will refer to that particular page from other html pages.

Upvotes: 2

Views: 9864

Answers (6)

Jay Bharadia
Jay Bharadia

Reputation: 16

Absolutely we can Avoid Writing same code like header and footer on multiple pages by having just a single header and footer content defined and use it on all pages.

Lets assume you have header and footer elements in your index.html for example as shown below:

<header id='header'>
<!-- Code-->
</header>

<!---Body contents -->

<footer id='footer'>
<!-- Some code-->
</footer>

Use JavaScript to store header and footer contents in a variable

<script>
var header_content = '<!-- Code for header---> ;
var footer_content = '<!-- Code for footer---> ;

var header_element = document.getElementById('header');
var footer_element = document.getElementById('footer');

header_element.innerHTML = header_content;
footer_element.innerHTML = footer_content;
</script>

Use this script on pages you would like to add header and footer and enjoy the power of JavaScript.

Code Duplication must be minimum in our document as it increases redundancy(Extra content not actually needed)/size of document + its really unprofessional to have same code repeated over and over again.

We can discuss this topic of Code Duplication in much greater depth with lots of cons(Disadvantages) and Less pros(Advantages).

JavaScript is the best solution because no server-side scripting needed, only Client side scripting and yeah for this to work, your client side browsers must have JavaScript Enabled that's default for major browsers nowadays.

Upvotes: 0

premik91
premik91

Reputation: 89

Use Django. The best thing out there when you get a hang of it :)

Upvotes: 0

Randy the Dev
Randy the Dev

Reputation: 26720

If you don't care about users who have JavaScript disabled, or are using some mobile platforms, you can use JavaScript to do it.

headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

page.html

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

But don't do this, it's user unfriendly, and unprofessional. Just stick with either using php, or building a solid template which doesn't need to be edited much later.

Upvotes: 6

Zabba
Zabba

Reputation: 65467

Presuming the "master-pages" tag on the question refers to ASP.NET, here's a Super Link. Ps. You should give Ruby on Rails a try as well :)

Upvotes: 1

Chris Adragna
Chris Adragna

Reputation: 632

What's your server side scripting language? You can do what is called an "include."

The exact syntax depends on the language(s) your web server supports.

Upvotes: 1

deceze
deceze

Reputation: 522042

You do this by using a server side language like PHP or another one of the myriad different languages out there, which pre-processes the page. Something along these lines:

<?php include 'header.html'; ?>

... page contents...

<?php include 'footer.html'; ?>

Upvotes: 4

Related Questions