HTML5 Introduction

HTML
HTML5 is the latest revision of HTML, completed as a standard by the World Wide Web Consortium (W3C) in October 2014.

The design purpose of HTML5 is to support multimedia on mobile devices.

HTML5 is simple and easy to learn.

What is HTML5?

HTML5 is the next generation of the HTML standard.

HTML, the previous version being HTML 4.01, was born in 1999. Since then, the web world has undergone significant changes.

HTML5 is still being refined. However, most modern browsers already have some level of HTML5 support.

How did HTML5 Start?

HTML5 is the result of collaboration between W3C and WHATWG, where WHATWG stands for Web Hypertext Application Technology Working Group.

WHATWG focuses on web forms and applications, while W3C was focused on XHTML 2.0. In 2006, the two parties decided to collaborate in order to create a new version of HTML.

Some Interesting New Features in HTML5:

The canvas element for drawing
The video and audio elements for media playback
Better support for local offline storage
New semantic content elements like article, footer, header, nav, section
New form controls like calendar, date, time, email, url, search

HTML5 <!DOCTYPE>
The <!doctype> declaration must be at the beginning of an HTML5 document. It's very simple:

<!DOCTYPE html>

The Smallest HTML5 Document

Here's a simple HTML5 document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
 
<body>
Document content...
</body>
 
</html>

Note: For Chinese web pages, you need to declare the encoding using <meta charset="utf-8">, otherwise garbled characters might appear.

Improvements in HTML5

New elements
New attributes
Full CSS3 support
Video and Audio
2D/3D graphics
Local storage
Local SQL data
Web applications

HTML5 Multimedia

With HTML5, you can easily play videos and audios on web pages.

HTML5 <video>
HTML5 <audio>

HTML5 Applications

With HTML5, you can easily develop applications.

Local data storage
Access to local files
Local SQL data
Caching references
Javascript workers
XHTMLHttpRequest 2

HTML5 Graphics

With HTML5, you can easily draw graphics using:

The <canvas> element.
Inline SVG.
CSS3 2D transformations, CSS3 3D transformations.

Using HTML5 with CSS3

New selectors
New attributes
Animations
2D/3D transformations
Rounded corners
Shadow effects
Downloadable fonts

Semantic Elements

HTML5 added many semantic elements, as shown below:

Tag	Description
<article>	Defines an independent content area of a page.
<aside>	Defines content that is tangentially related to the content around it.
<bdi>	Allows you to isolate a span of text that might be formatted in a different direction from other text outside it.
<command>	Defines a command button, like a radio button, a checkbox, or a button.
<details>	Used to describe the details of a document or a portion of a document.
<dialog>	Defines a dialog box, such as a modal dialog box.
<summary>	Contains a heading for the <details> element.
<figure>	Specifies self-contained content, like images, charts, photos, code, etc.
<figcaption>	Defines a caption for the <figure> element.
<footer>	Defines the footer of a section or a document.
<header>	Defines the header of a document or a section.
<mark>	Defines text that has been marked or highlighted.
<meter>	Defines scalar measurements. Only used for known minimum and maximum values.
<nav>	Defines a section of navigation links.
<progress>	Represents the completion progress of a task.
<ruby>	Defines a ruby annotation (Chinese pronunciation or character).
<rt>	Defines an explanation or pronunciation of characters in a <ruby> annotation.
<rp>	Used in <ruby> annotations to provide fallback text for browsers that do not support the <ruby> element.
<section>	Defines a section in a document.
<time>	Defines a specific time or a range of time.
<wbr>	Specifies where in text it would be appropriate to add a line-break.

HTML5 Forms

New form elements, new attributes, new input types, and automatic validation.
Removed Elements
The following HTML 4.01 elements have been removed in HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

Example in Each Chapter

Through our HTML editor, you can edit HTML and then click a button to see the results.
Example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>H5 Tutorial</title> 
</head>
<body>
 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

HTML5 Browser Support

The latest versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 also supports some HTML5 features.

For browsers below IE9 that are compatible with HTML5, use this site's static resource html5shiv package:

html
Copy code

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

After loading, initialize new tag CSS:

/html5/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}