HTML 5 Basic Template

Since HTML 5 is likely to be in common use at some time in the future (taking advantage of current/future web browsers standards rendering mode) and the W3C validation service now validates HTML 5.

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Site | Page 1</title>
</head>
<body>
 <div id="outer">
  <div id="top"></div>
  <div id="inner">
   <div id="header"><h1>Page 1</h1></div>
   <div id="navigation">
    <ul>
     <li class="current"><a href="#">Page 1</a></li>
     <li><a href="#">Page 2</a></li>
     <li><a href="#">Page 3</a></li>
    </ul>
   </div>
   <div id="content">
    <p>Lorem ipsum dolor sit amet...</p>
   </div>
   <div id="footer"><a href="#top">Top of page</a></div>
  </div>
  <div id="bottom"></div>
 </div>
</body>
</html>

Note: the Content-Type meta element has to be the first element under the head element to validate. In HTML elements can be optionally self closing (so <br /> and <br> are both valid.

Notice that there are 'top' and 'bottom' elements in the markup? They are used to allow the margin-top/bottom for the 'inner' <div> to work in Firefox. 'top' also functions as an anchor to get back to the top of the page.

Example of CSS that can be used with this template:

body {
 color: #000;
 background: #fff;
 margin: 0;
 padding: 10px
}

#outer {
 width: 960px;
 margin: 0 auto;
 background: #eee
}

#top {
 padding-bottom: 1px; margin-bottom: -1px /* force #inner margin-top to take effect in Firefox/WebKit */
}

#inner {
 margin: 3px; /* margin: 0 3px 3px 0; for drop shadow effect */
 border: 1px solid #009;
 background: #fff
}

#header { background: #eee }

#header h1 { margin: 0}


#navigation {
 background: #eef;
 width: 100%;
 overflow: hidden;
 border-width: 1px 0 1px 0;
 border-style: solid;
 border-color: #009
}

#navigation ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 float: right
}

#navigation ul li { float: left }

#navigation ul li a:link,
#navigation ul li a:visited {
 display: block;
 float: left;
 padding: 3px;
 zoom: 1 /* force hasLayout in IE */
}

#navigation ul li a:hover {
 background: #000;
 color: #fff
}

#navigation ul li a:active,
#navigation ul li.current a:link,
#navigation ul li.current a:visited,
#navigation ul li.current a:hover {
 background: #aaa;
 color: #ffe
}


#content { padding: 3px }

#footer {
 padding: 6px;
 border-top: 1px solid #009
}

#bottom {
 padding-top: 1px; margin-top: -1px /* force #inner margin-bottom to take effect in Firefox/WebKit */
}

Comments

Anonymous said…
Thanks for sharing the code and the example of CSS. This will help me a lot.

kimberly ventura
2:25 am, February 14, 2009
los angeles web design said…
Great intro to HTML 5.

Tom
1:25 am, February 06, 2010
David Kreuter said…
When using HTML5 you should use tags like <nav> and <footer> instead of <div id="nav"> and <div id="footer">
9:16 am, March 13, 2010
Post a Comment

Popular posts from this blog

Text Clips for Programmers Notepad 2 (XHTML)

Update (23 June, 2005) : Added DOCTYPEs. More Programmers Notepad 2 text clips. Some tags are not included (b, big, i, small, sub, sup) as these can be replaced with existing tags (em, strong), or styled using CSS. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. xhtmltags.clips) and paste in the following code: <?xml version="1.0"?> <clips name="XHTML Tags"> <clip name="------ DOCTYPEs ------"></clip> <clip name="XHTML 1.0 transitional"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|]]></clip> <clip name="XHTML 1.0 strict"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">|]]></clip> <clip name="XHTML 1.1...
Read more

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Read more

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more