I am trying to create a very simple web application, basically to understand the best practices of coding in HTML5, CSS and JavaScript.
My application has 3-4 pages and each one is using same menu header. So I want to make it reusable by writing it in a separate file (either PHP or HTML).
head.php (it is to be made reusable):
<!DOCTYPE html>
<html>
<head>
    <link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
    <li><a href="#" class="home">Home<span></span></a></li>
</ul>
<p> 
</p>
</body>
</html>
front.php:
<?php
    include ("$_SERVER[DOCUMENT_ROOT]/page/common/head.php");
?>
HTML markup (dirty code):
<!DOCTYPE html>
<html>
<head>
    <!DOCTYPE html>
<html>
<head>
    <link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
    <li><a href="#" class="home">Home<span></span></a></li>
</ul>
<p> 
</p>
</body>
</html></head>
<body>
    <div>
    </div>
    <p>
    </p>
</body>
</html>
I have following questions:
head.php has both <body> and <head> tag. So where should I write these PHP lines to include it? (in <head> or <body>)  (I don't want to have multiple <head>s and <body>s in the final page)
What are the other best practice I should follow? (any link to references welcome)
I have already read w3schools.
In my opinion it would be a good idea to read about templating systems or have a look how frameworks/CMS handle this.
Doing it your way, you can't completly avoid repeating e.g. the closing head tag </head> in every content.php.
So this is just an idea:
head.php
<?php
    // Some other includes / requires,
   // code snippets...
?>
<!DOCTYPE html>
<html>
    <head>
        <!-- site-wide stylesheets -->
        <!-- & js-files -->
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="my/global/scripts.js"></script>
content.php
<?php
    include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/head.php');
?>
    <!-- put page specific scripts &     
    <!-- styles here -->
    <link href="my/pages/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="my/pages/js/scripts.js"></script>
</head>
<body>
    <div id="container">
        <!-- content start -->
        <div id="content">
            <h1>title</h1>
            <p>Your content</p>
        </div>
        <!-- end of content div -->
<?php
    include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/foot.php');
foot.php
        <div id="foot">
               copyright etc
        </div> 
    </div> <!-- end of container div -->
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With