Do I have to include all of my head content in every single web page?

Question

I'm building a basic front-end website in HTML and CSS. It consists of multiple web pages, each sharing the same JS and CSS files. My <head> tag therefore contains about 45 lines of code. I'm just wondering if this is "best practice?" Is there a way to have one file with all the shared links to various stylesheets and scripts so that I can reduce the 45 lined header tags in all of my pages to maybe just 3 or 4.

Also, if I have to change my custom CSS location or add a new custom JS file, then that means adding to each of my webpages. This becomes cumbersome and I'd just like to know if there's anything that can be done about it. I might end up with a dozen or so pages when I'm done so that sounds like a lot of unnecessary code.

Thanks!

EDIT:

My code:

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicons generated using realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

<!-- Bootstrap Core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">

<!-- Plugin CSS -->
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="lib/device-mockups/device-mockups.min.css">

<!-- Theme CSS -->
<link href="css/new-age.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>

<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>

<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Theme JavaScript -->
<script src="js/new-age.min.js"></script>

That is a lot of code to have in each of my dozen or so web pages. Is there a way to avoid this?

Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) — Nikola Lukic, Jul 26 '17 at 11:26
Without seeing what you have we can't comment. If you're loading CSS files, merge them into one, ditto JS. — Paulie_D, Jul 26 '17 at 11:27
you should pass all your js and css out to external files - then its just a case of linking them into the page - one line each. Note that external css files should be linked in the head of hte page - and the external js should be in the body (just before the closing body tag) - unless the js is specifically required for intial functionality — gavgrif, Jul 26 '17 at 11:27
@NikolaLukic This question has nothing to do with printing ... — Teemu, Jul 26 '17 at 11:28
yes, unless you get a backend language that speaks to the server, this means you can fetch files with code. You can use PHP (my personal favourite) with `require`, `require_once` and `include`. Or you can use .net - no idea how to use, because .net to me. sucks. — treyBake, Jul 26 '17 at 11:31
If you are using ASP.NET, which i am not familiar with, you may be interested in the following answers of this SO question: https://stackoverflow.com/questions/1982099/asp-net-dynamically-insert-code-into-head — DavidDomain, Jul 26 '17 at 11:34
Anyway all common code (for all web pages) need to be placed in one place , also you can make mechanism in js for dynamic loading scripts or html blocks ... — Nikola Lukic, Jul 26 '17 at 11:41
@Paulie_D Some are internal and some are external. I added my code above — Ryan, Jul 26 '17 at 11:42

yasarui · Answer 1 · 2017-07-26T11:35:47.353

0

For example if your file name is index.html rename it to index.php and then cut your head section and create a new file named head.php and do like for footer also.for the new pages you create just include these references like below

<!DOCTYPE hml>
<html>
<?php include 'head.php' ?>
<body>
<?php include 'footer.php' ?>
</body>
</html>

edited Jul 26 '17 at 11:35

answered Jul 26 '17 at 11:28

yasarui

6,209
8
41
75

1

this will only work if the OP uses php or has a php server running. They may want to use .net for some baffling reason, but people do choose it. Plus, explain how to use – treyBake Jul 26 '17 at 11:30
3

I did not down vote, but why are you answering a question tagged with `javascript`, `css`, `html` with a solution involving `php` ? Use comments to ask the OP first. – DavidDomain Jul 26 '17 at 11:30
@ThisGuyHasTwoThumbs I would personally always choose .NET over php – Matthias Seifert Jul 26 '17 at 11:33
1

@MatthiasS. awww you suck ;) no I'm kidding :) but this proves my point, this answer only works for one side of the coin. – treyBake Jul 26 '17 at 11:38

score 0 · Answer 2 · answered Jul 26 '17 at 11:56

The short answer is that every page that you send to the browser must contain the full <head> and so you must include it.

The longer answer is that there are several ways to avoid having to copy paste all the content every time. For instance, if you have a php server you could have a separate head.html file that contains your head and you would include in every page like this:

<?php include('head.html'); ?>

Or, if you're using a web framework like express.js, Flask or Symfony (just to name a few, there are many more) you would have templates where you can extend one base. You would define one base template and all other templates are based off that template, allowing you to avoid duplicate code.

If you're not using a webserver at all, you could introduce a build pipeline like Gulp for instance. Gulp can take all your html files and optimise / manipulate them before you deploy them. You could inject all the head contents using a plugin gulp-inject-html for example.

Hope this provides you with plenty of options to decide how you'd like to proceed :)

KaoriYui · Answer 3 · 2017-07-26T13:29:01.290

Since your using a lot of external libraries for your page adding another one will not hurt. This is straight from W3school, here

header.html (Content)

<html>
  <head>
      <title>test</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
  </head>
  <body>

Content.html (Content)

 <h1>Header1</h1>

footer.html (Content)

   </body>  
</html>

Then on index.html (content)

<script src="https://www.w3schools.com/lib/w3.js"></script> 

<div w3-include-html="header.html"></div>
<div w3-include-html="content.html"></div> 
<div w3-include-html="footer.html"></div> 

<script>
w3.includeHTML();
</script>

This is just only using HTML and JavaScript the most effective way is using a server side language like PHP.

score 0 · Answer 4 · answered Jul 26 '17 at 13:12

You can create a new file and past all the head codes in it. Save as either .php or .html. e.g saved in filePath/headings.html;

inside the main page which must be a php file, do this:

  <?php include('filePath/headings.html');?>

OR USE

<?php require_once('filePath/headings.html')?>

include is built in function allows you add a file to the page, and if the file is not found it will show some warnings and continue is execution WHILE require or require_once will throw an error and halt code execution if the file is not found. You can also use

<?php require('filePath/headings.html')?>

You can have this in any part of your code, e.g sidebar, header, navigation, etc. Please don't save your include or require file name as header.php, instead use heading.php or head.php

I hope this help

Nagaraju · Answer 5 · 2017-07-26T11:58:51.183

I see you are using jQuery:

So this would help you:

$(document).ready(function() {
    $('head').load('pathToCommonCode/head.html');
});

place all your redundant code in head.html and provide the path to it.

For example head.html would contain the following:

<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>

<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>

<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Theme JavaScript -->

Note: This method will work with files in the same domain.

As mentioned in comments:

From documentation:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

nah, robots do crawl ajax content nowadays, [according to their own guidelines](https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html), although I'm not too sure about loading the html `` content with ajax. It's really bad practice anyway — giorgio, Jul 26 '17 at 13:15