Introduction to HTML5
HTML5 is the latest revised version of HTML. The standard formulation was completed by the World Wide Web Consortium (W3C) in October 2014.
HTML5 is designed to support multimedia on mobile devices.
HTML5 is easy to learn.
What is HTML5?
HTML5 is the next generation HTML standard.
HTML, the last version of HTML 4.01 was born in 1999. Since then, the Web world has undergone tremendous changes.
HTML5 is still in perfection. However, most modern browsers already have some HTML5 support.
How did HTML5 Get Started?
HTML5 is the result of the cooperation between W3C and WHATWG. WHATWG refers to Web Hypertext Application Technology Working Group.
WHATWG is dedicated to web forms and applications, while W3C is dedicated to XHTML 2.0. In 2006, the two parties decided to cooperate to create a new version of HTML.
Some interesting new features in HTML5:
Canvas element for painting
Video and audio elements for media playback
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
HTML5 <!DOCTYPE>
The <!doctype> declaration must be in the first line of the HTML5 document, and it 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 I18N web pages, you need to use the <meta charset="utf-8"> declaration encoding, otherwise garbled characters will appear.
HTML5 Improvements
new element
New attribute
Fully support CSS3
Video Japanese Audio
2D/3D drawing
Local storage
Local SQL data
Web application
HTML5 Multimedia
Using HTML5 you can simply play video and audio on web pages.
HTML5 <video>
HTML5 <audio>
HTML5 Application
With HTML5 you can easily develop applications
Local data storage
Access local files
Local SQL data
Cache reference
Javascript worker
XHTMLHttpRequest 2
HTML5 Graphics
Using HTML5 you can simply draw graphics:
Use the <canvas> element.
Use inline SVG .
Use CSS3 2D conversion , CSS3 3D conversion .
HTML5 Uses CSS3
New selector
New attribute
Animation
2D/3D conversion
Fillet
Shadow effect
Downloadable fonts
To learn more about CSS3, please check the CSS3 tutorial on this site .
Semantic Elements
HTML5 adds a lot of semantic elements as follows:
| Label | Description |
|---|---|
| <article> | Define a separate content area of the page. |
| <aside> | Define the sidebar content of the page. |
| <bdi> | Allows you to set a piece of text so that it is out of the text direction 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 label 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 of a section or document. |
| <header> | Defines the head area of the document |
| <mark> | Define marked text. |
| <meter> | Define weights and measures. Only used for metrics with 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 (I18N characters). |
| <rt> | Define the interpretation or pronunciation of characters (I18N character). |
| <rp> | Used in ruby comments to define the content displayed by browsers that do not support ruby elements. |
| <section> | Define the sections (sections, sections) in the document. |
| <time> | Define the date or time. |
| <wbr> | Specify where in the text it is appropriate to add a newline character. |
HTML5 Form
New form elements, new attributes, new input types, automatic validation.
Elements Been Removed
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 the HTML and click to view the result.
Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tutorial Fish (tutorialfish.com)</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 the " Try it " button to see the results of the online operation.
HTML5 browser supports
The latest versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 will support certain HTML5 features.
IE9 and the following version browsers are compatible with HTML5, use the html5shiv package of static resources on this site:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
After loading, initialize the CSS for the new label:
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu
{display:block}HTML5 Reference Manual
In this site, you can find descriptions of HTML5 tags and attributes. For details, please click HTML5 Reference Manual . (under construction)