Marla Sukesh">
Click here to Skip to main content
15,349,767 members
Articles / Web Development / HTML5
Posted 9 Oct 2014


437 bookmarked

Learn HTML 5 in 3 days – Day 1

Rate me:
Please Sign up or sign in to vote.
4.85/5 (227 votes)
19 Apr 2016CPOL16 min read
Welcome to day 1 of Learn HTML 5 in 3 days article series


Image 1

HTML 5 is one of the hot topic in recent days. So I decide to write a complete learning tutorial about same. It’s going to be a 2 days series article. We will start with very basic features and move towards advanced features and scenario in step by step fashion.

Note: As a Microsoft guy whenever there is a need for server side technology I will be using C# and Asp.Net.

What we won’t cover here?

If you don’t know anything about HTML then this article is not for you. We won’t talk about break (<br>), Bold (<b>) tags here, rather we will look into new concepts in HTML 5.

You can learn about basic HTML here.

Complete List



Introduction to HTML 5

Let’s start with understainding some basic, intriguing and unaware terminologies and concepts.

  • What is difference between SGML, HTML and XML?
  • What is Doc type?
  • How HTML 5 is different?
  • Understand HTML

What is difference between SGML, HTML and XML?

  • SGML stands for Standard Globalized Markup language is the one used for defining standard markup languages. In simple words it defines how a document should looks like.
  • HTML stands for Hyper Text markup language is a standard Markup language based on SGML and it will be used for creating Web Pages. Rules defining the markup is present inside a DTD and DTD is created using SGML.
  • XML stands for Extensible markup language is derived from SGML and its purpose was cattering growing need of internet. HTML had some limitations which was over came by XML. XML is simply a subset of SGML which will be used for representing Data.

What is Doc type?

When you try to create a HTML page using tools like Dreamweaver or Visual studio you will find following line at the top of the document always.


Have you ever wondered what it is?

It’s simply an instruction to the web browser about the version of HTML the page is written in. With doctype we refers a DTD which defines how HTML document should be structured, what all tags are allowed, what should be the parent, what should be the child etc. In short DTD contain rules.

Image 2

How HTML worked for me with Doctype then?

Most of the browser said “It’s ok if you won’t provide DTD. I can understand HTML well. I know its rule and so I know how to render it”.

This is the reason why most of the developers are unaware about DTD and doctype.

How HTML 5 is different from previous versions?

HTML 5 is not based on SGML hence it won’t require DTD. It’s all together new markup language and have its own parsing rules. Its specifications and syntaxes closely resembles with prior version but it’s all together a new language.

In case of HTML 5 doctype is quite simple.

<!DOCTYPE html>

Now as per the “DOCTYPEs is required in top of every HTML document despite of its HTML4 or HTML 5. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.”


HTML 5 New features

Image 3

Main idea behind New HTML 5 feature is to provide standard in web development world.

From long time we are relying on many third party libraries/plugins to achieve some common functionalities like datepicker, animations, validations, playing videos and audios, offline browsing, client side multi-threading etc.,

Now we will be able to achieve many such functionalities in a standard way.

Note For beginners – Standard means, everyone will follow the same approach in order to achieve something. Example – You will see same validation code everywhere (in all future applications). Right now there is no standard. Someone is using jQuery validation where as someone is using something else. But now onwards there will be standard.

Let’s explore each of them one by one.

Lab 1 – Understanding new Page structure semantics

When we think about a Web UI what comes to your mind.

Header (not head tag – Header of a page), Footer, navigation bar, Content of page, images, Caption to those images, a side bar etc.

Image 4

You can see an alien image in the left side and a normal boy image in the right side.

Everyone can easily locate and identify every body part from the right side image, because it’s a standard. This is not a case with left image.

Same logic applies when it comes to UI development.

Image 5

Earlier HTML didn’t had standard tags or elements for defining different visible sections of a document such as header of document, footer of a document, content of a document etc.  Some people were using “div” decorated with some css styles and some were using “table…tr…td”.  Problem with this approach was inconsistency.

