advanced code snippet search

Posted By

vultur on 08/28/12


Tagged

basic template html5


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

kimil
vitaum3oitaum
std-59
zamfi
JuanIB
imoddesign


HTML5 Baisc Template

 / Published in: HTML
 

URL: http://www.vultur.ca/snipplr/html5.html

This is a basic template that I use most of the time for proper any html5 projects, it's straightforward simple with a few basic elements that are often used in any projects. I've taken the habits of commenting the end of a div to refer easily to it on a big scale project, but headers, navs, articles, asides, sections and footers are not commented at the end.

Expand | Embed | Plain Text 
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>My Title</title>  
  6.   <meta name="description" content="Ermahgerd Webr">  
  7.   <meta name="author" content="Derp">  
  8.   <link rel="stylesheet" href="css/style.css"> 
  9.   <!--[if lt IE 9]>  
  10.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
  11.   <![endif]-->  
  12. </head>  
  13. <body>
  14.   <!-- Le Header -->
  15.   <header></header>
  16.  
  17.   <!-- Le Navigation  -->
  18.   <nav>
  19.     <ul>
  20.       <li><a href="#">Home</a></li>
  21.       <li><a href="#">About</a></li>
  22.       <li><a href="#">Portfolio</a></li>
  23.       <li><a href="#">Contact</a></li>
  24.     </ul>		
  25.   </nav>
  26.  
  27.   <!-- Le Content Wrapper  -->
  28.   <div id="wrapper">
  29.  
  30.   <!-- Le Content  -->
  31.   <div id="content">
  32.  
  33.   <!-- Le Article  -->
  34.   <article>
  35.     <h1>This is a Header.</h1>
  36.     <p>Le lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis porta augue, vel convallis ligula dignissim eu. Le nam scelerisque aliquam adipiscing. Le aenean ante urna, accumsan quis placerat at, consectetur et tellus.</p>				
  37.   </article>
  38.  
  39.   </div><!-- Le Content END  -->
  40.  
  41.   <!-- Le Complementary Stuff -->
  42.   <aside></aside>
  43.  
  44.   </div><!-- Le Content Wrapper END  -->
  45.  
  46.   <!-- Le Footer  -->
  47.   <footer></footer>
  48.  
  49.   <!-- Le End  -->  
  50. </body>  
  51. </html>

Report this snippet  

You need to login to post a comment.