advanced code snippet search

XHTML 1.1 web standards template

Published in: XHTML 

This is a generic template for an XHMTL 1.1 doc that I start with at the beginning of every project.

Then i setup the directories to match. I use @import for CSS, then a seperate CSS file for screen-specific, and then one for print, …yes, then one for IE. I have the basic DIV structure setup, too.

For a link to the inspiration of this template and further explanation (better), see this wonderful article: http://particletree.com/features/quick-start-your-design-with-xhtml-templates/ Hope it helps!

Plain TextExpand 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3. 	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
  5. <head>
  6. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. 	<title>title goes here &raquo; Site title here</title>
  8.  
  9. 	<base href="" />
  10. 	<meta name="Author" content="#" />
  11. 	<meta name="Description" content="#" />
  12. 	<meta name="Copyright" content="#" />
  13. 	<meta name="Robots" content="#" />
  14. 	<meta name="Generator" content="#" />
  15. 	<meta name="Keywords" content="#" />
  16. 	<meta http-equiv="Expires" content="#" />
  17. 	<meta http-equiv="Cache-Control" content="#" />
  18. 	<meta http-equiv="imagetoolbar" content="false" />
  19.  
  20.     <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
  21.     <link href="/script/javascript.js" type="text/javascript"  />
  22. 	<style type="text/css" xml:space="preserve">
  23. 		/*<![CDATA[*/
  24. 		      @import url(/css/style.css) all;
  25. 		/*]]>*/
  26. 	</style>
  27. 	<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
  28. 	<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
  29.  
  30. 	<!--[if IE]>
  31. 	<link rel="stylesheet" href="/css/win-ie-all.css" type="text/css" media="screen, projection" />
  32. 	<![endif]-->
  33.  
  34. </head>
  35. <body>
  36. 	<div id="container">
  37.  
  38. 		<div id="header">
  39. 			<h1>Title of page goes here</h1>
  40. 			<h2>Subtitle of page goes here</h2>
  41. 			<h3>Skip to content</h3>
  42. 		</div><!-- end header div -->
  43.  
  44. 		<div id="nav">
  45. 			<ul>
  46. 				<li><a href="#">Link #1</a></li>
  47. 				<li><a href="#">Link #2</a></li>
  48. 				<li><a href="#">Link #3</a></li>
  49. 			</ul>
  50. 			<ul id="breadcrumbs">
  51. 				<li><a href="#">Home</a></li>
  52. 				<li><a href="#">sub directory</a></li>
  53. 				<li><a href="#">current page</a></li>
  54. 			</ul>
  55. 		</div><!-- end nav div -->
  56.  
  57. 		<div id="main">
  58. 			<h3>Title of article goes here?</h3>
  59. 			<p>Begin article here</p>
  60.  
  61. 			<ul id="sidebar">
  62. 				<li><a href="#">Sidebar Link #1</a></li>
  63. 				<li><a href="#">Sidebar Link #2</a></li>
  64. 				<li><a href="#">Sidebar Link #3</a></li>
  65. 			</ul>
  66. 		</div><!-- end main div -->
  67.  
  68. 		<div id="footer">
  69. 			<p>&copy;2XXX company name here. Creative Commons link/ your own link, validation, etc.</p>
  70. 		</div><!-- end footer div -->
  71.  
  72. 	</div><!-- end container div -->
  73.  
  74. <!-- place google analytics here -->
  75.  
  76. </body>
  77. </html>

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: nano on November 7, 2006

I think there's a typo at line 18: Wouldn't be better something like:

I mean just to be consistent with extension naming conventions. Anyway it's a great template, thanks for sharing!

Posted By: nano on November 7, 2006

Mmmk, for some reason the code isn't showing, so let's try without tags:

Current: link href="/script/javascript.css" Suggested: link href="/script/javascript.js"

Posted By: Mikael on September 26, 2007

Looks like the copyright symbol doesn't read correctly in W3C's validator. Otherwise it was completely valid for me!

Posted By: bhertz on November 19, 2007

There are issues with this template that users should know about. Using the xml prolog (

Posted By: bhertz on November 19, 2007

There are issues with this template that users should know about. Using the xml prolog (

Posted By: ethan on January 29, 2008

Nice enough idea in principle... the only caveat I would raise is the use of the XHTML 1.1 variant. This DOCTYPE is intended as the foundation upon which to build compound document formats (XHTML + MathML + SVG + etc).

You should really be using XHTML 1.0 Strict.

Given proper conformance to the XHMTL standard and modular inclusion of the DOCTYPE across a site then upgrading to XHTML 1.1 ought to be simple.

Hope that helps

Posted By: dwight_stegall on February 13, 2008

you should test your code before posting it.

putting this

above the the doctype moves the doctype down one line and throws internet explorer into the quirks mode. if you are going to operate in the quirks mode why bother to use a doctype in the first place?

Posted By: dwight_stegall on February 13, 2008

don't put this above it

<?xml version="1.0" encoding="utf-8"?>

You need to login to post a comment.