HTML5 Tutorial

HTML 5 is the latest version of HTML which is the core markup language of the World Wide Web that can be written in both HTML (HTML 5) and XML (XHTML 5) language.

HTML5 was designed to support multimedia on mobile devices.

HTML 5 is developed to grant the developers a means to build up more flexible, powerful and efficient applications.


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 being perfected. However, most modern browsers already have some HTML5 support.


How did HTML5 get started?

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

WHATWG works on web forms and applications, while W3C works 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:

  • canvas element for painting
  • video and audio elements for media playback
  • Better support for local offline storage
  • New special content elements like article, footer, header, nav, section
  • New form controls, such as calendar, date, time, email, url, search

HTML5 <!DOCTYPE>

The <!doctype> declaration must be on the first line of the 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 > 

Improvements to HTML5

  • new element
  • new property
  • Full CSS3 support
  • Video and Audio
  • 2D/3D drafting
  • local storage
  • local SQL data
  • web application

HTML5 Multimedia

With HTML5 you can simply play video (video) and audio (audio) in web pages.


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

With HTML5 you can simply draw graphics:

  • Use the <canvas> element.
  • Use inline SVG .
  • Use CSS3 2D Transform , CSS3 3D Transform .

HTML5 uses CSS3

  • new selector
  • new property
  • animation
  • 2D/3D conversion
  • rounded corners
  • shadow effect
  • Downloadable Fonts

For more CSS3 knowledge, please check out the CSS3 tutorial on this site.


Semantic element

HTML5 adds a lot of semantic elements as follows:

Labeldescribe
<article>Define a page-independent content area.
<aside>Defines the sidebar content of the page.
<bdi>Allows you to set a piece of text away from its parent element’s text orientation setting.
<command>Define command buttons, such as radio buttons, checkboxes, or buttons
<details>Details used to describe a document or a section of a document
<dialog>Define dialog boxes, such as tooltips
<summary>The tag contains the title of the details element
<figure>Specifies individual stream 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 ​​the document
<mark>Defines text with tokens.
<meter>Define weights and measures. Only used for measures with known maximum and minimum values.
<nav>The section that defines the navigation link.
<progress>Define the progress of any type of task.
<ruby>Define ruby ​​comments (Chinese phonetic or characters).
<rt>Defines the interpretation or pronunciation of characters (Chinese phonetic or characters).
<rp>Used in ruby ​​annotations to define what to display in browsers that do not support ruby ​​elements.
<section>Defines sections (sections, sections) in the document.
<time>Define the date or time.
<wbr>Specifies where in the text a line break should be added.

Element removed

The following HTML 4.01 elements have been removed in HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

HTML5 Browser support

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