XHTML 1.0 Template for jQuery

Submitted by:Tim Kelly

Date added:28 July, 2011


Basic XHTML 1.0 layout which includes basic layout structure and is prepared for jQuery. On load a 'js' class is added to the root element in order to nicely handle graceful degradation if JS is disabled and prevent flickering if JS is enabled.

Tags: xhtml template

Code Snippet:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here &raquo; Site title here</title>

<!-- Meta Tags -->
<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />

<!-- Fav icon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<!-- JavaScript setup -->
<script type="text/javascript">
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';

<!-- CSS -->
<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />

<!--[if IE]>
<link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />

<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div><!-- end header div -->

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</div><!-- end nav div -->

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div><!-- end main div -->

<div id="footer">
<p>&copy;2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div><!-- end footer div -->

</div><!-- end container div -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>

<!-- place Google Analytics code here -->