Introduction to HTML5.0
- HTML 5.0 will be the new standard for html, xhtml and DOM.
- HTML 5.0 was started by World Wide Consortium(W3C)
- and the web Hypertext Application Technology Working Group(WHATWG).
- HTML 5.0 reduces the need for external plugins(like Flash player).
- HTML5.0 provides better Error Handling. IT provides more mark upto replace scripting.
New features in HTML5.0
- The video and Audio elements for media playback
- The Canvas Element to draw graphic on a web page using javascript
- Session and Local Storage to store data at the client side
- New Structural elements like article, footer, header, nav , section…etc
- New Form elements and attributes
- Web Workers and Web Sockets
- Geo Location
- Offline application
DOCTYPE in html5.0
- The <!DOCTYPE HTML> declaration must be the very first thing in your HTMl 5 document, before the HTML tag.
- The doctype in HTML 4.0 required a reference to a DTD but HTML 5.0 does not require a reference to a DTD.
- There are 3 different doctypes In html 4.0 like strict, transitional and frameset
- In HTML5.0, there is only one DOCTYPE.
Browser Support for HTML5.0
- The latest browser support most of the features of HTML5.0
- We can refer to the website http://www.html5test.com to know the browser support for HTML5.0
- As per this website, chrome 12.0 scores 328 out of 450, Opera 11 scores 278 poins out of 400, safari 5.0 scores 212 out of 450..etc.
- IE 8 is pretty far behind and score 41 out of 450.
Media tags: Video and Audio
Video Tag
Video element is used for playing videos or movies.
HTML 5 video element is a standard way to include video.You can play the video without the help of external plug-ins like flash player.
The content between the opening and closing tag of video is fallback content.
The fallback content is displayed only by the browsers which don’t support video tag.
Syntax:
1 2 3 | <video src="myvideo.mp4" controls=“controls”> Your Browser wont support this tag </video> |
- Where src attribute is used to identify the media
- controls attribute is used to specify whether or not to display video controls.
Multiple Sources:
Not all browsers can support all types of video types, so video element allows you to list as many <source> elements as you like.
The browser iterates through the sources one by one until it finds one it can play.
Instead of using the src attribute in the video element , use one or more <source> elements before closing the video tag.
The type attribute in video gives the type of the media resource.
Type attribute will help the user agent determine if it can play this media resource before fetching it.
Example:
1 2 3 4 5 | <video controls=controls> <source src=“playVideo.mp4” type=“video/mp4”> <source src=“playVideo.ogv” type=“video/ogg”> <source src=“playVideo.webm” type=“video/webm”> </video> |
Codecs in video:
The type attribute can take additional parameter called codecs, to specify which version of codecs are needed to play the video.
Example:
1 2 3 4 | <video> <source src=“playVideo.ogg” type=‘video/ogg; codecs="theora, vorbis” ‘> <source src=“playVideo.ogv” type=‘video/ogg; codecs="theora, speex” ‘> </video> |
Video Attributes:
| Attributes | Value | Description |
|---|---|---|
| src | url | Specify the location of the video file |
| height | pixels | Sets the height of the video player |
| width | pixels | Sets the width of the video player |
| controls | Boolean- any value sets this to true | If present, then the browser will display the default media controls |
| loop | Boolean- any value sets this to true | If present, causes the media to loop indefinitely. Video will start playing again once it is finished. |
| poster | url of the image file | If present, image will be displayed until the first frame of the video is downloaded |
| autoplay | Boolean- any value sets this to true | If present ,then the video will play automatic |
| preload | none, metadata, auto | Specify whether the video should be preloaded or not. |
Note: preload attribute was formerly named autobuffer and the value was boolean
Audio Tag
Audio element is used for playing audio files.Audio element represents a audio or sound stream
HTML 5 audio element is a standard way to include audio
You can play the audio without the help of external plug-ins like flash player.
Content can be given between the opening and closing of the audio tag.
This content should not be shown by the user agents and is intended for the older browsers which do not support audio tag.
Syntax:
1 2 3 | <audio src=“myvideo.mp3” controls=“controls”> Your Browser wont support this tag </audio> |
- src attribute is used to identify the media
- controls attribute is used to specify whether or not to display audio controls.
Multiple Sources:
Audio tag also has sources attributes where you can give multiple sources.
The type attribute in video gives the type of the media resource.
Type attribute will help the user agent determine if it can play this media resource before fetching it.
1 2 3 4 | <audio> <source src=‘playAudio.ogg' type='audio/ogg; codecs=vorbis'> <source src=‘playAudio.spx' type='audio/ogg; codecs=speex'> </audio> |
Note: codecs –
The type attribute can take additional parameter called codecs, to specify which version of codecs are needed to play the audio.
| Attributes | Value | Description |
|---|---|---|
| src | url | Specify the location of the video file |
| controls | Boolean- any value sets this to true | If present, then the browser will display the default media controls |
| loop | Boolean- any value sets this to true | If present, causes the media to loop indefinitely. Video will start playing again once it is finished. |
| autoplay | Boolean- any value sets this to true | If present ,then the video will play automatically. |
| preload | None,metadata, auto | Specify whether the video should be preloaded or not. |
Note: preload attribute was formerly named autobuffer and the value was boolean.
Audio tag wont support the following tags:
- height
- width
- poster
New Form input types:
HTML 5 has introduced new input types which will help in input control and validations.
You can do the basic validations like to check the email , URL syntax..etc.
You can restrict the user to enter the valid inputs as per the requirements before the form is submitted.
If they are not supported by the browsers they will behave as a normal text fields.
The new input types introduced in HTML 5 are :
- url
- number
- range
- Date pickers (date, month, time, datetime, datetime-local )
- search
- color
Email:
The Email type is used with input type and should contain e-mail address.
This email input type lets you to collect a valid email address.
When the form is submitted , the value of the email field is automatically validated.
Syntax:
1 | <input type="email" name=“EmpMail”> |
Valid: abc@xyz.com
Invaid: 1bc, abc, abc@…etc
URL:
The url type is used with input type and should contain URL address.
This URL input type lets you to collect a valid URL from the user.
When the form is submitted , the value of the URL field is automatically validated.
Syntax:
1 | <input type="url" name=“myurl”> |
Valid: http://www.abc.com
Invaid: ww.abc.com, htp://www.abc.com…etc
Number:
The number type is used with input type and should contain numeric value.
This type will let you collect a number(either integer or floating point).
All known browser which support this number type use a spinner.
Syntax:
1 | <input type="number" > |
Valid : 100, 10.23 ..etc
Invaid: abc, a1,b100…etc
Number attributes:We can set some attributes on what numbers are accepted.   Attributes used with number to put some restriction are:
| Attributes | Value | Description |
|---|---|---|
| Max | Number | Specify the maximum value allowed |
| Min | Number | Specify the minimum value allowed |
| Step | Number | Legal number intervals (if step =2, legal no are -2, 0, 2, 4, 6, 8, etc) |
| Value | Number | Default value |
Range:
It is used with input type and should contain a value from a range of numbers.
This number type should let you collect a number(either integer or floating point).
All known browser which support this range type will display a slider.
Unless you use JavaScript , the exact value is not displayed to the user.
Syntax:
1 | <input type="range" > |
Range attributes: Some restriction can be set , on what numbers are accepted.Attributes of range are:
| Attributes | Value | Description |
|---|---|---|
| Max | Number | Specify the maximum value allowed |
| Min | Number | Specify the minimum value allowed |
| Step | Number | Legal number intervals (if step =2, legal no are -2, 0, 2, 4, 6, 8, etc) |
| Value | Number | Default value |
Date pickers
HTML 5 has several input types for selecting the date in different format depending on the requirement.
At Present different browser display the date pickers in different way.
For Ex: Opera uses a text field with a calendar that pops up when you click on the text field. Chrome uses something like a spinner but increments the yyyy-mm-dd , one day at a time.
Earlier we used JavaScript date picker.
Syntax:
1 | <input type="date" > |
The different types of input types for selecting date and time are:
| Input Types | Description |
|---|---|
| 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) |
Search:
Search input is used for search fields like Yahoo search, Google search or Site search.
We can define a textbox as search box instead of a normal text field so that it will behave as a search field.
If you use type=“search , a blue cross sign appears in the text box when you type something in the search box.
When you click on the cross sign, your text is cleared and you can type a new text.
Syntax:
1 | <input type="search" > |
Color:
Color input type is used for input fields that should contain a color.
If you use color type , it will allow you to pick a color from the color picker.
Earlier we used complex JavaScript color picker to pick a a color.
Textbox should carry string like #ff0000 for red , #000000 for black color and #ffffff for White color…etc
Syntax:
1 | <input type="color" > |
Form Elements
Datalist:
The datalist elements gives a list of options for an input field.
Datalist is like a dropdown list , but here the user can input anything in the textbox other then what is listed in the dropdown.
To bind a datalist to an input field, list attribute of the input field should refer to the id of the datalist.
The option elements should always have a value attribute.
Example
1 2 3 4 5 6 | <input type="url" list=“List_Url" name=“Website" /> <datalist id=" List_Url "> <option value="http://www.Facebook.com" /> <option value="http://www.Google.com" /> <option value="http://www.Yahoo.com" /> </datalist> |
Output:
Output element is used for different types of output , like calculations or script output
To display result of calculation on browser we use output tag.
Example:
1 2 | <output id=“calc” onforminput=“calresult()”> </output> |
Form Attributes
Autocomplete:
The Browser stores the forms input values if set to “on”. If this attribute us used in the form then it will be applicable to all the input types which come inside a form.We can also use the attribute with specific input type. If we don’t want autocomplete for a particular input type, we need to use the value “off”.
Example:
1 2 3 4 5 6 7 | <form action="Welcome.html" method="get" autocomplete="on"> First name : <input type="text" name="fname" /><br /> URL : <input type="url" name="web" /><br /> E-mail : <input type="email" name="email" /><br /> Employer : <input type="text" name="Employer" autocomplete="off" /> <br> <input type="submit" /> </form> |
Novalidate:
If this attribute is present then the form will not be validated when you click on submit button.
Example:
1 2 3 4 5 | <form action="customer.html" method="get" novalidate="true"> Name : <input type="text" name="name_user" /><br/><br/> E-mail : <input type="email" name="user_email"/> <input type="submit"/> </form> |
Note: Most of the tags work with latest version of Opera, Chrome, Firefox and IE 9.
Conclusion
In this article we saw some new features of HTML 5.0 which is supported by most of the latest browsers.
Flex 4.x – Overview