Image 6


Now with HTML 5 we have support for standard tags such as Header, Footer, nav, FigCaption (figure caption) etc., each of which will represent some special section.

These tags makes our markup a semantic markup.

Note: - This tag doesn’t provide any special advantages in rendering. They only makes our HTML structure meaningful.  

Image 7  

Lab 2 – Demo with New Input attributes

New type values

Earlier developer were using different libraries in order to get different UI elements such as datepicker, range picker, color picker etc.

Now HTML 5 brought standard by introducing new attributes to “type” attribute of input elements.

Let’s look at some of them.

  • Number
<input type="number" name="MyNuberElement" id="MyNumberElement" />

Image 8


  • Range
<input type="range" name="MyRangeElement" id="MyRangeElement"/>

Image 9

  • Color
<input type="color" id="MyColorElement" name="MyColorElement" />

Image 10

  • Date
<input type="date" id="MyDateElement" name="MyDateElement" />

Image 11

  • Time
<input type="time" id="MyTimeElement" name="MyTimeElement"/>

Image 12

  • Datetime-local
<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

Image 13

  • DateTime (Also include time zone)
<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>

Image 14

  • Month
<input type="month" id="MyMonthElement" name="MyMonthElement" />

Image 15

  • Week
<input type="week" id="MyWeekElement" name="MyWeekElement" />

Image 16

Some useful attributes

  • Autofocus

This attribute let us set initial focus on page load.


<label for="birthMonth">Birth Month</label>

<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />


This code makes focus to be set on “MyMonthElement” control element by default when page loads for the first time.

Note: In case “autofocus” is attached to multiple controls focus will be set on first control.

  • Placeholder

Let us set watermark on an input control.

<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"

               name="MyPlaceHolderControl" />

Image 17

Lab 3 – Understanding HTML 5 Datalist control

Datalist is a new tag in HTML 5 which will let us add autocomplete feature to an input textbox.

It’s a simple 3 step task.

Step 1 – Create Datalist

<datalist id="Hobbies">

    <option>Reading books</option>

    <option>Watching movies</option>

    <option>Playing games</option>


Step 2 – Create input control and bind the list

<input type="text" name="TxtHobbies" value="" list="Hobbies" />

Step 3 –Execute and Test

Image 18

Click here if you are interested in learning how to make datalist dynamic using MVC.

Lab 4 – Output element

Calculation is the integral part of every application and sometime we often display those calcualted values in the UI. Before HTML 5 there was no standard element for displaying such results. Some people were using “span”, somewhere using “div” whereas some were using “disabled input textbox”.

It will be very difficult for anyone to understand the purpose of a tag/element/control just by looking at it.

In HTML 5 this problem is solved by introduction of a standard and semantic markup called “Output”.

<div oninput=

        "document.getElementById(MyOutputElement).value =

        (document.getElementById('input1').valueAsNumber) +


    <input id="input1" name="input1" type="number" value="1"> +

    <input id="input2" name="input2" type="number" value="2"> =

    <output id="MyOutputElement">3</output>


Note: Just like to lab2 markups, Output element won’t provide any special advantage other than adding semantic meaning to our UI.

Lab 5, 6 and 7 – Understanding HTML 5 validation feature

Validation is one of the most important features from the day 1 of application development. For implementing validation we have been using many libraries such as jQuery validation, live validation etc.

But now validation code will become a standard code with the help of new HTML 5 validation support.


Lab 5 – implement validation using “type” attribute of input element

