Quick Guide to HTML5 : Learn the new version of HTML

HTML5 Image

HTML5 brief Overview 

HTML5 is the last official version released by W3 consortium , this is popularly known as HTML living standard and it is maintained by big companies like APPLE,google ,Mozila and Firefox. And it known as WHATWC (Web Hypertext Application Technology Working Group).

It was first released in 2014 with major modification to the previous  version of HTML. HTML5 contain detailed processing models to support  more interoperable implementations; it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. 

This post explains the HTML5 , those who are completely new to HTML ,please click the following to understand basics of HTML to create a simple webpage.

HTML5 provides lot of flexibilities and in addition to this suppports following feature :

  • Uppercase tag name.
  • Quotes are optional in attributes.
  • Values inside attributes are optional.
  • Closing empty elements optional.

Many new syntactic feature are introduced in HTML5 ,which are as follow:

<video> ,<audio> and <canvas> elements are used for the multimedia and graphical content representation .For the text content ,HTML5 introduced :<main>,<section>,<header>,<artical> ,<footer>, <aside>,<nav>,<figure> are added.The follwoing tags are modified and redefined :<a>,<cite> and <menu>.

Another important feature included in HTML5 is DOM (Document Object Model) ,which was used to present only in Javascript. HTML5 includes best processing for Invalid documents.

Now I will explain  what is new in HTML5:

  1. The Doctype is very simple now : it is declared as <!DOCTYPE html>.
  2. The character encoding declaration became very simple: <meta charset=”UTF-8”>.The following HTML4 elements are removed from HTML5 .<acronym>, ,<applet>,<basefont>,<big>,<center>,<dir>,<font> ,<frame>,<frameset>,<noframes>,<strike>,<tt>.

New structural elements in HTML5 are tabulated as follow:

<article>Defines an article in a document
<aside>Defines the content aside from the page content
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it.
<details>Defines additional details that the user can view or hide
<figcaption>Defines a caption for a <figure> element
<figure>Defines self-contained content
<footer>Define the footer
<header>Define the header.
<main>Define the main content of the document
<mark>Mark or highlight the content.
<nav>Define the navigation links.
<progress>Define the progress of a task.
<datalist> Species a list of predefined option for input control.
<output> Defines the output of the calculation in the form.

The new Input types in HTML5 are as follows:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

In the beginning of this post ,I already given few tags in HTML5 ,which are explained with the description in following paragraph.

<canvas>Draw graphics, on the fly, via scripting (usually JavaScript)<picture>Defines a container for multiple image resources.

<svg>Draw scalable vector graphics.

<audio>Defines sound content.

<embed>Defines a container for an external (non-HTML) application.

<picture>Defines a container for multiple image resources.

<source>Defines multiple media resources for media elements (<video> and <audio>).

<track>Defines text tracks for media elements (<video> and <audio>).

<video>Defines video or movie.

APIs supported by HTML5 are as follows:

Drag and Drop  (DnD) is ground-breaking User Interface idea which makes it simple to duplicate, reorder and cancellation of things with the assistance of mouse clicks. This permits the client to snap and hold the mouse conservative over a component, drag it to another area, and discharge the mouse catch to drop the component there.

HTML5 WEB SQL database

This section is applicable for those peoples ,who are well aware of the SQL and RDBMS concepts , if not please have a look at SQL basics .
The methods are as follows :

Opening database connection:opendatabseconnection () : which takes five parameters

  •  Database name
  • Version number
  • Text description
  • Size of database.
  • Creation callback.

Eg:  var db = openDatabase(‘mydb1′, ‘2.0’, ‘Test’, 3* 1024 * 1024); The last argument is called when database. Is created otherwise no need.

Executing the queries:

 To execute a query we can use the database.transaction() function. This function requires a single argument, which is a function that takes care of actually executing the query.

       db.transaction(function (tx) {

   tx.executeSql('CREATE TABLE IF NOT EXISTS new (id unique, name)'); 
The above query will create a table called new in 'mydb1' database.

We can do the insert and Read operation in the database ,which is given below:

db.transaction(function (tx) { 
   tx.executeSql('INSERT INTO new (id, name) VALUES (1, “raj")’);
The above query will insert the value to the table created in the above sections.

Execute the query

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM new’);

The above query read the content from the table new ,we can modify the above query according to our results ,if you are good at RDBMS concept ,we can use the complex sql queries to retrieve the data efficiently. 
Please try above code  by creating separate database and tables .
The HTML5 defines more features than we discussed in this post. The Extra information is found at https://www.tutorialspoint.com/html5/index.html.

In a nutshell ,the HTML5 removes lot redundant feature sin HTML4 and introduced lot of APIs and new tags ,which make the multimedia and graphic application creation very simple and there by reducing the use of CSS in all those cases.

Leave a Comment