1.What's new HTML 5 DocType and Charset?
Normally for HTML files first line of code is DocType which basically tells browser about specific version of HTML. HTML5 is now not subset of SGML. As compared to previous version/standards of HTML, DocType is simplified as follows:
<!doctype html>
And HTML 5 uses UTF-8 encoding as follows:
<meta charset=”UTF-8″>
2. How can we embed Audio in HTML5?
HTML 5 comes with a standard way of embedding audio files as previously we don̵#8217;t have any such support on a web page. Supported audio formats are as follows:
<audio controls>
<source src=”jamshed.mp3″ type=”audio/mpeg”>
Your browser does’nt support audio embedding feature.
</audio>
In above code, src value can be relative as well as absolute URL. We can also use multiple <source> elements pointing to different audio files. There are more new attributes for <audio> tag other than src as below:
3.How can we embed Video in HTML 5?
Same like audio, HTML 5 defined standard way of embedding video files which was not supported in previous versions/standards. Supported video formats are as follows:
<video width=”450″ height=”340″ controls>
<source src=”Racing.mp4″ type=”video/mp4″>
Your browser does’nt support video embedding feature.
</video>
Same like <audio>, <video> tag has associated optional attributes as controls, autoplay, preload, loop, poster, width, height and other global attributes etc. Controls, loop, preload and autoplay are already explained above. Others are explained below:
HTML 5 has strong support for media. Other than audio and video tags, it comes with the following tags:
<embed> Tag: <embed> acts as a container for external application or some interactive content such as a plug-in. Special about <embed> is that it doesn’t have a closing tag as we can see below:
<embed type=”video/quicktime” src=”Fishing.mov”>
<source> Tag: <source> is helpful for multiple media sources for audio and video.
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
<source src=”jamshed.ogg” type=”video/ogg”>
</video>
<track> Tag: <track> defines text track for media like subtitles as:
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
<source src=”jamshed.ogg” type=”video/ogg”>
<track kind=”subtitles” label=”English” src=”jamshed_en.vtt” srclang=”en” default></track>
<track kind=”subtitles” label=”Arabic” src=”jamshed_ar.vtt” srclang=”ar”></track>
</video>
5.What is the usage of canvas Element in HTML 5?
<canvas> is an element in HTML5 which we can use to draw graphics with the help of scripting (which is most probably JavaScript).
This element behaves like a container for graphics and rest of things will be done by scripting. We can draw images, graphs and a bit of animations etc using <canvas> element.
<canvas id=”canvas1″ width=”300″ height=”100″>
</canvas>
As canvas is considered to be the most exciting feature in HTML5, following resources can be helpful to ehnance one’s skill in this area. I have listed few good websites on HTML5 canvas as well as available tools and libraries:
6.What are the different types of storage in HTML 5?
HTML 5 has the capability to store data locally. Previously it was done with the help of cookies.
Exciting thing about this storage is that its fast as well as secure.
There are two different objects which can be used to store data.
localStorage object stores data for a longer period of time even if the browser is closed.
sessionStorage object stores data for a specific session.
Working with localStorage is quite simple and having following methods:
There are a number of new form elements has been introduced in HTML 5 as follows:
Elements that are deprecated from HTML 4 to HTML 5 are:
HTML 5 standard comes with a number of new APIs. Few of it are as follows:
One of the key feature of HTML 5 is “Application Cache” that enables us to make an offline version of a web application. It allows to fetch few or all of website contents such as HTML files, CSS, images, javascript etc locally. This feature speeds up the site performance. This is achieved with the help of a manifest file defined as follows:
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>
As compared with traditional browser caching, Its not compulsory for the user to visit website
Normally for HTML files first line of code is DocType which basically tells browser about specific version of HTML. HTML5 is now not subset of SGML. As compared to previous version/standards of HTML, DocType is simplified as follows:
<!doctype html>
And HTML 5 uses UTF-8 encoding as follows:
<meta charset=”UTF-8″>
2. How can we embed Audio in HTML5?
HTML 5 comes with a standard way of embedding audio files as previously we don̵#8217;t have any such support on a web page. Supported audio formats are as follows:
- MP3
- Wav
- Ogg.
<audio controls>
<source src=”jamshed.mp3″ type=”audio/mpeg”>
Your browser does’nt support audio embedding feature.
</audio>
In above code, src value can be relative as well as absolute URL. We can also use multiple <source> elements pointing to different audio files. There are more new attributes for <audio> tag other than src as below:
- controls – it adds controls such as volume, play and pause.
- autoplay – it’s a boolean value which specifies that audio will start playing once it’s ready.
- loop – it’s also a boolean value which specifies looping (means it automatically start playing after it ends).
- preload – auto, metadata and none are the possible values for this attribute.
- auto means plays as it loaded.
- metadata displays audio file’s associated data
- none means not pre-loaded.
 |
