What is HTML5

Table of Contents

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.

HTML 5 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.

HTML5 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.

HTML5 uses a simple syntax to specify DOCTYPE −

<!DOCTYPE html>

The above syntax is case-insensitive.

Character Encoding

HTML5 uses charset attribute for specify Character Encoding as follows −

<meta charset = "UTF-8">

The above syntax is case-insensitive.

The <script> tag

HTML5 uses simple syntax by removing extra information −

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

The <link> tag

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

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

HTML 5 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 −

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.

HTML 5 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 −

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.

HTML 5 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