HTML 5.0 Features

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:

AttributesValueDescription
srcurlSpecify the location of the video file
heightpixelsSets the height of the video player
widthpixelsSets the width of the video player
controlsBoolean- any value sets this to trueIf present, then the browser will display the default media controls
loopBoolean- any value sets this to trueIf present, causes the media to loop indefinitely. Video will start playing again once it is finished.
posterurl of the image fileIf present, image will be displayed until the first frame of the video is downloaded
autoplayBoolean- any value sets this to trueIf present ,then the video will play automatic
preloadnone, metadata, autoSpecify 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.

AttributesValueDescription
srcurlSpecify the location of the video file
controlsBoolean- any value sets this to trueIf present, then the browser will display the default media controls
loopBoolean- any value sets this to trueIf present, causes the media to loop indefinitely. Video will start playing again once it is finished.
autoplayBoolean- any value sets this to trueIf present ,then the video will play automatically.
preloadNone,metadata, autoSpecify 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:

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.&nbsp&nbsp&nbspAttributes used with number to put some restriction are:

AttributesValueDescription
MaxNumberSpecify the maximum value allowed
MinNumberSpecify the minimum value allowed
StepNumberLegal number intervals (if step =2, legal no are -2, 0, 2, 4, 6, 8, etc)
ValueNumberDefault 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:

AttributesValueDescription
MaxNumberSpecify the maximum value allowed
MinNumberSpecify the minimum value allowed
StepNumberLegal number intervals (if step =2, legal no are -2, 0, 2, 4, 6, 8, etc)
ValueNumberDefault 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 TypesDescription
dateSelects date, month and year
monthSelects month and year
weekSelects week and year
TimeSelects time (hour and minute)
datetimeSelects time, date, month and year(UTC time)
datetime-localSelects 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.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*