Introduction to HTML5
Introduction
HTML5 is one of the hot topic in recent days. So I decide to start my technical blogger journey by writing a tutorial about the same.I will start with very basic features and move towards advanced features and scenario in step by step fashion.
Note: I will use C# and Asp.net as server side
What I 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.
Let’s start with understanding some basic, intriguing and unaware terminologies and concepts.
- What is difference between SGML, HTML and XML?
- What is Doc type?
- How HTML5 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 HyperText 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 catering growing need of internet. HTML had some limitations which was overcome 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.
Hide Copy Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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.
 |
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 HTML5 is different from previous versions?
HTML5 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 HTML5 doctype is quite simple.
Hide Copy Code
<!DOCTYPE html>
Now as per the w3.org “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.”
HTML5 New features
 |
Main idea behind New HTML5 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.
|
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 sidebar etc.
 |
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.
|  |
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.
|
 |
Now with HTML5 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.
| |
 |
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 HTML5 brought standard by introducing new attributes to “type” attribute of input elements.
Let’s look at some of them.
- Number
Hide Copy Code
<input type="number" name="MyNuberElement" id="MyNumberElement" />
- Range
Hide Copy Code
<input type="range" name="MyRangeElement" id="MyRangeElement"/>
- Color
Hide Copy Code
<input type="color" id="MyColorElement" name="MyColorElement" />
- Date
Hide Copy Code
<input type="date" id="MyDateElement" name="MyDateElement" />
- Time
Hide Copy Code
<input type="time" id="MyTimeElement" name="MyTimeElement"/>
- Datetime-local
Hide Copy Code
<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />
- DateTime (Also include time zone)
Hide Copy Code
<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>
- Month
Hide Copy Code
<input type="month" id="MyMonthElement" name="MyMonthElement" />
- Week
Hide Copy Code
<input type="week" id="MyWeekElement" name="MyWeekElement" />
Some useful attributes
- Autofocus
This attribute let us set initial focus on page load.
Hide Copy Code
… <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.
Hide Copy Code
<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl" name="MyPlaceHolderControl" />
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
Hide Copy Code
<datalist id="Hobbies"> <option>Reading books</option> <option>Watching movies</option> <option>Playing games</option> </datalist>
Step 2 – Create input control and bind the list
Hide Copy Code
<input type="text" name="TxtHobbies" value="" list="Hobbies" />
Step 3 –Execute and Test
Click here if you are interested in learning how to make datalist dynamic using Asp.net 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”.
Hide Copy Code
<div oninput= "document.getElementById(MyOutputElement).value = (document.getElementById('input1').valueAsNumber) + (document.getElementById('input2').valueAsNumber)"> <input id="input1" name="input1" type="number" value="1"> + <input id="input2" name="input2" type="number" value="2"> = <output id="MyOutputElement">3</output> </div>
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 HTML5 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
Hide Shrink 
Copy Code
Copy Code<form> <table> <tr> <td> <label>E-mail:</label> <input type="email" id="email" name="email" /> <label>URL:</label> <input type="url" id="url" name="url" /> <label>Telephone</label> <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" /> </td> <td> <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" /> </div> </td> </tr> </table> </form>
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
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
Hide Copy Code
<form> <label>Email</label> <input type="email" name="TxtEmail" id="TxtEmail" required /> <label>User Name</label> <input type="text" name="username" id="username" pattern="[a-zA-Z]{5,}" /> <label>Age</label> <input type="number" name="TxtAge" id="TxtAge" min="10" max="50" /> <br /><input type="submit" value="Register" /> </form>
Explanation:
- 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.
Output:
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.
Hide Shrink Copy Code
Copy Code<form> <label>Email</label> <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> <label>Age</label> <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" /> </form>
Step 2 – Add a style tag and create css to hide error messages initially
Hide Copy Code
<style>
.invalid {
display: none;
}
</style>
Step 3 – Hide error message on submit click.
Hide Copy Code
<input type="submit" value="Register" onclick="$('.invalid').hide();" />
Step 4 – Invoke functions when input controls contain invalid values.
Hide Copy Code
<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.
Hide Copy Code
function OnInvalidEmail() { event.preventDefault(); var element = event.srcElement; var validity = element.validity; if (validity.valueMissing) { $('.MissingEmailSpan').show(); } else if (validity.typeMismatch) { $('.InvalidEmailSpan').show(); } }
(Repeat above step for all input controls)
Explanation:
- 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
You can download the attached source code for complete demonstration.
Application Cache in HTML5
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.
8.Simple Application Cache Demo
Step 1 – Create a new Asp.net Web Forms application
Open visual studio and create a new empty asp.net 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
Hide Copy Code
.DivStyle {
background-color:silver;
}
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
Hide Copy Code
CACHE MANIFEST
# ver 1
CACHE:
/Styles/Style.css
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
Hide Shrink Copy Code
Copy Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %> <!DOCTYPE html> <html manifest="MyCache.txt"> <head runat="server"> <title></title> <link href="Styles/Style.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div class="DivStyle" id="MyDiv"> Hi, Execution count is 1 </div> </form> </body> </html>
Step 5 – Execute the application
Step 6 – Go offline
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.
Hide Copy Code
<div class="DivStyle" id="MyDiv"> Hi, Execution count is 2 </div>
Step 9 – Execute the applications
 |
