What is New in HTML5

What is New in HTML5

What is HTML5

HTML5 is the latest edition of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. Now HTML5 is the standard for structuring and presenting content on the World Wide Web.

HTML5 is a has been jointly developed by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

HTML5 has come up with many new features like video playback and drag-and-drop which were previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

HTML5 Browser Support

Internet Explorer 9.0 and the latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features .The mobile web browsers which are shipped as pre-installed on Android, iPhones and iPads all support HTML5.

HTML Journey So Far

Year              Version

1989              Tim Berners-Lee invented www

1991              Tim Berners-Lee invented HTML

1993              Dave Raggett drafted HTML+

1995              HTML Working Group defined HTML 2.0

1997              W3C Recommendation: HTML 3.2

1999              W3C Recommendation: HTML 4.01

2000              W3C Recommendation: XHTML 1.0

2008              WHATWG HTML5 First Public Draft

2012              WHATWG HTML5 Living Standard

2014              W3C Recommendation: HTML5

2016              W3C Candidate Recommendation: HTML 5.1

2017              W3C Recommendation: HTML5.1 2nd Edition

2017              W3C Recommendation: HTML5.2

New Features

HTML5 came with a number of new elements and attributes which can be used to build a modern websites. Some of the most prominent features introduced in HTML5 are:

  • New Semantic Elements− The semantic elements are those elements which stand for its literal meaning. These are like <header>, <footer>, and <section>.
  • Forms 2.0− HTML web forms have been improved a lot by adding  new attributes <input> tag.
  • Drag and drop− Drag and drop feature has been introduced to drag the items from one location to another location on the same webpage
  • Persistent Local Storage− This feature has been implemented without being dependent on third-party plugins.
  • WebSocket− Its a next-generation bidirectional communication technology for web applications.
  • Server-Sent Events− HTML5 introduces new events which flow from web server to the web browsers called Server-Sent Events (SSE).
  • Canvas− Canvas is a two-dimensional drawing surface that can be programmed with JavaScript.
  • Audio & Video− In HTML5 audio or video can be embedded on  web pages without using any third-party plugins.
  • Geolocation− This feature is used by visitors to share their physical location with the web application.
  • Microdata− Microdata is used to create own vocabularies beyond HTML5 and which can be used in web pages with custom semantics.

Backward Compatibility

HTML5 has been designed to be backward compatible as much possible with existing web browsers. Most of its new features have been built on existing features which allows to provide fallback content for older browsers.

HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes, an attribute had to have a value and to close all empty elements.

HTML5shiv

Internet Explorer8 and older versions of IE does not support styling of HTML5. So, to run HTML5 with new features on IE8 and prior versions HTML5shiv is used. HTML5Shiv is a JavaScript solution for backward compatibility for IE8 and older versions. It is a JavaScript file (html5shiv.js) which can be downloaded or can be used directly from GITHub or open source CDN .

HTML5shiv is a JavaScript file which is referenced with in a <script> tag under <head> section of an HTML5 file. HTML5shiv should be placed before any new HTML5 element.

The syntax for using the HTML5shiv.js is:

<head>

<!–[if lt IE 9]>

<script src=”/js/html5shiv.js”></script>

<![endif]–>

</head>

To use the reference of  HTML5shiv from web or Open Source Software CDN site, it can go like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example of HTML5Shiv</title>
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script> <![endif]--> </head> <body> <article> <h1>Heading for Article</h1> <p>Text that appears under article</p> </article> </body> </html>

Flexibility

HTML5 offers a lot of flexibility and supports the following features −

  • Uppercase tag names.
  • Quotes are optional for attributes.
  • Attribute values are optional.
  • Closing empty elements are optional.

The DOCTYPE

DOCTYPE’s in older versions of HTML were longer because the old HTML versions were SGML based and hence required a reference to a DTD.

HTML 5 uses a simple syntax to specify DOCTYPE −

<!DOCTYPE html>

The above syntax is case-insensitive.

Character Encoding

HTML 5 uses charset attribute for specify Character Encoding as follows −

<meta charset = "UTF-8">

The above syntax is case-insensitive.

The <script> tag

HTML 5 uses simple syntax by removing extra information −

<script src = "scriptfile.js"></script>

The <link> tag

In HTML 5 <link> tag is written in the following format −

<link rel = "stylesheet" href = "stylefile.css">

HTML5 Elements

