Reader Level:
ARTICLE

Simple website using HTML5

Posted by Biswa Pujarini Mohapatra Articles | HTML 5 August 16, 2011
Upgrading to HTML5 can be as simple as changing your doctype. The doctype should already be on the first line of every HTML page.
  • 0
  • 0
  • 6802

HTML5 is supproted 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

<!DOCTYPE HTML>
<html>
<body>

<header>
<h1>Welcome to HTML5 Tutorial</h1>
</header>

<p>Below are some real time example of HTML5 tags which is supported by most of the browsers. </p>
<h3>Article Tag</h3>

<article>
Html 5 is next generation of HTML and it's defined by W3C. HTML5 introduces a number of new
elements and attributes that reflect typical usage on modern websites......
</article>
<br />
<h3>Video Tag</h3>

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<br />

<h3>Datetime Tag</h3>
<p>I have set a date on <time datetime="2011-08-15">Independence day</time></p>
<br />

<h3>Detail Tag</h3>
<details>
<summary>HTML 5 improves interoperability, and reduces development costs, by making precise rules on
how to handle all HTML elements, and how to recover from errors.</summary>
</details>
<br />

<h3>Nav Tag</h3>
<nav>
<a href="#">Go Top</a>
</nav>
<br />

<h3>Footer Tag</h3>
<footer>Copyright &copy; 2011-2012</footer>
</body>
</html>


Try to run this code on your Web browser and start building your websites using HTML5.

Article Extensions
Contents added by Ashok Kamble on Oct 19, 2012
Useful article
COMMENT USING

Trending up