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
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
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).
- 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.
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.
The syntax for using the HTML5shiv.js is:
<!–[if lt IE 9]>
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>
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.
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 −
The above syntax is case-insensitive.
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 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.
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.
<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.
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/">
</a></p> </footer> </body> </html>
What is New in HTML5
What is new semantic elements in HTML5
What is HTML5shiv
Similar Posts : HTML Introduction