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 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:
Your Browser wont support this tag
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 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 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:
”>
m
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:
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:
Your Browser wont support this tag
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.
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 :
Email
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:
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:
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:
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:
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:
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:
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:
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
.Facebook.com" />
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:
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:
First name :
:
URL : E-mail
Employer :
Novalidate:
If this attribute is present then the form will not be validated when you click on submit button.
Example:
Name :
t type="submit"/>
E-mail : u
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.
No comments:
Post a Comment