HTML5 Introduction:




The HTML5 have the new features and improvements to existing features. HTML5 includes all the elements that are present in the HTML4 and XHTML. It includes the redefinition of the existing markup elements.




How HTML5 document declaration

The HTML5 document can be declared using the following declaration:

< ! DOCTYPE html >

< meta charset = “UTF-8 >

< meta charset = “UTF-8 > is the character encoding declaration. After you declared the HTML5 document, you can add various other features such as you can use the CANVAS element to draw graphics.

The following example illustrates an HTML5 document:

EXAMPLE

< ! DOCTYPE html>

<html >

< head >

< meta charset = “UTF-8” >

< title > Document Title </ title >

</ head >

< body >

Body of the document

</ body >

</ html >

This will result as follows:

how-html5-document-declaration

The only difference you can see that we added character encoding which is UTF-8. Through this you can use the new HTML5 elements.


New HTML5 Elements

There are many additional elements that include semantic elements, graphic elements like CANVAS element, etc. There are some elements that are removed from the HTML5 for example < frameset >, < frame >, < font >, < dir >,  < basefont >, < applet >, < tt >, < noframes >, etc. There are some tags that are used to define the semantic or structural elements.


HTML5 API

API stands for Application Programming Interface. It is just like the GUI that is graphical user interface. The difference between the Application Programming Interface and the Graphical User Interface is that the GUI is an interface for human beings and the API is the interface for coding.

The API provides buttons for your code. The API is a way of abstracting the complex working that is being done in the background. Some of the new Application Programming Interface in the HTML5 document is drag and drop, geolocation, web workers, local storage, and application cache.




History of HTML

In 1980, Tim Berners-Lee introduced www, then by 1991 Tim Berners-Lee invented HTML, in 1993 HTML+ was drafted, then in 1995 HTML 2 was introduced. In 1997 HTML 3.2 was introduced by the W3C recommendation and after two years of this HTML4 was recommended by the W3C.

In 2000 XHTML 1 was introduced, by then HTML5 came with a lot of its versions.

The web development history has evolved itself in a very short time period. In 1990, a website having some images was considered to be at the top. Along the way, the web markup has evolved. The XHTML and the HTML4 were same but the XHTML had the strict rules of XML style syntax.


HTML5 Browser Support

The changes to HTML5 has made in such a way that it can be supported by the old browsers. The HTML5 can even be supported by the old version of internet explorer. This is not meant that all the new features of the HTML5 are supported with the old version of internet explorer but it means that there will be no problem regarding page breaks or invisibility.

The best example to this is that some of the videos cannot be played in the internet explorer; this is because of the flash video player. Old browsers such as internet explorer version 6 to version 9 fail to support the best features and enhancements of the HTML5.

Now there are browsers that are auto updated and are called ever green browsers. It means that the new features will be functional to all the largest audience.


Semantic elements as Block elements

There eight new elements that are block level elements and are semantic as well. These eight elements are: < header >, < footer >, < section >, < aside >, < article >, < main >, < figure >, and < nav >. Consider the following figure:

semantic-elements-as-block-elements


Add new elements to HTML

In an HTML document, new elements of your own choice can also be inserted. This can be done using the < script > element and < style > element. You can define your element specification using the < style > element. This has been done in the following example:

EXAMPLE

Consider the following example:

< ! DOCTYPE html >

<html >

< head >

< meta charset = “UTF-8” >

< script > document.createElement (“myFirstElement”) </ script >

< style >

myFirstElement {

display : block ;

background-color : #FF0000 ;

padding : 40px ;

font-size : 20 px ;

}

</ style >

</ head >

< body >

Body of the document

< myFirstElement > Used MY First Element < /myFirstElement >

</ body >

</ html >

This will generate the following result:

add-new-elements-to-html

In the above example, we used the < script > element in which the declaration of the element that will be created by the user is being done. After that there comes the < style > element.

It defines the element’s background color and the pixels, padding and its font sixe, etc. In the body of the HTML document, we used our newly created element. You can see the result as the newly created element’s background was set red, it appears red. And the contents of the element are displayed on the browser.

The statement document.createElement is mandatory to create a new element. This statement is a JavaScript statement.


Internet Explorer 8 problems

As you have seen that we created an unknown element, the old versions of internet explorer do not support them. In other words, we cannot define our own styling of some element in the internet explorers’ old versions. This problem is later solved by HTML5Shiv that is explained below:




HTML5Shiv

In the above section, we discussed that the styling of unknown elements cannot be defined in the older versions of internet explorer, to resolve this problem Sjoerd Visscher created an HTML5 JavaScript that enables the styling of unknown elements. This is known as HTML5Shiv.

There is a special coding in the head element of the HTML document to include the HTML5Shiv for internet explorer older versions. This has been shown in the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

<head >

<!–[if lt IE 9]>

  <script src =”//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js”> </script>

  <![endif]–>

</ head >

</ html >

Using the above code, you can specify and define your own required HTML elements. These elements can then be styled or formatted as required.