Introduction to HTML5

Start learning HTML5

HTML5 is the latest revision of HTML and was developed by the World Wide Web Alliance (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 changed dramaticly.

HTML5 is still in its infringing. However, most modern browsers already have some HTML5 support.

HTML5 is supported by major foreign browsers including Firefox, IE9 and later, Chrome (Google Chrome), Safari, Opera, etc.;

How did HTML5 get started?

HTML5 is the result of W3C's partnership with WHATWG, which refers to the Web Hypertext Application Technology Working Group.

WHATWG is dedicated to web forms and applications, while 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:

  • The canvas element used 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 declaration must be on the first line of the HTML5 document, which is very simple to use:

<! DOCTYPE html>

The smallest HTML5 document

Here's a simple HTML5 document: 

<!DOCTYPE html>        
<html>              
<head>          
<title>文档标题</title>            
</head>           
<body>          
  文档内容......         
</body>                
</html>

HTML5 improvements

  • The new element

  • The new property

  • Full support for CSS3

  • Video and Audio

  • 2D/3D drawing

  • Local storage

  • Local SQL data

  • Web apps

HTML5 multimedia

With HTML5 you can simply play video and audio in a web page.

HTML5 app

With HTML5 you can simply develop your app

  • Local data store

  • Access local files

  • Local SQL data

  • Cache references

  • Javascript worker

  • XHTMLHttpRequest 2

HTML5 graphics

With HTML5 you can simply draw graphics:

HTML5 uses CSS3

  • The new selector

  • The new property

  • Animation

  • 2D/3D conversion

  • Fillets

  • Shadow effect

  • Downloadable fonts

To learn more about CSS3, check out the CSS3 tutorial on this site.

Semantic features

HTML5 adds a lot of semantic elements as follows:

Label Describe
<article> Define a page-independent content area.
<aside> Define the sidebar content of the page.
<bdi> Allows you to set a piece of text that is separate from the text orientation settings of its parent element.
<command> Define command buttons, such as a turn button, check box, or button
<details> Used to describe the details of a document or 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 element
<footer> Define the footer for section or document.
<header> The head area of the document is defined
<mark> Define marked text.
<meter> Define metrics. Used only for measures 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 (Chinese notes or characters).
<rt> Defines the interpretation or Chinese characters, such as accents or characters.
<rp> Used in ruby comments to define what is displayed by browsers that do not support ruby elements.
<section> Define the sections (sections, segments) in the document.
<time> Define the date or time.
<wbr> Specify where it is appropriate to add line breaks in the text.

HTML5 form

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

The element has 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 HTML and click the button to see the results.

<!DOCTYPE HTML>
<html>
<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 label.
</video>

</body>
</html>

Try it out . . .

Click the "Try it" button to see the results of your online run.

HTML5 - New features

Some interesting new features in HTML5:

  • The canvas element used 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 browser support

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

Start learning HTML5