How to include an external HTML-Head?

Question

I'm back to coding a small business website and it seems silly to have like 40% duplicate code (head and menu) across 10 HTML-pages. On the other hand, it also seems overkill to throw something like Next.js at such a small project.

Is there a simple way to mitigate the duplicate code by including a head.html within every page either server- or client-side?

score 1 · Answer 1 · answered Oct 10 '19 at 08:20

1

You can't do this with client JavaScript coz it running after header parsing. You should use server side technologies for this. From SSI to PHP :)

answered Oct 10 '19 at 08:20

NightmareZ

41
5

What is SSI? Google says Scuba Schools International – leonheess Oct 10 '19 at 08:25
Server Side Includes technology – NightmareZ Oct 10 '19 at 08:27
Is this actually still the way to go? If I research this I only get old resources.. – leonheess Oct 10 '19 at 08:30
Cos it is very old technology. But it working now too. And this is simplest way to do your task. – NightmareZ Oct 10 '19 at 09:33
Would you recommend PHP or SSI? – leonheess Oct 10 '19 at 09:44
depends on your preferences and which software on server you used... – NightmareZ Oct 10 '19 at 10:30

score 1 · Accepted Answer · answered Oct 10 '19 at 21:37

1

I prefer PHP. Change your .html (static) pages into .php (dynamic) pages. Just 'save as'. You can separate pretty much anything into templates.

You have the following simplified file structure:

index.php

header.php

home.php

footer.php

style.css

The index.php contains + calls the header.php + home.php + footer.php

The header.php has your menus, etc.

the home.php can have your slider, and more sections, etc.

the footer.php has your menus + copyright, etc.

the style.css has your styles and you can have many .css files depending what you want styled.

You can expand this to your other pages: about.php, services.php, contact.php, etc.

Into index.php file you add something like

<?php require ('your-folder-for-content/header.php'); ?>

<?php require ('your-folder-for-content/home.php'); ?>

<?php require ('your-folder-for-content/footer.php'); ?>

Close </html> bracket at the end of your footer.

One page or little repeated sections call the other and redundancy is prevented.

answered Oct 10 '19 at 21:37

Mugé

452
3
15

How is the home.php switched out for different content? – leonheess Oct 14 '19 at 06:56
@leonheess home.php is on your landing page as you know. The switching out for other pages happens in the header when you link pages and you may have even have different headers later for different areas of your content. However, the landing page is the first visit. Let's say, you add a slider to your home.php, call it with for example. You want to add a contact section to your bottom of your landing page before footer, add . Home page will give you a clean oversight. – Mugé Oct 15 '19 at 15:23
@leonheess Whatever you change later in those 'calls' with 'require', even if you repeat in other pages, such as call the same section in another page, even if it is a button.php, you will be able to change the content of these sections as you wish and it will change at once. You will not need to search around inside a huge mess of code and the structure will become more evident what page calls what page/ content. Each page will have less clutter and content can be kept easily changeable. Start simple. You will see what I mean. – Mugé Oct 15 '19 at 15:32
@leonheess Also, you may opt to work on a template website. I will recommend Bootstrap. Bootstrap has a standardized layout system. It already comes with beautiful elements. Look for a template website here: https://startbootstrap.com/themes/. Pick a free template and see how it works. Change the elements and content to your liking. Drop pages you do not need. Have a quick start-up to your small business website. For the contact page, if you get stuck, find me here. I can recommend you a neat program that is highly developed and comes for free. – Mugé Oct 15 '19 at 15:52

score 1 · Answer 3 · answered Oct 12 '19 at 18:27

1

Jekyll is pretty good and easy to use. You can strip off all the features you don't need. Has template filling available as well. It outputs static html for the whole site, so you don't need your server to be running any daemons.

answered Oct 12 '19 at 18:27

Luke Miles

941
9
19

How to include an external HTML-Head?

3 Answers3

Linked