Introduction to HTML5


HTML

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:

LabelDescription
<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>

 Try It! 

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.

image.png

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)