Introduction to HTML5
HTML5 is the latest revision of HTML, completed by the World Wide Web Consortium (W3C) in October 2014.
The design of HTML5 aims to support multimedia on mobile devices.
HTML5 is simple and easy to learn.
What is HTML5?
HTML5 is the next generation of HTML standards.
HTML, the previous version HTML 4.01, was born in 1999. Since then, the web world has undergone tremendous changes.
HTML5 is still under development. However, most modern browsers already have some support for HTML5.
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 is dedicated to XHTML 2.0. In 2006, both parties decided to collaborate to create a new version of HTML.
Some interesting new features in HTML5 include:
- The canvas element for drawing
- Video and audio elements for media playback
- Better support for offline storage
- New special content elements such as article, footer, header, nav, section
- New form controls such as calendar, date, time, email, url, search
HTML5 <!DOCTYPE>
The <!doctype> declaration must be the first line in an HTML5 document and is very simple to use:
<!DOCTYPE html>
Minimal HTML5 Document
Here is 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, use <meta charset="utf-8"> to declare the encoding, otherwise, garbled characters may appear.
Improvements in HTML5
- New elements
- New attributes
- Full support for CSS3
- Video and Audio
- 2D/3D graphics
- Local storage
- Local SQL data
- Web applications
HTML5 Multimedia
With HTML5, you can easily play videos and audio on web pages.
HTML5 Applications
With HTML5, you can easily develop applications:
- Local data storage
- Access to local files
- Local SQL data
- Cache references
- JavaScript workers
- XMLHttpRequest 2
HTML5 Graphics
With HTML5, you can easily draw graphics:
- Using the <canvas> element.
- Using inline SVG.
- Using CSS3 2D Transforms, CSS3 3D Transforms.
HTML5 Using CSS3
- New selectors
- New attributes
- Animations
- 2D/3D transforms
- Border radius
- Shadow effects
- Downloadable fonts
For more information on CSS3, please refer to our CSS3 Tutorial.
Semantic Elements
HTML5 adds many semantic elements as shown below:
| Tag | Description |
|---|---|
| <article> | Defines an independent content area on the page. |
| <aside> | Defines sidebar content on the page. |
| <bdi> | Allows you to set a piece of text to override its parent element's text direction. |
| <command> | Defines a command button, such as a radio button, checkbox, or button. |
| <details> | Used to describe details of a document or a part of a document. |
| <dialog> | Defines a dialog box, such as a prompt box. |
| <summary> | Contains the title of the details element. |
| <figure> | Specifies independent flow content (images, charts, photos, code, etc.). |
| <figcaption> | Defines the title of the <figure> element. |
| <footer> | Defines the footer of a section or document. |
| <header> | Defines the header area of a document. |
| <mark> | Defines marked text. |
| <meter> | Defines a gauge. Used only for known maximum and minimum values. |
| <nav> | Defines a section of navigation links. |
| <progress> | Defines the progress of any type of task. |
| <ruby> | Defines a ruby annotation (Chinese phonetic or character). |
| <rt> | Defines the explanation or pronunciation of a character (Chinese phonetic or character). |
| <rp> | Used in ruby annotations to define what browsers that do not support ruby elements should display. |
| <section> | Defines a section in a document. |
| <time> | Defines a date or time. |
| <wbr> | Specifies where in the text it is appropriate to add a line break. |
HTML5 Forms
New form elements, new attributes, new input types, 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>
Examples in Each Chapter
With our HTML editor, you can edit HTML and click the button to view the results.
Example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</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>
Click "Try it" to see the online result.
HTML5 Browser Support
The latest versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 will support certain HTML5 features.
For browsers below IE9, to make HTML5 compatible, use the html5shiv package from our static resources:
<!--[if lt IE 9]>
<script src="http://cdn.static.tutorialpro.org/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
After loading, initialize the CSS for new tags:
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
HTML5 Reference Manual
On our site, you can find descriptions of HTML5 tags and attributes. For details, please refer to the HTML5 Reference Manual.