New Semantics and Input Elements in HTML5


Today I am writing about new the semantics and input elements of HTML5. Before looking into new elements let's first look into an overview and the need for HTML5.

Overview of HTML5

  • HTML5 is a new standard for HTML. It's the output of joint efforts from the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
  • The previous version of HTML is HTML 4.01 that came in 1999.
  • The major browsers support many of the new HTML5 elements and APIs.

Why we need HTML5

In the early days we had very few devices and operating systems. But in today's worlds we have many devices with different screen resolutions and operating systems and the industry is moving towards a Bring Your Own Devices (BYOD) philosophy.
There are the following major benefits of HTML5:
  • It introduces more efficient markup to eliminate the use of external plugins like Adobe Flash Player. 
  • HTML5 also reduces the use of scripting languages and it’s more SEO friendly. 
  • It is device independent and is supported by the latest versions of all major web browsers.
New semantic\structural elements in HTMLS:
  • <article>
  • <aside>
  • <header>
  • <footer>
  • <section>
  • <nav>
  • <summary>
  • <figure>
  • <figcaption>
New input elements of HTML5:
  • <input type = “color” />
  • <input type = “date” />
  • <input type = “datetime” />
  • <input type = “datetime-local” />
  • <input type = “email” />
  • <input type = “month” />
  • <input type = “number” />
  • <input type = “range” />
  • <input type = “search” />
  • <input type = “tel” />
  • <input type = “time” />
  • <input type = “url” />
  • <input type = “week” />


In this article,we studied new semantics and input elemenets in html5