Posted By

nighthawk on 11/10/08


Tagged

css javascript template html xhtml jquery


Versions (?)

Who likes this?

15 people have marked this snippet as a favorite

benrudolph
jamesming
bryandease
Leech
jasonseney
adamsimms
GreyedDesign
spazione
vali29
McWatt
Pixxell
jannisg
Bonik
wirenaught
ringo380


XHTML 1.0 Template for jQuery


 / Published in: XHTML
 

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.

  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. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. <title>Title goes here &raquo; Site title here</title>
  5.  
  6. <!-- Meta Tags -->
  7. <base href="" />
  8. <meta name="author" content="#" />
  9. <meta name="description" content="#" />
  10. <meta name="copyright" content="#" />
  11. <meta name="robots" content="#" />
  12. <meta name="generator" content="#" />
  13. <meta name="keywords" content="#" />
  14. <meta http-equiv="expires" content="#" />
  15. <meta http-equiv="cache-control" content="#" />
  16.  
  17. <!-- Fav icon -->
  18. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  19.  
  20. <!-- JavaScript setup -->
  21. <script type="text/javascript">
  22. /*<![CDATA[*/
  23. // add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
  24. document.getElementsByTagName('html')[0].className = 'js';
  25. /*]]>*/
  26. </script>
  27.  
  28. <!-- CSS -->
  29. <link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
  30. <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
  31.  
  32. <!--[if IE]>
  33. <link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />
  34. <![endif]-->
  35.  
  36. </head>
  37. <div id="container">
  38.  
  39. <div id="header">
  40. <h1>Title of page goes here</h1>
  41. <h2>Subtitle of page goes here</h2>
  42. </div><!-- end header div -->
  43.  
  44. <div id="nav">
  45. <ul class="menu">
  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 class="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. <ul class="sidebar">
  59. <li><a href="#">Sidebar link #1</a></li>
  60. <li><a href="#">Sidebar link #2</a></li>
  61. </ul>
  62.  
  63. <div id="sub1">
  64. <h3>Title of content</h3>
  65. <p>Begin content here</p>
  66. </div>
  67.  
  68. <div id="sub2" class="hide">
  69. <h3>Title of content</h3>
  70. <p>Begin content here</p>
  71. </div>
  72. </div><!-- end main div -->
  73.  
  74. <div id="footer">
  75. <p>&copy;2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
  76. </div><!-- end footer div -->
  77.  
  78. </div><!-- end container div -->
  79.  
  80. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  81. <script type="text/javascript" src="/scripts/app.js"></script>
  82.  
  83. <!-- place Google Analytics code here -->
  84.  
  85. </body>
  86. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: youdontmeanmuch on December 21, 2008

why would you place your scripts at the end of the file? Besides the obvious, would jquery's dom ready not do the same? (just curious)

You need to login to post a comment.