The new developing standard for web pages, HTML5, is growing in popularity as it offers a greater interactive experience for users, faster, more reliable performance and a reduction in the complexities of web application development. Many developers are take advantage of HTML5’s new features. What then does one need to know to begin using HTML5 now?

First, one needs to utilize a modern browser that supports HTML5 features. Thus, it is necessary to move from previous versions of Internet Explorer to the most current versions of today’s most popular browsers including Internet Explorer 9, Firefox 6, Safari 5.1, Opera 11.5 or Chrome 13.

Next, to begin writing an HTML5 web page one needs to use the correct doc type. In HTML the doc type declaration at the beginning a web page communicates to the browser what mode it should use to display the page. Under HTML4 pages often used a declaration like this:

But now the doc type for HTML5 has been simplified to just:

This declaration is necessary to display the page under HTML5 mode.
Now for the page layout, HTML5 introduces several new tags for creating a standardized semantic layout which can be recognized by search engines. The most common of these tags include:

• <header> – Indicates the header area for any page or section (including article, aside or footer).
• <footer> – Denotes a footer for any page or section.
• <article> – Designates an article or blog post.
• <section> – Indicates a section of a page, aside or footer, etc.
• <nav> – Specifies an space for navigation links or menu options
• <aside> – Denotes an aside area such as a sidebar.

Here is a basic HTML5 page which uses these tags:

  
    
    
		
    
  
  
  
  

     
HTML 5 Example Layout
  
  
  
  


  

  
  

    
Page Content
  
  
  

  
    

      

	  Article text		
      
    
  
  
  
  
  
  

With styling added from a .css file our layout produces a page that looks like this:

In order to have these HTML5 tags display correctly in older browsers, I have set them to display as blocks in the page’s style sheet file like so:

header, footer, aside, section { display: block; }

And I have added a call to javescript file, html5shim, which tells older versions of Internet Explorer how to treat the new HTML5 tags.

With an understanding of these fundamentals of HTML5 you can now begin creating your own HTML5 web pages.