HTML5 Tutorial

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

What is HTML5

HTML5 is the fifth revision of HTML, a markup language to present and structure web document.

Though not officially released, developers have started using HTML5 and creating excellent web applications.

HTML5 Logo

History

The parent concern of HTML5, The Web Hypertext Application Technology Working Group (WHATWG) along with W3C began work on the new standard in 2004.

In April 2010, Apple CEO Steve Jobs issued a public letter claiming HTML5 will replace Adobe Flash as far watching Video and many other similar consumption of content is concerned. This stirred the web development circles and discussion of HTML5 got a momentum.

What can you do with HTML5

Using HTML5 you can make web document much more meaningfully to read (for Search Engines as well as for authors).

With several new tags you can enhance user experience of your web document with ease. For example you can use audio, video, source tags to present multimedia content easily. Using canvas tag you can make a your web document a drawing canvas. HTML5 offers several new tags and attributes to enhance user experience of Forms.

You can develop excellent web applications with HTML5 and related APIs (like GeoLocation, Drag, and Drop, WebSocket etc.)

With HTML5 and JavaScript Libraries even you can develop Mobile Applications in the form of Web Apps and then port them to the native platform (iPhone applications for example)

So, with HTML5 you can create excellent web applications, mobile applications, and even browser based games.

What you will learn with HTML5 tutorial of w3resource

After a basic introduction you will learn all the tags newly introduced in HTML5, with examples of what you can achieve with those.

About all the new attributes introduced in HTML5 with examples.

About the elements and attributes those usages have been changed in HTML5(in comparison with HTML4.01).

About the elements and attributes, those have been obsolete in HTML5.

About a few related APIs in detail and examples of what you can do with those.

A sample HTML5 application which allows you to change content of your web document live

You can change this text and write your own

Note : The above example is tested okay with Firefox 4, Opera 11.50, Chrome 12.0.742.122 and Internet Explorer 8.

Another HTML5 example. A placeholder is added in an HTML form.

Note : The above example is tested okay with Firefox 4, Opera 11.50, Chrome 12.0.742.122 and Internet Explorer 8.

A sample HTML5 document

Using HTML5, the following web document has been made more structural and semantic.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
</head>
<body>
<div id="container">
<header>
<h1>Sample HTML5 web document</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<section>
<hgroup>
<h1>Main Section</h1>
<h2>This is a sample HTML5 Page</h2>
</hgroup>
<article>
<p>Content of the first article</p>
</article>
<article>
<p>Content of the second article</p>
</article>
</section>
<footer>
<p>This is the Footer of the web document</p>
</footer>
</div>
</body>
</html>

Next: HTML5 doctype