It’s not a new output. It’s not refreshing.
|
Step 10 – Change the manifest file as follows
Hide Copy Code
CACHE MANIFEST
# ver 3
CACHE:
/Styles/Style.css
Step 11 – Refresh the page twice
Now you will get the updated output.
Explanation: Understanding step by step
- Very first line in the manifest line that is “CACHE MANIFEST” indicates that it’s a manifest file
- In the page “manifest” attribute of html indicates that “MyPage.aspx” need to be cached.
- 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.
- End user will get the latest contents during the first request and then they get cached. All the subsequent requests will get cached version.
- 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.
- 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
9.Solve the double refresh problem
For this simply add following code in your page.
Hide Copy Code
<script>
window.applicationCache.onupdateready = function (e) {
applicationCache.swapCache();
location.reload();
}
</script
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
- In the search box enter localhost and click delete icon
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 Asp.net Web Forms application
Open visual studio and create a new empty asp.net 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
Hide Copy Code
.Div1 {
background-color:silver;
}
- Right click the styles folder >> Add >> New Item. Select style sheet and name it style2.css
- Add following css block inside style2.css
Hide Copy Code
.Div3 {
background-color:silver;
}
- 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
Hide Copy Code
.Div3 {
background-color:silver;
}
- 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
Hide Copy Code
.Div3 {
background-color:lightbue;
}
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
Hide Copy Code
CACHE MANIFEST # ver 1 CACHE: /Styles/Style.css # Comment – Style.css will be cached with page NETWORK: /Styles/Style2.css # Comment – Style2.css will be available only online FALLBACK: 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
Hide Shrink Copy Code
Copy Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %> <!DOCTYPE html> <html manifest="MyCache.txt"> <head runat="server"> <title></title> <link href="Styles/Style.css" rel="stylesheet" /> <link href="Styles/Style2.css" rel="stylesheet" /> <link href="OnlineStyles/Style3.css" rel="stylesheet" /> <script> window.applicationCache.onupdateready = function (e) { applicationCache.swapCache(); location.reload(); } </script> </head> <body> <form id="form1" runat="server"> <div class="Div1" id="MyDiv1"> Hi, Execution count is 1 </div> <div class="Div2" id="MyDiv2"> Hi, Execution count is 1 </div> <div class="Div3" id="MyDiv3"> Hi, Execution count is 1 </div> </form> </body> </html>
Step 5 – Execute the application
Step 6 – Go offline
Step 7 – Refresh the page
As you can style2.css didn’t cached and style3.css is replaced with style4.css
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.
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.
Topics to be covered later in these Tute
- WebSockets
- Canvas
- SVG
- Media
- Drag and drop
- GeoLocation
- Web Storage
- Web Worker
- Server Sent events
- Web Sql
- IndexedDB