HTML5 elements are enclosed between start tags and end tags. Tags are delimited using angle brackets with the tag name in between.

The only difference between starting tags and ending tags is that the ending tag uses a slash before the tag name.

A typical p tag as an HTML5 element −

<p>…</p>

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

Some elements are used to write content like <p>…</p> contains a paragraph. While other elements, don’t contain any content at all and called as void elements. For example, br, hr, link, meta, etc.

HTML5 Attributes

HTML5 Elements can contain attributes that are used to set various properties of an element.

Some of these attributes can be used with any of the elements hence called global attributes and other can only be used with specific elements only.

Example −

<div class = “example”>…</div>

Attributes can  only be used within starting tags and must not be used in ending tags.

HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

HTML5 Document

The new tags  added in HTML5 for are −

  • section− Section tag represents a standard section in a  document where more than one elements can be grouped together.
  • article− The Article tag clubs together an independent piece of data of a document, it can be a blog post or newspaper article.
  • aside− This tag is used to demonstrate a piece of content that might be  slightly related to the rest of the page.
  • header− This tag represents the header of a section which precedes the primary content of the page.
  • footer− This tag represents a footer for a section and placed at the bottom of the page. It includes the  information about the author, copyright information, etc.
  • nav− It contains the group of links. The main purpose of this tag is to facilitate navigation.
  • dialog− This tag is used to create dialog boxes and modal windows with in browser.
  • figure – This tag is used to create self contained content related to main content such as images and videos. <figcaption> is used inside figure to caption an image or video etc.

The example of an HTML 5 document

<!DOCTYPE html> 
<html> 
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header role = "banner">
<h1> Example of HTML5 Document Structure </h1>
<p>Check this page in any browser.</p>
</header>
<nav>
<ul>
<li><a href = "https://digitalsanjiv.com/category/html5-tutorials/">
HTML5 Tutorials</a></li> <li><a href = " https://digitalsanjiv.com/category/javascript/">
JavaScript Tutorials</a></li> <li><a href = " https://digitalsanjiv.com/category/tally-erp9/"> Tally.ERP9 Tutorials</a></li> </ul> </nav> <article> <section> <p>An article can have multiple sections</p> </section> </article> <aside> <p>This is  aside part of the web page</p> </aside> <footer> <p>Created by <a href = "https://digitalsanjiv.com/">Digital Sanjiv
</a></p> </footer> </body> </html>

 

What is New in HTML5

HTML5 launched in 2014 is the latest version in HTML hierarchy . It has been included with new semantic elements, Form 2.0, Drag and Drop, Persistence Local Storage, microdata , web sockets, canvas, audio and video with new tags and attributes.

What is new semantic elements in HTML5

The new semantics elements has been introduced in HTML5 like <header>, <footer>, <section>, <article>, <nav> and <aside> etc. All these elements are meaning words and it stands for its literal meaning in HTML5.

What is HTML5shiv

HTML5shiv is a JavaScript file. which can be downloaded and used from local folder or can be used online from github or from any of available open source websites. The main purpose of using HTML5shiv is support HTML5 elements in IE8 and older versions of it.

 

Similar Posts : HTML Introduction

0 0 votes
Article Rating
Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
1 year ago

[…] What is New in HTML5        JavaScript Functions and Loops          How to Activate GST in Tally.ERP9 ? […]

trackback
1 year ago

[…] What is New in HTML5              How To Enable JavaScript in Browsers      Discounts in Sales Invoices in Tally.ERP9 […]

trackback
1 year ago

[…] You may Also Like :    How to Generate Output in JavaScript              Discounts in Sales Invoices in Tally.ERP9        What is New in HTML5 […]

trackback
1 year ago

[…] Let us Learn JavaScript from Step By Step            Multiple GST and Interstate Sales invoice                 What is New in HTML5 […]

trackback
1 year ago

[…] HTML Introduction                What is New in HTML5 […]

trackback
1 year ago

[…] How to Generate Output in JavaScript               Multiple GST and Interstate Sales invoice       What is New in HTML5 […]

trackback
1 year ago

[…] C Language Introduction            Let us Learn JavaScript from Step By Step              How to Activate GST in Tally.ERP9 ?        What is New in HTML5 […]

Please Subscribe to Stay Connected

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

DigitalSanjiv will use the information you provide on this form to be in touch with you and to provide updates and marketing.
Share via
Copy link
Powered by Social Snap
%d bloggers like this: