HTML5
The next generation of HTML.
What is HTML5?
HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.
Some rules for HTML5 were established:
- New features should be based on HTML, CSS, DOM, and JavaScript
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
New Features
Some of the most interesting new features in HTML5:
- The canvas element for drawing
- The video and audio elements for media playback
- Better support for local offline storage
- New content specific elements, like article, footer, header, nav, section
- New form controls, like calendar, date, time, email, url, search
HTML5 New Elements
The internet has changed a lot since HTML 4.01 became a standard in 1999. Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.
HTML5 Video
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
- MP4 = MPEG 4 files with H264 video codec and AAC audio codec
- WebM = WebM files with VP8 video codec and Vorbis audio codec
- Ogg = Ogg files with Theora video codec and Vorbis audio codec
To show a video in HTML5, this is all you need:
CODE:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
</video>
Until now, there has never been a standard for playing audio on a web page. Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream.
Currently, there are 3 main formats for the audio element:Ogg, Mp3,Wmv.
To play an audio file in HTML5, this is all you need:
CODE:
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
HTML5 Canvas
The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
Create a Canvas Element
Add a canvas element to the HTML5 page.
Specify the id, width, and height of the element:
CODE:
Draw With JavaScript
The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:
CODE:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
HTML5 Web Storage
Let me start of by mentioning some of the limitations of Cookies.
The Limitations of Cookies
First, there were cookies. They have been a huge driving factor for the Web since the early days. In both a good and a bad way. For example, cookies allow us to login automatically to sites we use frequently, such as Gmail and Facebook. On the other hand, with cookies, our search and broesing history can be tracked and our privacy is a concern.
Another problem with cookies is that they have data-capacity limitations. The data storage limit of cookies in many web browsers is about 4 KB per cookie, based on a deprecated 1997 specification recommending a minimum of 4096 bytes per cookie. Although most browsers allow 30 to 50 cookies, so if you exceed the 4 KB limit of one cookie you could create another one, this is still a real limitation. This is why developers usually only store user and/or session identifiers in cookies, and then use server-side databases to store and get the rest of the user data.
Additionally, an often-overlooked side effect of cookies is that they are always sent with every HTTP request (usually even for images) resulting in more data being sent over the wire.
Moving Forward with Web Storage
Web Storage picks up where cookies left off. The strength of Web Storage is in at least two things.
First, ease of use for web developers: It has a simple API to get and set key/value pairs (we will get more into this below).
Secondly, the amount of space it provides: the specs default the disk space quota decision to the user agent (i.e. the web browser developers) and most of them offer no less than 5 or 10 MB to be stored per domain. This means we can store more than just basic user/session info on the client-side: user preference settings, localization data, temporary offline storage for batching server writes and much more.
The data being stored can be accessed using JavaScript, which gives you the ability to leverage client-side scripting to do many things that have traditionally involved server-side programming and relational databases.
Session Storage and Local Storage
It is important to know that there are two types of Web Storage objects: sessionStorage and localStorage.
sessionStorage is only available within the browser tab or window session. It’s designed to store data in a single web page session.
localStorage is kept even between browser sessions. This means data is still available when the browser is closed and reopened, and also instantly between tabs and windows.
Web Storage data is, in both cases, not available between different browsers. For example, storage objects created in Firefox cannot be accessed in Internet Explorer, exactly like cookies.
The following example counts the number of times a user has visited a page(LocalStorage):
CODE:
<script type="text/javascript">
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Input Type - email
The email type is used for input fields that should contain an e-mail address.
The value of the email field is automatically validated when the form is submitted.
CODE:
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
CODE:
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
CODE:
The range type is used for input fields that should contain a value from a range of numbers. The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
CODE:
HTML5 has several new input types for selecting date and time:
- date - Selects date, month and year
- month - Selects month and year
- week - Selects week and year
- time - Selects time (hour and minute)
- datetime - Selects time, date, month and year (UTC time)
- datetime-local - Selects time, date, month and year (local time)
The following example allows you to select a date from a calendar:
CODE:
The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.
Input Type - color
The color type is used for input fields that should contain a color.
The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:
CODE:
HTML5 has several new elements and attributes for forms.
This chapter covers the new form elements:
- <datalist>
- <keygen>
- <output>
<datalist> Element
The <datalist> element specifies a list of options for an input field.
The list is created with <option> elements inside the <datalist>.
To bind a <datalist> to an input field, let the list attribute of the input field refer to the id of the datalist:
CODE:
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public. The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
Currently, the browser support for this element is not good enough to be a useful security standard.
CODE:
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
The <output> element is used for different types of output, like calculations or script output:
CODE:
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
This chapter covers some of the new attributes for <form> and <input>.
New form attributes:
- autocomplete
- novalidate
New input attributes:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height and width
- list
- min, max and step
- multiple
- pattern (regexp)
- placeholder
- required
autocomplete Attribute
The autocomplete attribute specifies that the form or input field should have an autocomplete function.
When the user starts to type in an autocomplete field, the browser should display options to fill in the field:
CODE:
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
The autofocus attribute specifies that a field should automatically get focus when a page is loaded.
CODE:
The form attribute specifies one or more forms the input field belongs to.
The form attribute must refer to the id of the form it belongs to:
CODE:
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
The form override attributes allow you to override some of the attributes set for the form element.
The form override attributes are:
- formaction - Overrides the form action attribute
- formenctype - Overrides the form enctype attribute
- formmethod - Overrides the form method attribute
- formnovalidate - Overrides the form novalidate attribute
- formtarget - Overrides the form target attribute
height and width Attributes
The height and width attributes specifies the height and width of the image used for the input type image.
Note: The height and width attributes only works with <input> type: image.
CODE:
The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field.
CODE:
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
The min, max and step attributes are used to specify restrictions for input types containing numbers or dates.
The max attribute specifies the maximum value allowed for the input field.
The min attribute specifies the minimum value allowed for the input field.
The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).
CODE:
multiple Attribute
The multiple attribute specifies that multiple values can be selected for an input field.
Note: The multiple attribute works with the following <input> types: email, and file.
CODE:
novalidate Attribute
The novalidate attribute specifies that the form or input field should not be validated when submitted.
If this attribute is present the form will not validate form input.
CODE:
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern Attribute
The pattern attribute specifies a pattern used to validate an input field.
The example below shows a text field that can only contain three letters (no numbers or special characters):
CODE:
pattern="[A-z]{3}" title="Three letter country code" />
placeholder Attribute
The placeholder attribute provides a hint that describes the expected value of an input field.
The hint is displayed in the input field when it is empty, and disappears when the field gets focus:
CODE:
required Attribute
The required attribute specifies that an input field must be filled out before submitting.
CODE:
Drag And Drop
By default,all links, text nodes (or selections of), and image elements are draggable. This means that you don’t have to do anything to tell the browser they can be dragged around the page.
Our simple demo will have a drop zone and a couple of images that you can drag into the drop zone. And when you drop them,the image source will appear in the drop zone
Since there’s nothing to be done to the draggable images, you just need to hook up the drop zone, which requires the following event handlers:
Drag over: Tell the browser this is an element that accepts drop data.
On drop: Once something has been dropped on the element, do something with the dropped data.
CODE:
<script>
var drop = document.getElementById(‘drop’);
drop.ondrop = function (event) {
this.innerHTML += ‘<p>’ + event.dataTransfer. getData(‘Text’) + ‘</p>’;
return false;
};
drop.ondragover = function () { return false; };
</script>
Conclusion:
- Despite inconsistent browser implementations of its features, HTML5 is an exciting technology for creating new and powerful browser-based applications.
- Unlike previous versions, HTML5 promises better integration of multimedia and other applications inside the core of most Web pages.
- This Blog gives you an basic insight about HTML5 and how to use them.
- You can also look at my presentation on HTML5 Here
Thank You.
Kaushik Vinay T G
Rails Detectives