Skip to content

sureshalagarsamy/html5-new-features

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

HTML History
  • Tim Berners-Lee invented HTML in 1991
  • 1991 to 1999, HTML developed from version 1 to version 4
  • 2004 WHATWG (Web Hypertext Application Technology Working Group) was formed.
  • 2006 W3C announced that they would support WHATWG.
  • 2008 the first HTML5 public draft was released.
  • W3C HTML5 recommendation was released 2014.

What is New in HTML5?

Basic useful feature list:

  • The DOCTYPE declaration for HTML5 is simple
  • The character encoding (charset) declaration is simple
<!DOCTYPE html>
<meta charset="UTF-8">

New HTML5 Elements

 - semantic elements like <header>, <footer>, <article>, and <section>
 - Form elements and Attributes like number, date, time, calendar, and range
 - graphic elements: <svg> and <canvas>
 - multimedia elements: <audio> and <video>

HTML5 API's (Application Programming Interfaces)

Most interesting new HTML5 APIs are

  • HTML Geolocation
  • Drag and Drop
  • Local Storage
  • Application Cache
  • Web Workers
  • SSE

HTML5 Browser Support

HTML5 is supported in all modern browsers.

New Semantic Elements (listed few)

<header>,<footer>,<nav>,<section>,<figure>,<figcaption>,<aside>, <summary>, <progress>, <details>

New Form Elements

<datalist>, <keygen>, <output>

New Input Types (listed few)

<color>, <email>, <search>, <tel>, <date>, <datetime>, <number>, <url>, <range>

Graphics Elements

<canvas>, <svg>

Media Elements

<video>, <audio>, <source>, <track>, <embed>

Use of HTML5Shiv

HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

Add the HTML5Shiv:

<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Setting The Viewport

HTML5 introduced a method to control over the viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

About

What is New in HTML5?

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages