HTML5 Introduction

  • HTML5 is the new standard form of web and release on January,2011.
  • HTML5 have many more functionalities rather than HTML 4.0 and XHTML.
  • HTML5 still updating and only some of Browsers can support HTML5 tags.
  • HTML5 is a collaboration between the Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C).
  • Supported Browsers Chrome, Firefox, Opera, Internet Explorer 9 and Safari.
Note: HTML5 is not yet an corporate standard and not fully supported by all browsers.

HTML 5 Features

HTML5 introduces a number of features that helps in preparing a up-to-date websites. Some of the features are discussed here:

  • Canvas: This supports a 2-D drawing surface which you can program with JavaScript.
  • Audio & Video: You can insert audio or video on your web pages for media playback..
  • Persistent Local Storage: To Local storage use Persistent Local Storage.
  • WebSocket: A next-gen bidirectional communication technology for web applications.
  • Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
  • New Semantic Elements: These are like <header>, <footer>, and <section>.
  • Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.
  • Geolocation: Now visitors can choose to share their physical location with your web application.
  • Microdata: It lets you make your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
  • Drag and drop: Drag and drop the items from one location to another location on a the same webpage.

HTML5 Document Structure

The markup for an HTM 5 document would look like the following: 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
</html>
<header>
<nav>
<section> <aside>
<article>
<footer>
The following tags have been introduced for better structure:
  • header: header tag shows the header of page.
  • nav: nav tag shows a block of the document intended for navigation.
  • section: Section tag shows application section or generic document .
  • aside: aside tag shows a part of content that is only less matched with the page.
  • article: Article tag shows an unique part of content of a document, such as an article in newspaper.
  • footer.: footer tag shows a footer of a page and can have information about the author, copyright information, meta data, etc.
  • dialog: dialog tag can be used to mark up a communication.
  • figure: figure tag can be used to associate a caption together with some embedded content, such as a graphic or video.