| HTML5 Interview Advanced Level Questions And Answers |
Same like audio, HTML 5 defined standard way of embedding video files which was not supported in previous versions/standards. Supported video formats are as follows:
- MP4
- WebM
- Ogg
<video width=”450″ height=”340″ controls>
<source src=”Racing.mp4″ type=”video/mp4″>
Your browser does’nt support video embedding feature.
</video>
Same like <audio>, <video> tag has associated optional attributes as controls, autoplay, preload, loop, poster, width, height and other global attributes etc. Controls, loop, preload and autoplay are already explained above. Others are explained below:
- poster – it’s basically a URL of the image that needs to display until video get started.
- width – video player width
- height – video player’s height
HTML 5 has strong support for media. Other than audio and video tags, it comes with the following tags:
<embed> Tag: <embed> acts as a container for external application or some interactive content such as a plug-in. Special about <embed> is that it doesn’t have a closing tag as we can see below:
<embed type=”video/quicktime” src=”Fishing.mov”>
<source> Tag: <source> is helpful for multiple media sources for audio and video.
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
<source src=”jamshed.ogg” type=”video/ogg”>
</video>
<track> Tag: <track> defines text track for media like subtitles as:
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
<source src=”jamshed.ogg” type=”video/ogg”>
<track kind=”subtitles” label=”English” src=”jamshed_en.vtt” srclang=”en” default></track>
<track kind=”subtitles” label=”Arabic” src=”jamshed_ar.vtt” srclang=”ar”></track>
</video>
5.What is the usage of canvas Element in HTML 5?
<canvas> is an element in HTML5 which we can use to draw graphics with the help of scripting (which is most probably JavaScript).
This element behaves like a container for graphics and rest of things will be done by scripting. We can draw images, graphs and a bit of animations etc using <canvas> element.
<canvas id=”canvas1″ width=”300″ height=”100″>
</canvas>
As canvas is considered to be the most exciting feature in HTML5, following resources can be helpful to ehnance one’s skill in this area. I have listed few good websites on HTML5 canvas as well as available tools and libraries:
- Canvas From Scratch
- Introduction to Canvas in HTML5
- Understanding advanced Drawing Topics
- Tranformation, Shadows and Gradients in HTML5 Canvas
- and finally Pixel Manipulation in Canvas
- Mozilla Developer Network – MDN
- HTML5 Canvas Tutorial
- PlayCanvas
6.What are the different types of storage in HTML 5?
HTML 5 has the capability to store data locally. Previously it was done with the help of cookies.
Exciting thing about this storage is that its fast as well as secure.
There are two different objects which can be used to store data.
localStorage object stores data for a longer period of time even if the browser is closed.
sessionStorage object stores data for a specific session.
sessionStorage |
localStorage |
| It persists data until we close the window or tab in which it was stored. | It persist data even if the window or tab is closed (but can be explicitly removed or expires). |
| Values stored in sessionStorage are not shared. These will be visible only to respective window or tab. | Values stored in localStorage are shared for all windows and tabs from same origin. |
| Maximum size is 5MB. | Maximum size for localStorage is more between 10-15MB. |
Working with localStorage is quite simple and having following methods:
- localStorage.getItem(key) -> fetch an item from storage against provided key.
- localStorage.setItem(key, value) -> add an item to storage.
- localStorage.removeItem(key) -> removes an item from storage against provided key.
- localStorage.clear() -> clearing the storage removing all items from it.
There are a number of new form elements has been introduced in HTML 5 as follows:
- datalist provides functionality for auto-complete feature.
- datetime facilitate selecting a datetime along with Time Zone.
- output represents the result of a calculation.
- keygen generates a key-pair field in a form to implement secure authentication.
- date is an input field for date and applies validation accordingly.
- month for selecting a month and year in a form input field.
- week for selecting a week and year in an input field.
- time is an input field for selecting time i.e. Hours:Minutes: AM/PM. For example, 10:30 AM.
- color is an input field for color.
- number that only allows numeric values.
- range is an input field for selecting value within a specified range.
- email is input field for email with standard email validations.
- url is for an URL(Uniform Resource Locator) and validated accordingly.
Elements that are deprecated from HTML 4 to HTML 5 are:
- frame
- frameset
- noframe
- applet
- big
- center
- basefront
HTML 5 standard comes with a number of new APIs. Few of it are as follows:
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
One of the key feature of HTML 5 is “Application Cache” that enables us to make an offline version of a web application. It allows to fetch few or all of website contents such as HTML files, CSS, images, javascript etc locally. This feature speeds up the site performance. This is achieved with the help of a manifest file defined as follows:
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>
As compared with traditional browser caching, Its not compulsory for the user to visit website
contents to be cached.
Read More:
Read More:
- What are the Difference Between HTML And HTMl5 Tags Elements
- HTML5 Interview Advanced Level Questions And Answers
- What are the differences between HTML and HTML5? Which is better?