HTML5 Introduction

HTML5 is The New HTML Standard

HTML5

  • New Elements
  • New Attributes
  • Full CSS3 Support
  • Video and Audio
  • 2D/3D Graphics
  • Local Storage
  • Local SQL Database
  • Web Applications

 


Examples in Each Chapter

With our HTML editor, you can edit the HTML, and click on a button to view the result.

Example

   

Try it yourself »

Click on the “Try it yourself” button to see how it works


What is HTML5?

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in 1999. The internet has changed significantly since then.

HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

HTML5 is designed to deliver almost everything you want to do online without requiring additional plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated applications that run in your browser.

HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a netbook, notebook or a Smart TV).

HTML5 can also be used to write web applications that still work when you are not online.

The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of other vendors.

HTML5 is still a work in progress. However, all major browsers support many of the new HTML5 elements and APIs.


How Did HTML5 Get Started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • The need for external plugins (like Flash) needs to be reduced
  • Error handling should be easier than in previous versions
  • Scripting has to be replaced by more markup
  • HTML5 should be device-independent
  • The development process should be visible to the public

The HTML5 <!DOCTYPE>

In HTML5 there is only one <!doctype> declaration, and it is very simple:

 


Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags:

Title of the document
Content of the document......

 


HTML5 – New Features

Some of the most interesting new features in HTML5:

  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

Browser Support for HTML5

HTML5 is not yet an official standard, and no browsers have full HTML5 support.

But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.


Html5 New Elements

HTML5 has been updated with few NEW ELEMENTS, which makes HTML5 more efficient markup language. We can reduce our external affords to use these NEW ELEMENTS. The Internet has changed since the last development of HTML 4.01, So there are certain changes has been made in the browser to use it more correctly. Few OLD ELEMENTS have been removed, where fewNEW ELEMENTS have been updated in HTML5.

<aside> Defines content aside from the page content
<audio> Defines sound content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<command> Defines a command button that a user can invoke
<datalist> Specifies a list of pre-defined options for input controls
<defines> article an article
<details> Defines additional details that the user can view or hide
<embed> Defines a container for an external application or interactive content (a plug-in)
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<keygen> Defines a key-pair generator field (for forms)
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<output> Defines the result of a calculation
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<source> Defines multiple media resources for <video> and <audio>
<summary> Defines a visible heading for a <details> element
<track> Defines text tracks for <video> and <audio>
<time> Defines a date/time
<video> Defines a video or movie
<wbr> Defines a possible line-break