HTML / PHP: Which parts of an HTML head can be saved in a separate file

2.2k views Asked by At

I am new to HTML and hope someone can help me with this.

I am trying to set up a website where the code for every page is saved as a separate php file. Since all these pages use the same document head and includes I would like to remove as much as possible of this from the pages and save it in a separate includes file (header.php) which I can then include using PHP.

My current head looks as follows and since this is the same on all pages I currently have ALL this saved in the separate header.php file and then just use <?php include "header.php"; ?> on the single pages.

Can someone tell me which parts of this should remain on the single pages for a proper setup and if anything should be changed or added here ?

Note: jQuery and JS are included separately in the footer.

My PHP (header file):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="John Doe" />
        <meta name="description" content="Created: 2015-06" />

        <base href="http://www.MyURL.com" target="_self" />

        <!-- CSS -->        
        <link rel="stylesheet" type="text/css" href="includes/styles.css" />
        <!-- CSS - Font Awesome -->
        <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

        <title>My Page</title>
    </head>

    <body>
        <div class="wrapper">
        <!-- ... -->
5

There are 5 answers

4
Mihai Zinculescu On BEST ANSWER

Your Top head file (top_head.php):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <?php if(isset($page_author)){ ?>
            <meta name="author" content="<?php echo $page_author; ?>" />
        <?php } ?>

        <?php if(isset($page_description)){ ?>
            <meta name="description" content="Created: 2015-06" />
        <?php } ?>

        <!-- CSS -->        
        <link rel="stylesheet" type="text/css" href="includes/styles.css" />
        <!-- CSS - Font Awesome -->
        <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

        <title><?php echo $page_title; ?></title>

Your current header file:

<?php
      $page_title = 'Hello';
      $page_description = 'This is a beautiful description';
?>
<?php include("top_head.php"); ?>
</head>

    <body>
        <div class="wrapper">
        <!-- ... -->
3
AudioBubble On

This should give you the general idea...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="John Doe" />
    <meta name="description" content="Created: 2015-06" />
    <base href="http://www.MyURL.com" target="_self" />

    <!--
    Your paths need to relative to the websites root directory or the full
    URL else they may not work depending on where the file is located.
    -->     
    <link rel="stylesheet" type="text/css" href="/includes/styles.css" />
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

    <!-- 
    This line just echos the title if one has been set or a default string
    if the title hasn't been set. You will need to ensure every page that
    includes this file sets the title before including this file. You may
    also want to take this approach with other values.
    -->
    <title><?php echo isset($title) ? $title : 'Default Title'; ?></title>
</head>
<body>
    <div class="wrapper">
0
Harsha On

Since you are starting your tag in header.php, you can close the tag on the own page itself (i mean the other pages ie: Contact, About Us, Product, etc...).

5
Pralhad Narsinh Sonar On

The code section you have mentioned in the question can be called as header.php and further can be included on each and every page where it is required.

Apart from this

  1. Header - header.php
  2. Main content - main-content.php - this will be specific to each and every page from your website
  3. Footer - footer.php - this can also be made common - and further included in every page.
  4. Apart from this you can also have a few more php files which might have navigation or any kind of common content blocks.

Example page could be:

<?php
include 'header.php'
/*either add here the content or include further php files*/
include 'about-us.php'
include 'footer.php'
?>
1
wezzy On

You are doing right, the parts that are shared between all the pages should be placed in a separate php file, this greatly improve your life when you have to maintain the site (immagine add a stylesheet or a library to every page of your site after some time ...).

To help SEO you should specify a title and maybe some meta tag that are page specific.

Also consider carefully if you have other parts that are repeated in every page for example a left or right bar or a particular widget (for example a banner image or something like that)