I don’t know how those elements are usually separated by professional web designers:
like this:
<?php include("head.php"); ?>
<?php include("lang.php"); ?>
<?php include("nav.php"); ?>
or just like this
<?php include("head.php"); ?>
<?php include("header.php"); ?>
or just placing all the elements that I want to repeat together:
<?php include("head-header.php"); ?>
Should I use php or html extensions in those elements? (head,nav, etc..)?
What should I do with the <title> tag?
The whole HTML (or PHP?):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>New Project</title>
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="home">
<div id="header">
<div class="container">
<div id="topbar">
<h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
<ul id="lang">
<li><a href="index.php">English</a></li>
<li><a href="es/index.php">Español</a></li>
<li><a href="tw/index.php">中文(繁體)</a></li>
<li><a href="cn/index.php">中文(简体)</a></li>
</ul>
<ul id="nav">
<li class="home"><a href="index.html">home</a></li>
<li class="portfolio"><a href="portfolio.php">portfolio</a></li>
<li class="about"><a href="about.php">about</a></li>
<li class="contact"><a href="form.html">contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="container">
<div id="tagline">
<div>
<h2><strong>Maecenas nisl quam</strong>, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</h2>
<p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
</div>
<a href="#"><img src="images/project3.png"/></a>
</div>
<div id="mainbar">
<h2>Featured Work</h2>
<div class="pusher">
<a href="#"><img src="images/project3.png"/></a>
<div id="info">
<h2><a href="index.html">Best Language School</a></h2>
<p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
</div>
</div>
<div class="pusher">
<a href="#"><img src="images/project3.png"/></a>
<div id="info">
<h2><a href="index.html">Best Language School</a></h2>
<p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
</div>
</div>
<div class="pushed">
<a href="#"><img src="images/project3.png"/></a>
<div id="info">
<h2><a href="index.html">Best Language School</a></h2>
<p>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</p>
</div>
</div>
</div><!-- #mainbar -->
</div><!-- .container -->
</div><!-- #content -->
<div id="footer">
<div class="container">
<div id="bottombar">
<p>Copyright © 2009 New Project. All Rights Reserved. </p>
</div>
</div>
</div>
</body>
</html>
What’s the best practice?
Don’t know about best practice, but my approach has always been header-content-footer. Everything that becomes before the actual content (including
<div id="content">etc.) goes into the header and everything after the content to the footer. This way you don’t have any layout related markup in your actual content and can modify the appearence more easily.I don’t see any reason splitting the header in many parts, as that usually is quite small in terms of lines. Also all additional includes will slow the page generation down a bit.
Also, it’s best to save the files as .php as you probably will need some logic in them at some stage.
As a practical example, here’s how I would cut your layout:
header.php
content.php
footer.php