11.30. Introduction to HTML5

HTML5 is the latest revised version of HTML, which was developed by the World wide Web Consortium (W3C) in October 2014.

HTML5 is designed to support multimedia on mobile devices.

HTML5 is easy to learn.

11.30.1. What is HTML5? ¶

HTML5 is the next generation HTML standard.

The last version of HTML, HTML 4.01 was born in 1999. Since then, the Web world has undergone great changes.

HTML5 is still in the process of improvement. However, most modern browsers already have some HTML5 support.

11.30.2. How did HTML5 start? ¶

HTML5 is the result of cooperation between W3C and WHATWG, and WHATWG refers to Web Hypertext Application Technology Working Group.

WHATWG focuses on web forms and applications, while the W3C focuses on XHTML 2.0. In 2006, the two sides decided to work together to create a new version of HTML.

Some interesting new features in HTML5:

Used for painting. canvas element
For media playback video and audio element
Better support for local offline storage
New special content elements, such as article, footer, header, nav, section
New form controls, such as calendar, date, time, email, url, search

11.30.3. HTML5 <! DOCTYPE > ¶

The <!doctype> declaration must be on the first line of the HTML5 document, and it is very simple to use:

<!DOCTYPEhtml>

11.30.4. The smallest HTML5 document ¶

Here is a simple HTML5 document:

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>document title</title></head><body>document content......</body></html>

Note: for Chinese pages, you need to use <meta charset="utf-8"> declare the code, otherwise there will be garbled.

11.30.5. Improvement of HTML5 ¶

New element
New attribute
Full support for CSS3
Video and Audio
2D/3D mapping
Local Stora
Local SQL data
Web application

11.30.6. HTML5 multimedia ¶

With HTML5 you can simply play video (video) and audio (audio) on a web page.

HTML5 <video>
HTML5 <audio>

11.30.7. HTML5 application ¶

You can simply develop applications with HTML5

Local data storage
Access local files
Local SQL data
Cache reference
Javascript worker
XHTMLHttpRequest 2

11.30.8. HTML5 graphics ¶

You can simply draw graphics with HTML5:

Use <canvas> element.
Use inline SVG.
Use CSS3 2D conversion, CSS3 3D conversion.

11.30.9. HTML5 uses CSS3 ¶

New selector
New attribute
Animation
2D/3D conversion
Fillet
Shadow effect
Downloadable font

11.30.10. Semantic element ¶

HTML5 adds a number of semantic elements as follows:

Label	Description
< article >	Define the independent content area of the page.
< aside >	Define the contents of the sidebar of the page.
< bdi >	Allows you to set a piece of text away from the text orientation setting of its parent element.
< command >	Define command buttons, such as radio buttons, check boxes, or buttons
< details >	Used to describe the details of a document or a part of a document
< dialog >	Define a dialog box, such as a prompt box
< summary >	The tag contains the title of the details element
<figure>	Specify independent streaming content (images, charts, photos, codes, etc.).
< figcaption >	Define the title of the < figure > element
< footer >	Define the footer for section or document.
< header >	Defines the header area of the document
< mark >	Defines marked text.
< meter >	Define weights and measures. Used only for measurements of known maximum and minimum values.
< nav >	Define the part of the navigation link.
< progress >	Define the progress of any type of task.
< ruby >	Define ruby comments (Chinese phonetic or character).
< rt >	Define the interpretation or pronunciation of characters (Chinese Bopomofo or characters).
<rp>	Used in ruby comments to define what is displayed by browsers that do not support ruby elements.
< section >	Define sections in the document.
< time >	Define the date or time.
< wbr >	Specifies where to add newline characters in the text.

11.30.11. HTML5 form ¶

New form elements, new attributes, new input types, automatic validation.

11.30.12. Element removed ¶

The following HTML 4.01elements have been deleted in HTML5:

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

11.30.13. Examples in each chapter ¶

With our HTML editor, you can edit the HTML and click the button to see the results.

Example ¶

<!DOCTYPEHTML><html><head><meta charset="utf-8"> <title>
Rookie Tutorial(runoob.com)</title> </head><body><videowidth="320"height=
"240"controls><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc=
"movie.ogg"type="video/ogg">Your browser does not support
video tags.</video></body></html>

11.30.14. HTML5 browser support ¶

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

The following versions of IE9 browsers are compatible with HTML5 methods and use the static resources of this site html5shiv package:

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

After loading, initialize the CSS of the new tag:

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