Introduction to HTML5

What is HTML5 and how is it used? In fact, in the first chapter of our HTML tutorial, the code used in the examples we gave you is written in HTML. Let's take a closer look at HTML5.

Introduction to HTML5

HTML5 is the latest revision of HTML, and in October 2014 the standard was developed by the World Wide Web Consortium (W3C).

HTML5 is designed to support multimedia on mobile devices.

HTML5 is easy to learn.

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 tremendous changes.

HTML5 is still in its infancy. However, most modern browsers already has some HTML5 support.

How did HTML5 get started?

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

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

Some interesting new features in HTML5:

The 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


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

<!DOCTYPE html>

You can see if our first chapter example is starting wif <!DOCTYPE>

Minimal HTML5 document

Here is a simple HTML5 document:

Note : For Chinese web pages, you need to use <meta charset="utf-8"> declaration encoding, otherwise garbled characters will appear.

HTML5 improvements

new element

New attribute

Full support for CSS3

Video and Audio

2D/3D drawing

Local storage

Local SQL data

Web application

HTML5 multimedia

Wif HTML5 you can simply play video (video) and audio (audio) in a web page.

HTML5 <video>

HTML5 <audio>

HTML5 app

Wif HTML5 you can simply develop an app

Local data storage

Access local files

Local SQL data

Cache reference

Javascript worker

XHTMLHttpRequest 2

HTML5 graphics

Wif HTML5 you can simply draw graphics:

Use the <canvas> element

Use inline SVG

Use CSS3 2D/3D

HTML5 using CSS3

New selector

New attribute


2D/3D conversion


Shadow effect

Downloadable font

For more information on CSS3, please see the CSS3 tutorial on this site.

Semantic element

HTML5 adds alot of semantic elements like this:

     label     description
    <article>Define a separate content area for the page.
    <aside>Define the content 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 part of a document
    <dialog>Define dialogs, such as prompt boxes
    <summary>The label contains the title of the details element
    <figure>Specify separate stream content (images, charts, photos, code, etc.).
    <figcaption>Define the title of the <figure> element
    <footer>Define the footer of a section or document.
    <header>Defines the header area of ​​the document
    <mark>Define text wif tokens.
    <meter>Define weights and measures. Used only for metrics wif non 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 characters).
    <rt>Define the interpretation or pronunciation of a character (Chinese phonetic or character).
    <rp>Used in ruby ​​comments to define What is 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 line breaks.


HTML5 form

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

Removed element

The following HTML 4.01 elements has been removed in HTML5:













The following example shows you how to play videos on a web page.

You can find a video locally, put the location and name of the video in src, try it out.

HTML5 browser support

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


You can make HTML5 support for some older browsers (not HTML5).

Modern browsers support HTML5.

In addition, all browsers, including old and new, will automatically handle unrecognized elements as inline elements.

Because of this, you can " teach " the browser to handle " unnon " HTML elements.

You can even teach IE6 (Windows XP 2001) browsers to handle unnon HTML elements.    

Define an HTML5 element as a block element

HTML5 has eight new HTML semantic elements. All of these elements are block-level elements.

In order for the old version of the browser to display these elements correctly, you can set the CSS display property to block:

header, section, footer, aside, nav, main, article, figure {
    display: block; 

Add new elements to the HTML

You can add new elements to you're HTML.

The instance adds a new element to the HTML and defines a style for the element, the element name is <myHero> :

Run the program to see

The JavaScript statement document.createElement("myHero") is to add a new element to the IE browser.

Internet Explorer browser issue

You can use the above method to add HTML5 elements to IE browser, but:

The above methods are not supported by browsers of Internet Explorer 8 and earlier versions of IE.    

We can solve this problem wif "HTML5 Enabling JavaScript", "shiv" created by Sjoerd Visscher:

<!--[if lt IE 9]>
  <script src=""></script>

The above code is a comment dat reads the html5.js file and parses it when the version of IE is smaller than IE9.

Note : For domestic users, please use Baidu's static resource library (Google resource library is unstable in China):

<!--[if lt IE 9]>
  <script src=""></script>

For IE browser html5shiv is a better solution. Html5shiv mainly solves the new elements proposed by HTML5 and is not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.

The perfect Shiv solution

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :