HTML 5 tutorials Part 4 - Introduction to HTML5

Initial 3 parts Part1, Part 2 and Part 3 we talked about the basics of HTML. I know most of the developers usually know about this stuff but it is always to brush up the basics before talking about the new stuff.

From this part we will start more on HTML5. First question that come to mind is what are the problems that are being solved by HTML5?

What is HTML5?

HTML5 is combination of new html elements and lots of new JavaScript APIs. I know this not a definition you were expecting but in reality this is it. So do we really need to call it HTML5? I think we can just say HTML as there will be new development but I guess there won't be any HTML6. It will be called on HTML.

Problems solved by HTML5

SEO

Previous we use one tag mostly in the web page design, I guess you know it is div. So for search engine to identify different parts of the page is by scanning the ids. So we need to keep consistent ids across the web pages. How this is solved by HTML5?

HTML5 provide us different html tags like header, main, footer which are used to specify the header content, main content and footer content of the page. Which makes is easy for the search engines to find specific contents of the page. It provides semantics for the web pages.

Mobile Friendly

Billions of people are now using mobile device and we want to make sure that our web pages are more suitable for mobile. If you open up a web page on mobile than you get an option to make the web page mobile friendly and read in mobile mode. As soon as you click on this option the web page completely change the design as per the mobile form factor. So it is easy to develop the web page for vast variety of mobile form factors.

Multi Media

HTML5 provide tags which can be used to host the multi media content like music, video, graphs and games. Now developer can develop a full fledged  game only in HTML5 and supporting CSS3 and javascript. So we do not need to use Flash or Silverlight to show videos or animated stuff on web pages. 

we will discuss these features in details as we move along the tutorials. I am sure there are other many important things which can be done easily in HTML5. Please add these to comments to share with others.

So here is the basic structure of HTML5 page that you can see.

Advanced JavaScript Topics Part 2

We were discussing the let keyword in the Part 1 of this series. We discussed what the advantages and how we can use let keyword in the code. However, let keyword has a problem it does not support hoisting, means if you have declared a variable using let keyword in the mid of the block it would not be available in the part above the declaration of the let keyword.

So you always make sure that let is declared at the top of the block.

As we discussed earlier let keyword kind of Hack the scope implicitly. We can always write the code to make sure when we see we can explicitly identify that this block is a scope. The example given the in the Part 1 of this series used the implicit way. To use the explicit way do it like this

function foo(bar) {

    "use strict"

    let (test = bar) {

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

However, this syntax is rejected by the committee. we can use some other way to make sure we see the block scope in the code as we read the code.

function foo(bar) {

    "use strict"

    /*let */

    {

        let test = bar

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

This is one way to do it. Keyle Simpson have created this great tool to help you with block scoping it is called Let-er .

So, as we started to talk about tools you might want to take a look at traceur-compiler it generates ES 5 code from ES 6 code. As there is development going on in ES 6 you should start writing your code in ES 6 and use a transpiler to convert the ES 6 code to ES 5. You can use grunt-traceur . Other than this you might wanna take a look at the tools for ES 6.

Hoisting

Hoisting is a concept which is developed to understand how JavaScript works when we declare the variables and functions. Take a look at the code below