Before we start….There’s a couple of things in your mind before adventuring on boat of new markup, first of all we start our talking with the question what is HTML5?
IntroductionHTML5 will be the new standard for HTML, XHTML. HTML 5 introduces a whole set of new elements that make it much easier to structure pages.
So what’s new?Most of the elements of html5 is similar to html4, just some new elements are added:
<canvas> is a drawing area controlled by JavaScript. You can use it for a wide variety of things - graphs, games, presentations etc. Because it's controlled by JavaScript, you can interact with it very easily.
<video> The video tag makes it easier to embed video clips into your web pages. It has attributes like src (naturally), autoplay, and loop.
<audio> The audio tag is much like the <video>, but for audio files.
<header> —header is used to displayed items in the header of the page. For example, rather than put your site banner and logo with <div id="header"></div>, you would simply use <header></header> instead.
<section> — section is used to displayed particular section of the page. This makes it possible to group a series of related items in a semantically meaningful way. For example, you can wrapped a series of articles on a page with <section></section> rather than <div id="articles"></div>
<article> — The article element is used to specify the items on a page that are associated with a particular article. Each article on the page is simply wrapped in a nice <article></article> element.
<nav> — we can use the <nav> element anywhere, we need to display a set of navigational link-the sidebar, the header, the footer, whatever- just put <nav></nav>. No divs required.
<footer> — finally, with footer element, it is easy to clearly specify the region of the page containing the footer content.
<aside> — with the aside element, designers finally markup sidebars, pullquotes, and footnotes.
<figure> — the <figure> tag is used to group some elements such as images and objects (object, embed, and iframe).
Structure:
I have created a demo for explain the structure of html5 more :
We are going to convert this image into html5 now.
The header
Header’s html code
<!--Header starts--> <header id="page-header"> <div id="logo"> <img src="images/logo.jpg" alt="logo" /></div> <nav id="main-navigation"> <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Support</a></li> </ul> </nav> <figure><img src="images/banner.jpg" alt="header-banner" /></figure> </header> <!--Header ends-->
The layout body content:
Html code for layout body content
<!--Page contents--> <article id="page-content"> <section class="grey-header"> <p class="header-txt">Lorem Ipsum</p> <p class="header-txt">Lorem Ipsum</p> <p class="header-txt2">Lorem Ipsum</p> </section> <section class="content"> <aside class="block-content"> <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p> </aside> <aside class="block-content"> <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p> </aside> <aside class="block-content"> <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. </p> </aside> </section> </article> <!--Page contents ends-->
The footer
Html code for footer
<footer> <p>© Copyright Company Name 2009</p> </footer>
When we summing it all, it will be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Html5 Demo</title> <!-- meta tags --> <meta name="keywords" content=""> <meta name="description" content=""> <!-- stylesheets --> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <!-- javascript --> <!--conditional comments --> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> </head> <body> <div id="container"> <!--Header starts--> <header id="page-header"> <div id="logo"> <img src="images/logo.jpg" alt="logo" /></div> <nav id="main-navigation"> <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Support</a></li> </ul> </nav> <figure><img src="images/banner.jpg" alt="header-banner" /></figure> </header> <!--Header ends--> <!--Page contents--> <article id="page-content"> <section class="grey-header"> <p class="header-txt">Lorem Ipsum</p> <p class="header-txt">Lorem Ipsum</p> <p class="header-txt2">Lorem Ipsum</p> </section> <section class="content"> <aside class="block-content"> <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p> </aside> <aside class="block-content"> <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p> </aside> <aside class="block-content"> <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. </p> </aside> </section> </article> <!--Page contents ends--> </div> <footer> <p>© Copyright Company Name 2009</p> </footer> </body> </html>
The stylesheet
/* ~~~~~~~~~ generic ~~~~~~~~~~ */html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; }img { vertical-align: bottom;}img, fieldset { border: 0;}html { overflow-y: scroll;}header, nav, section, article, figure,aside, footer { display: block; }/* ~~~~~~~~~ common ~~~~~~~~~~ */body, select, input, textarea { font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif; color: #333;}body { background: #fff;}h1 { font-weight: normal; color: #666; font: 3.2em/1.4 georgia, 'times new roman', times, serif; margin: 0.2em 0 0;}h2 { font-weight: normal; color: #666; font: 2.4em/1.4 georgia, 'times new roman', times, serif; margin: 0.2em 0; }section p, section ul, section ol,aside p, aside ul, aside ol { font-size: 1.4em; margin: 1em 0;}section ul { margin-left: 1em;}section ol { margin-left: 1.4em;}/* ~~~~~~~~~ layout ~~~~~~~~~~ */#container { width: 950px; margin: 20px auto; overflow: hidden; }.grey-header{ margin-top:20px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; background-color:#e9e9e9; height:58px; width:100%; } .header-txt{ border-right:#fff solid 1px; width:300px; float:left; height:58px; vertical-align:top; margin:0px; text-align:left; padding-top:15px; font-weight:bold; padding-left:15px;} .header-txt2{width:300px; float:left; height:58px; vertical-align:top; margin:0px;padding-top:15px; text-align:left;font-weight:bold; padding-left:15px;} .content{ width:100%;}/* ~~~~~~~~~ nav ~~~~~~~~~~ */#main-navigation { margin: 20px 0;}#main-navigation ul {overflow: hidden; width: 100%; list-style: none; font-size: 1.6em;}#main-navigation li {float: left;}#main-navigation li a {background:url(../images/nav-active-btn.jpg) no-repeat; margin: 0 5px 0 0;padding: 5px 0px;display: block;color: #000;text-decoration: none;width:131px;height:43px;text-align:center;padding-top:13px; }#main-navigation li.current a {background:url(../images/nav-hover-btn.jpg) no-repeat; width:131px;height:43px }#main-navigation li a:hover {background:url(../images/nav-hover-btn.jpg) no-repeat; width:131px;height:43px } /* ~~~~~~~~~ article ~~~~~~~~~~ */article { width: 100%; overflow: hidden;}section { float: left; width: 100%;}/* ~~~~~~~~~ aside ~~~~~~~~~~ */aside { width:310px; float:left; vertical-align:top; margin:0px; padding-left:5px;}aside p { width:270px; text-align: left; font-size: 11px; padding-left:15px;} /* ~~~~~~~~~ footer ~~~~~~~~~~ */ footer {background:url(../images/footer-rep.jpg) repeat-x left top;width: 100%;font-size: 1.4em;text-align: center;height:73px;}footer p { padding-top:20px;}
....and this is done, Now bye! bye! div and welcome new markup through html5 and css3. Click here to get demo.
Thats really cool yaar!!
Really helpful article...nice . keep it up !!!
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18