Advanced Search

XHTML 1.0 Template for jQuery

/ Published in: XHTML
Save to your folder(s)
Based on templates by luxuryluke and Kevin Hale.

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.

Also see the related CSS template.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. 	<title>Title goes here &raquo; Site title here</title>
  6.  
  7. 	<!-- Meta Tags -->
  8. 	<base href="" />
  9. 	<meta name="author" content="#" />
  10. 	<meta name="description" content="#" />
  11. 	<meta name="copyright" content="#" />
  12. 	<meta name="robots" content="#" />
  13. 	<meta name="generator" content="#" />
  14. 	<meta name="keywords" content="#" />
  15. 	<meta http-equiv="expires" content="#" />
  16. 	<meta http-equiv="cache-control" content="#" />
  17.  
  18. 	<!-- Fav icon -->
  19. 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  20.  
  21. 	<!-- JavaScript setup -->
  22. 	<script type="text/javascript">
  23. 	/*<![CDATA[*/
  24. 	// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
  25. 	document.getElementsByTagName('html')[0].className = 'js';
  26. 	/*]]>*/
  27. 	</script>
  28.  
  29. 	<!-- CSS -->
  30. 	<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
  31. 	<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
  32.  
  33. 	<!--[if IE]>
  34. 	<link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />
  35. 	<![endif]-->
  36.  
  37. </head>
  38. <body>
  39. 	<div id="container">
  40.  
  41. 		<div id="header">
  42. 			<h1>Title of page goes here</h1>
  43. 			<h2>Subtitle of page goes here</h2>
  44. 		</div><!-- end header div -->
  45.  
  46. 		<div id="nav">
  47. 			<ul class="menu">
  48. 				<li><a href="#">Link #1</a></li>
  49. 				<li><a href="#">Link #2</a></li>
  50. 				<li><a href="#">Link #3</a></li>
  51. 			</ul>
  52. 			<ul class="breadcrumbs">
  53. 				<li><a href="#">Home</a></li>
  54. 				<li><a href="#">Sub directory</a></li>
  55. 				<li><a href="#">Current page</a></li>
  56. 			</ul>
  57. 		</div><!-- end nav div -->
  58.  
  59. 		<div id="main">
  60. 			<ul class="sidebar">
  61. 				<li><a href="#">Sidebar link #1</a></li>
  62. 				<li><a href="#">Sidebar link #2</a></li>
  63. 			</ul>
  64.  
  65. 			<div id="sub1">
  66. 				<h3>Title of content</h3>
  67. 				<p>Begin content here</p>
  68. 			</div>
  69.  
  70. 			<div id="sub2" class="hide">
  71. 				<h3>Title of content</h3>
  72. 				<p>Begin content here</p>
  73. 			</div>
  74. 		</div><!-- end main div -->
  75.  
  76. 		<div id="footer">
  77. 			<p>&copy;2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
  78. 		</div><!-- end footer div -->
  79.  
  80. 	</div><!-- end container div -->
  81.  
  82. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  83. <script type="text/javascript" src="/scripts/app.js"></script>
  84.  
  85. <!-- place Google Analytics code here -->
  86.  
  87. </body>
  88. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.