Post
Ask Question

Simple website using HTML5

Simple website using HTML5 

 
HTML5 is supported by all the latest browser and it's defined by W3C.
 
Here's a concrete example: HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses
 
"Upgrading" to HTML5 can be as simple as changing your doctype. The doctype should already be on the first line of every HTML page. Previous versions of HTML defined a lot of doctypes and choosing the right one could be tricky. In HTML5, there is only one doctype:
 
<!DOCTYPE html>
 
Upgrading to the HTML5 doctype won't break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <header>  
  5.             <h1>Welcome to HTML5 Tutorial</h1>  
  6.         </header>  
  7.         <p>Below are some real time example of HTML5 tags which is supported by most of the browsers. </p>  
  8.         <h3>Article Tag</h3>  
  9.         <article>  
  10. Html 5 is next generation of HTML and it's defined by W3C. HTML5 introduces a number of new   
  11. elements and attributes that reflect typical usage on modern websites......  
  12. </article>  
  13.         <br />  
  14.         <h3>Video Tag</h3>  
  15.         <video width="320" height="240" controls="controls">  
  16.             <source src="movie.ogg" type="video/ogg" />  
  17.             <source src="movie.mp4" type="video/mp4" />  
  18. Your browser does not support the video tag.  
  19.         </video>  
  20.         <br />  
  21.         <h3>Datetime Tag</h3>  
  22.         <p>I have set a date on   
  23.             <time datetime="2011-08-15">Independence day</time>  
  24.         </p>  
  25.         <br />  
  26.         <h3>Detail Tag</h3>  
  27.         <details>  
  28.             <summary>HTML 5 improves interoperability, and reduces development costs, by making precise rules on   
  29. how to handle all HTML elements, and how to recover from errors.</summary>  
  30.         </details>  
  31.         <br />  
  32.         <h3>Nav Tag</h3>  
  33.         <nav>  
  34.             <a href="#">Go Top</a>  
  35.         </nav>  
  36.         <br />  
  37.         <h3>Footer Tag</h3>  
  38.         <footer>Copyright © 2011-2012</footer>  
  39.     </body>  
  40. </html>  
Try to run this code on your Web browser and start building your websites using HTML5.


Similar Articles