# TNA Frontend Global Header and Footer
[](https://github.com/nationalarchives/tna-frontend/releases)
[](https://www.npmjs.com/package/@nationalarchives/frontend-global-header)
[](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)
Use the cookie banner from TNA Frontend in your service.
## Preparation
### HTML
1. Add the classes `tna-template` to your `` element
1. Add the class `tna-template__body` to your `` element
1. Add the HTML for the header and footer to the appropriate part of your page (HTML found below)
1. Change the `#main-content` in the `href` of the skip link to the ID of your `` element
### JavaScript and CSS
1. Include the `global-header-package.css` file in your page using a `` element
1. Include the `all.js` and `analytics.js` files in your page using a `
```
## Example HTML
Feel free to add or remove items as necessary. The recommended HTML is shown below.
### Header
```html
```
### Footer
```html
```
# TNA Frontend Global Header and Footer
[](https://github.com/nationalarchives/tna-frontend/releases)
[](https://www.npmjs.com/package/@nationalarchives/frontend-global-header)
[](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)
Use the cookie banner from TNA Frontend in your service.
## Preparation
### HTML
1. Add the classes `tna-template` to your `` element
1. Add the class `tna-template__body` to your `` element
1. Add the HTML for the header and footer to the appropriate part of your page (HTML found below)
1. Change the `#main-content` in the `href` of the skip link to the ID of your `