Question: * **What I already know:**

I use single file each for header and footer that I include in all the pages by using:

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

```

and adding this in the `<body>` section:

```
<body>    
<div id="header"></div>
<div id="footer"></div>
</body>

```

* **Required:**

I want to keep the following in a **single *separate* file** and include in all pages' `<head>` section.

```
<script type="text/javascript" src="signupjs/jquery.reveal.js"></script>
<link rel="stylesheet" href="signupjs/reveal.css">
<!-- some more elements -->

```

I tried applying the known method, ie, `.load()` and `<div id=""></div>` in `<head>` section but as obvious, it didn't work. The contents got loaded in the `<body>` section.

Is there a technique to achieve this?

* **Application:** This might help me spend more time on designing than copying same tags again and again in all pages.

Answer: 
Html

```
<head>

// we can append here

</head>

```

Jquery

```
$('head').append('<link rel="stylesheet" type="text/css" href="signupjs/reveal.css">');

$('head').append('<script type="text/javascript" src="signupjs/jquery.reveal.js"></script>');

```
As said on [this question](https://stackoverflow.com/questions/3913359/how-to-load-css-using-jquery), you can add your css like this

```
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );

```

You can do the same for javascript, but you also have a few other options.
You can use [`$.getScript`](http://api.jquery.com/jquery.getscript/) of jQuery, or you can use [requirejs](http://requirejs.org/). I recommend require.js, with that librarie you can do

```
var librari = require("js/librarie.js");

```