Step 1 – Create Form tag and add different input elements as follows






        <input type="email" id="email" name="email" />


        <input type="url" id="url" name="url" />


        <input type="tel" id="phone" name="phone" />

        <label>Number Demo:</label>

        <input type="number" name="MyNumberElement" id="MyNumberElement" />

        <label>Range Demo:</label>

        <input type="range" name="MyRangeElement" id="MyRangeElement" />

        <label>Color Demo</label>

        <input type="color" id="MyColorElement" name="MyColorElement" />



        <label>Date Demo</label>

        <input type="date" id="MyDateElement" name="MyDateElement" />

        <label>Time Demo</label>

        <input type="time" id="MyTimeElement" name="MyTimeElement" />

        <label>DateTime Local Demo</label>

        <input type="datetime-local" id="datetime" name=" datetime" />

        <label>Month Demo</label>

        <input type="month" id="month" name="month" />

        <label>Week Demo</label>

        <input type="week" id="MyWeekElement" name="MyWeekElement" />

        <div style="text-align:right">

          <input type="submit" value="validate" />






Note: In the code you can see that we have introduced some new input types like email, url, tel etc. These types will only serves validation. As per rendering is concerned they will simply generates textbox.

Step 2 – Execute and test the application

Image 19

As you can see values in the input controls are validated and a predefined error message is shown (in a popup) automatically in case of validation fail.

Note: In the image I have shown demo for only three input controls. You can download the source attached and check for other

Lab 6 – Implementing validation using custom validation attributes

In HTML 5 new attributes are added input controls to support validation. Let’s do a demo on some of them.

Step 1 – Create input controls as follows



    <input type="email" name="TxtEmail"

          id="TxtEmail" required />

    <label>User Name</label>

    <input type="text" name="username"

          id="username" pattern="[a-zA-Z]{5,}" />


    <input type="number" name="TxtAge"

          id="TxtAge" min="10" max="50" />

    <br /><input type="submit" value="Register" />



  • Required attributes makes textbox a compulsory field
  • Pattern attribute is set to a regular expression indicating that it should contain minimum 5 and maximum 10 character
  • Min and Max attribute works with number input control and force control to contain values within that range.


Image 20

Lab 7 – Customizing validation

We can customize HTML 5 validation completely by handling “oninvalid” event.

Step 1 – Create Input controls, attach validation attributes and add customized error messages as follows.



    <input type="email" name="TxtEmail"

            id="TxtEmail"  required/>

    <span class="MissingEmailSpan invalid">Email Missing</span>

    <span class="InvalidEmailSpan invalid">Invalid email</span>

    <label>User Name</label>

    <input type="text" name="username"

            id="username" pattern="[a-zA-Z]{5,10}"  />

    <span class="InvalidUserNameSpan invalid">Username not matching with pattern</span>


    <input type="number" name="TxtAge"

            id="TxtAge" min="10" max="50" />

    <span class="AgeIsNotInRangeSpan invalid">Age must be be between 10 and 50</span>

    <span class="InvalidAgeSpan invalid">Invalid Age</span>

    <br /><input type="submit" value="Register" />


