2

So I have a header file:

<html>
<head>
   <link href="/design_header.css" rel="stylesheet" type="text/css" />
</head>
<body>
   content
</body>
</html>

And I want to place this header in my file

  <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     <head>
     meta tags etc.
    </head>
    <body> 
      <div id="container_big">
       <?php include 'header_login.php'; ?>
        content
      </div>
    </body>
    </html>

The problem is now I have regular <html>, <head>, <body> tags inside the <body> tag of my webpage. In the html validator I receive errors like

Stray start tag html.
Stray end tag head.
An body start tag seen but an element of th

e same type was already open.

How to do it properly? Btw. I also place a footer to the bottom of the webpage the same way.

Daniel
  • 20,420
  • 10
  • 92
  • 149
erdomester
  • 11,789
  • 32
  • 132
  • 234
  • Use multiple include files? One for inclusion inside the HEAD tag, one for incusion at the start of your container and one for inclusion at the end of your container? – rene May 19 '13 at 08:49
  • I agree, multiple files are the way to go here. In addition, you can group related files by placing them in sub-directories with an appropriate name, or use a convention in the file name. – forseta May 19 '13 at 08:53
  • I removed all html code from the header so I left with a pure .php file. Then I included the css of the header the same way I included the css of the webpage. It now doesn't throw an error. Is this a proper solution? – erdomester May 19 '13 at 09:09
  • @erdomester It is recommended to load the CSS in the for the reasons described here: http://stackoverflow.com/a/1642259/1688441 – Menelaos May 19 '13 at 09:41

2 Answers2

6

Your header file should only contain the HTML text you want for the header. As it will be inserted into another webpage, it should not be a full HTML document.

Having only HTML for Header in Header

One option is to instead include in your header file only the HTML that is for the header (used by all pages that include it). However this has the downside that your not following the recommendation to have CSS loading before is rendered.

See: https://stackoverflow.com/a/1642259/1688441

Header File

 <link href="/design_header.css" rel="stylesheet" type="text/css" />
 content

Other files

  <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     <head>
     meta tags etc.
    </head>
    <body> 
      <div id="container_big">
       <?php include 'header_login.php'; ?>
        content
      </div>
    </body>
    </html>

Having only HTML for Header in HeaderFile and Separate HeadFile

You could have have a separate global_head_include.html (or txt, php, etc) file and put your CSS code there.

Header File (for include)

 Header content

File with CSS includes (for include)

  <link href="/design_header.css" rel="stylesheet" type="text/css" />
Whatever else is global...

Other files

  <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     <head>
     meta tags etc.
      <?php include 'global_head_include.php'; ?>
    </head>
    <body> 
      <div id="container_big">
       <?php include 'header_login.php'; ?>
        content
      </div>
    </body>
    </html>
Community
  • 1
  • 1
Menelaos
  • 23,508
  • 18
  • 90
  • 155
  • Almost the same what I did (Solution 1). But with your solution (when the css is in the header file) I get a validator error on ` Element link is missing required attribute property.` – erdomester May 19 '13 at 11:59
2

This is how I set out my headers and footers in my current PHP site:

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>James Wright - Young Software Developer</title>
        <link rel="stylesheet" href="style.css" />
        <meta name="description" content="The online home of a young web designer and software developer." />
        <link rel="icon" type="image/png" href="/img/ico.png" />
    </head>
    <body>
        <div id="holder">
            <div id="menu"></div>
            <div id="mainContent">

footer.php:

            </div>
            <div id="mainReflect"></div>

            <p class="footer">&copy; James Wright <?php echo date("Y"); ?>. Minimum resolution: 1024x768            <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img
  src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" style="vertical-align: middle;"/></a>        
                <a href='http://www.powermapper.com/products/sortsite/'><img src='http://www.powermapper.com/images/badge-v1/sortsite-badge-small-5.png' width="80" height="15" alt='Broken link checker and accessibility checker top 5% - SortSite' style='vertical-align: middle;'/></a>             
            </p>
        </div>
    </body>
</html>

Then whenever I create a new page, all I need to do is this:

<?php include("header.php"); ?>
<p>Main body content!</p>
<?php include("footer.php"); ?>
James Wright
  • 3,000
  • 1
  • 18
  • 27
  • this is how i work but it has a down side with IDEs (editors), the editors will warn you that you don't have a closing tag for some elements ("holder", "mainContent") in the header.php and it couses a problem when you try to format the files like in netbeans (alt+shift+f) – Waqleh Dec 09 '13 at 08:52
  • This seems like it would save a lot of work but what about all the custom content in the header file? You will need a different title, description and possibly different javascript and css files for each page. That is the only reason I write out the for each page. Assigning variables in a header file also seems pointless to me because of how much they can vary. – TJE Dec 14 '13 at 06:51
  • This is why I've moved over to ASP.NET MVC and Node.js (with EJS as the view engine, for example), which like most modern web frameworks possess the functionality to create common layouts and pages while avoiding the issues that you've both mentioned. – James Wright Dec 14 '13 at 09:38