Step 2 – Add a style tag and create css to hide error messages initially


        .invalid {

            display: none;



Step 3 – Hide error message on submit click.

<input type="submit" value="Register" onclick="$('.invalid').hide();" />

Step 4 – Invoke functions when input controls contain invalid values.

<input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>

(Repeat above step for all input controls)

Step 5 – Create Event handler JavaScript function as follows.

function OnInvalidEmail()



    var element = event.srcElement;

    var validity = element.validity;

    if (validity.valueMissing) {



    else if (validity.typeMismatch) {




(Repeat above step for all input controls)


  • event.preventDefault();  - It will prevent the default behavior. Show error message as popup.
  • event.srcElement - Control to which contain invalid value. In this case email textbox.
  • element.validity – Contains the validation information about control. Important attributes are
    • valueMissing – will be true when “required” attribute is attached to control and current value is blank.
    • typeMismatch – will be true when type mismatches with current value of control.
    • badInput – will be true when value in the control is invalid. Example – It’s a number textbox and alphatic character is added.
    • rangeOverflow and rangeUnderflow – will be true when control is number textbox and values are not within the range

Step 5 – Execute and Test the application

Image 21

You can download the attached source code for complete demonstration.

Lab 8, 9 and 10 and 11 - Application Cache in HTML 5

When someone says “Web application” then what comes to your mind first? Internet isn’t it?

You have internet ==> you are online ==> you can use the application

Your internet is down = > you are offline ==>you cannot use the application

Think about Outlook. It gives you an option to check your past mails even if you are offline. Just imagine if facebook, gmail had such featuresJ. If our internet application were working even in offline mode it would have made our life easy.

Now this is possible with HTML 5 application cache. Let’s understand it with sample demos.

Lab 8 – Simple Application Cache Demo

Step 1 – Create a new Web Forms application

Open visual studio and create a new empty web forms application

Step 2 – Add Style.css

  • Right click the project. Add new folder and name it Styles           
  • Right click the styles folder >> Add >> New Item. Select style sheet and name it style.css
  • Add following css block inside style.css
.DivStyle {



Step 3 – Create manifest text file as follows

  • Right click the project. Add >> New Item. Select Text file and name it MyCache.txt
  • Add following content inside it

# ver 1



Step 4 – Create a file which need to be cached

  • Right click your project. Add >> New Item. Select Web Form and name it MyPage.aspx
  • Add following content inside file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>

<!DOCTYPE html>

<html  manifest="MyCache.txt">

<head runat="server">


    <link href="Styles/Style.css" rel="stylesheet" />



    <form id="form1" runat="server">      

    <div class="DivStyle" id="MyDiv">

        Hi, Execution count is 1





Step 5 – Execute the application

Image 22

Step 6 – Go offline

Image 23

Step 7 – Refresh the page

You will notice that you are still able to browse the application.


Step 8 – Change the Web Form

Open MyPage.aspx. And Change content inside “MyDiv” to something else.

<div class="DivStyle" id="MyDiv">

    Hi, Execution count is 2


Step 9 – Execute the applications

Image 24

It’s not a new output. It’s not refreshing.

Step 10 – Change the manifest file as follows


# ver 3



Step 11 – Refresh the page twice

Now you will get the updated output.

Explanation: Understanding step by step

  1. Very first line in the manifest line that is “CACHE MANIFEST” indicates that it’s a manifest file
  2. In the page “manifest” attribute of html indicates that “MyPage.aspx” need to be cached.
  3. In the manifest file there is a section “CACHE”. It will contain a list of files which are required for MyPage.aspx to run properly in offline mode. All of these files will be cached along with MyPage.aspx.
  4. End user will get the latest contents during the first request and then they get cached. All the subsequent requests will get cached version.
  5. Cache will get updated when something get changed inside manifest file hence in manifest file just after “CACHE MANIFEST” keyword one comment line is added. In this example we mentioned it as “ver 2” but it can be anything.
  6. When end user makes a request if requesting contents are cached browser will return the cached version of the content but in the same time in the background browser will make a request for manifest and see if manifest is changed in the server. In case it is changed Cache will be updated. But as I said it will be done in the background hence the current request will get the old content. Hence we have to make double refresh

Image 25

Lab 9 – Solve the double refresh problem

For this simply add following code in your page.


    window.applicationCache.onupdateready = function (e) {





onupdateready event will be fired immediately after the cache is updated.

Note – While practice make sure to clear the Application cache manually before every lab. If you are a chrome user you can do it in this way.

  • Click on gear icon and go to settings.
  • Expand advanced settings.
  • Click on content settings
  • Click on All Cookies and site data

Image 26

  • In the search box enter localhost and click delete icon

Image 27

Lab 10– Understand more about manifest

“CACHE” is not the only section in the manifest file. There are more.

  • NETWORK – If you are caching a page you have to specify all the resources in it. Means all the css files, js files, images etc used in the page.
    In some cases we want that some resources will be available only online. When it comes to offline it should not be available.

NETWORK section let us list those which we don’t want to cache.

  • FALLBACK – In some cases we want that some resources should be replaced with some other resources when it goes offline. Example when it’s online everything should be “red” but when offline everything should be “green”.

Fallback let us define those settings.

Let’s have a demo and understand it.

Step 1 – Create a new Web Forms application

Open visual studio and create a new empty web forms application

Step 2 – Create stylesheet Files

  • Right click the project. Add new folder and name it Styles           
  • Right click the styles folder >> Add >> New Item. Select style sheet and name it style.css
  • Add following css block inside style.css
.Div1 {


  • Right click the styles folder >> Add >> New Item. Select style sheet and name it style2.css
  • Add following css block inside style2.css
.Div3 {


  • Right click the project. Add new folder and name it OnlineStyles
  • Right click the OnlineStyles folder >> Add >> New Item. Select style sheet and name it Style3.css
  • Add following css block inside style.css
.Div3 {


  • Right click the project. Add new folder and name it OfflineStyles
  • Right click the OfflineStyles folder >> Add >> New Item. Select style sheet and name it Style4.css
  • Add following css block inside style.css
.Div3 {



Step 3 – Create manifest text file as follows

  • Right click the project. Add >> New Item. Select Text file and name it MyCache.txt
  • Add following content inside it

# ver 1



# Comment – Style.css will be cached with page



# Comment – Style2.css will be available only online


OnlineStyles\Style3.css OfflineStyles\Style4.css

# Comment – Style3.css will be used when online and style4.css will be cached and used when application is offline

Step 4 – Create a file which need to be cached

  • Right click your project. Add >> New Item. Select Web Form and name it MyPage.aspx
  • Add following content inside file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>

<!DOCTYPE html>

<html  manifest="MyCache.txt">

<head runat="server">


    <link href="Styles/Style.css" rel="stylesheet" />

    <link href="Styles/Style2.css" rel="stylesheet" />

    <link href="OnlineStyles/Style3.css" rel="stylesheet" />


        window.applicationCache.onupdateready = function (e) {







    <form id="form1" runat="server">      

    <div class="Div1" id="MyDiv1">

        Hi, Execution count is 1


    <div class="Div2" id="MyDiv2">

        Hi, Execution count is 1


    <div class="Div3" id="MyDiv3">

        Hi, Execution count is 1





Step 5 – Execute the application

Image 28

Step 6 – Go offline

Image 29

Step 7 – Refresh the page

Image 30

As you can style2.css didn’t cached and style3.css is replaced with style4.css

Lab 11 - Importance of NETWORK section

One may ask a question what will happen if you won’t provide it.

In the above example let say we won’t specify Network section. Let’s understand it by a demo,

Step 1 – Clear the cache

Follow the step described in a note after Lab 8.

Step 2 – Remove NETWORK Section and execute the application

When your application executes for the first time it works fine and you will get a correct output.

Step 3 – Refresh the page

Now don’t stop your application. Simply refresh the page you will see some strange output like this.

Image 31

You are online but still style2.css formatting is not applying because only application get cached it will always loaded from the cache.

When you specify Style2.css in NETWORK section it will always load that file from online location. If you are online it will work, if you are offline they won’t get loaded.

Application caching vs old browser caching

Browser caching works on File level. Browser automatically caches individual files which ultimately reduces the subsequent request load. It will not make your application work offline because some files required for execution of application may not be exist in the cache.

Application caching works on application level. It works on transaction. Here one application means, Page which contain manifest attribute + all the resources specified in CACHE and FALLBACK section of manifest file. Either all of them get cached or none. If one of the resource fail to cache, application cache won’t work.


So that’s it for Day 1.

Image 32

Hope you enjoyed reading it. 

Don’t forget to vote and comment.

For all kind of online, Video based, corporate trainings on various Microsoft and Non-Microsoft technologies like MVC, WCF, Design patterns, MSBI, Angular, HTML 5 etc. visit

For reasonable class room trainings visit

For 500+ videos on MSBI, .NET, SharePoint, Architecture, SQL, WPF, WCF, MVC, ASP.NET etc click @

Day 2 and Day 3 Agenda

  • WebSockets
  • Canvas
  • SVG
  • Media
  • Drag and drop
  • GeoLocation
  • WebStorage
  • Web Worker
  • Server Sent events
  • Web Sql
  • IndexDB



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Marla Sukesh
Founder Just Compile
India India
Learning is fun but teaching is awesome.

Who I am? Trainer + consultant + Developer/Architect + Director of Just Compile

My Company - Just Compile

I can be seen in, @sukeshmarla or Facebook

Comments and Discussions

GeneralLearn html in 5 days Pin
Member 137570981-Apr-18 7:17
MemberMember 137570981-Apr-18 7:17 
QuestionNice Pin
FredericGuilhon25-Oct-16 23:15
MemberFredericGuilhon25-Oct-16 23:15 
PraiseGood One.. Pin
Member 123377473-May-16 20:21
MemberMember 123377473-May-16 20:21 
QuestionExamples don't work in Netscape 45 and IE 11 Pin
Werner Wolf21-Apr-16 5:06
MemberWerner Wolf21-Apr-16 5:06 
AnswerRe: Examples don't work in Netscape 45 and IE 11 Pin
Marla Sukesh21-Apr-16 5:07
professional Marla Sukesh21-Apr-16 5:07 
QuestionThanks Pin
Member 1067628120-Apr-16 18:24
MemberMember 1067628120-Apr-16 18:24 
AnswerRe: Thanks Pin
Marla Sukesh21-Apr-16 5:11
professional Marla Sukesh21-Apr-16 5:11 
PraiseVery Good - Thank you! Pin
fsteding20-Apr-16 9:07
Memberfsteding20-Apr-16 9:07 
GeneralRe: Very Good - Thank you! Pin
Marla Sukesh21-Apr-16 5:11
professional Marla Sukesh21-Apr-16 5:11 
Questionthe zip files are corrupt Pin
Developer @ CCO20-Apr-16 8:58
professionalDeveloper @ CCO20-Apr-16 8:58 
AnswerRe: the zip files are corrupt Pin
Marla Sukesh21-Apr-16 5:12
professional Marla Sukesh21-Apr-16 5:12 
PraiseGood Pin
SimonJinx19-Apr-16 23:15
MemberSimonJinx19-Apr-16 23:15 
GeneralRe: Good Pin
Marla Sukesh20-Apr-16 0:12
professional Marla Sukesh20-Apr-16 0:12 
GeneralNice Article Pin
Narendra Mohan10-Jun-15 0:43
MemberNarendra Mohan10-Jun-15 0:43 
GeneralRe: Nice Article Pin
Marla Sukesh20-Apr-16 0:12
professional Marla Sukesh20-Apr-16 0:12 
QuestionLab 8 Step 6 - go offline Pin
BigFatGoalie27-Apr-15 7:51
MemberBigFatGoalie27-Apr-15 7:51 
AnswerRe: Lab 8 Step 6 - go offline Pin
Marla Sukesh27-Apr-15 7:54
professional Marla Sukesh27-Apr-15 7:54 
GeneralMy vote of 5 Pin
Amey K Bhatkar26-Apr-15 6:01
MemberAmey K Bhatkar26-Apr-15 6:01 
GeneralRe: My vote of 5 Pin
Marla Sukesh26-Apr-15 18:21
professional Marla Sukesh26-Apr-15 18:21 
QuestionNice information Pin
sandeepkumarvemula23-Mar-15 21:38
Membersandeepkumarvemula23-Mar-15 21:38 
AnswerRe: Nice information Pin
Marla Sukesh23-Mar-15 23:47
professional Marla Sukesh23-Mar-15 23:47 
QuestionI am pretty new to HTML5, however this article helped me to understand the concept Pin
Liju Sankar28-Jan-15 3:48
professionalLiju Sankar28-Jan-15 3:48 
GeneralMy vote of 5 Pin
M Rayhan4-Dec-14 22:19
MemberM Rayhan4-Dec-14 22:19 
GeneralRe: My vote of 5 Pin
Marla Sukesh6-Dec-14 6:43
professional Marla Sukesh6-Dec-14 6:43 
QuestionWhere I can get DAY 2 and Day 3? Pin
abhishekdec14-Dec-14 2:18
Memberabhishekdec14-Dec-14 2:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.