What is HTML5?
Ans : HTML5 is The New HTML Standard with new elements, attributes, and behaviors.
----------------------------------------------------------------------------------------------
HTML 5 Features:
Ans :
Ans : HTML5 is The New HTML Standard with new elements, attributes, and behaviors.
----------------------------------------------------------------------------------------------
HTML 5 Features:
Ans :
- The <canvas> element for 2D drawing
- The <video> and <audio> elements for media playback
- local storage support.
- Added New elements, like <figure>,<small>, <header>, <nav>,<article>, <footer>, <section>,<mark>
- New form controls, like placeholder,calendar, date, time, email, url, search,required ,autofocus
- In HTML5 there is only one <!doctype> declaration: <!DOCTYPE html>
----------------------------------------------------------------------------------------------
What is HTML5 Web Storage?
Ans : In HTML5, we can store data locally within the user's browser.It is possible to store large amounts of data without affecting the website’s performance.
Web Storage is more secure and faster.
there are two types of Web Storages
1.LocalStorage:stores data locally with no limit
2.SessionStorage:stores data for one session
----------------------------------------------------------------------------------------------
How to store data on client in HTML5?
Ans : we can store data using HTML5 Web Storage.
1.LocalStorage
<script type="text/javascript">
localStorage.name="Raj";
document.write(localStorage.name);
</script>
2.SessionStorage
<script type="text/javascript">
sessionStorage.email="test@gmail.com";
document.write(sessionStorage.email);
</script>
----------------------------------------------------------------------------------------------
How do you play a Video using HTML5?
Ans : HTML5 defines a new element to embed a video on Web Page
the <video> element.
Example:
<video width="500" height="300" controls>
<source src="video1.mp4" type="video/mp4">
</video>
----------------------------------------------------------------------------------------------
How do you play a Audio using HTML5?
Ans : HTML5 defines a new element to embed a video on Web Page
the <audio> element.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
----------------------------------------------------------------------------------------------
Canvas Element in HTML5?
Ans : The canvas element is used to draw graphics images on a web page
<canvas id="canvas_image" width="400" height="200"></canvas>
The canvas is a two-dimensional grid.
----------------------------------------------------------------------------------------------
HTML5 <input> Types ?
Ans :
What is HTML5 Web Storage?
Ans : In HTML5, we can store data locally within the user's browser.It is possible to store large amounts of data without affecting the website’s performance.
Web Storage is more secure and faster.
there are two types of Web Storages
1.LocalStorage:stores data locally with no limit
2.SessionStorage:stores data for one session
----------------------------------------------------------------------------------------------
How to store data on client in HTML5?
Ans : we can store data using HTML5 Web Storage.
1.LocalStorage
<script type="text/javascript">
localStorage.name="Raj";
document.write(localStorage.name);
</script>
2.SessionStorage
<script type="text/javascript">
sessionStorage.email="test@gmail.com";
document.write(sessionStorage.email);
</script>
----------------------------------------------------------------------------------------------
How do you play a Video using HTML5?
Ans : HTML5 defines a new element to embed a video on Web Page
the <video> element.
Example:
<video width="500" height="300" controls>
<source src="video1.mp4" type="video/mp4">
</video>
----------------------------------------------------------------------------------------------
How do you play a Audio using HTML5?
Ans : HTML5 defines a new element to embed a video on Web Page
the <audio> element.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
----------------------------------------------------------------------------------------------
Canvas Element in HTML5?
Ans : The canvas element is used to draw graphics images on a web page
<canvas id="canvas_image" width="400" height="200"></canvas>
The canvas is a two-dimensional grid.
----------------------------------------------------------------------------------------------
HTML5 <input> Types ?
Ans :
- search
- tel
- time
- color
- month
- date
- datetime
- datetime-local
- number
- range
- url
- week
----------------------------------------------------------------------------------------------
HTML5 New Form Attributes?
Ans :
- pattern
- placeholder
- required
- step
- autocomplete
- autofocus
- height and width
- list
- min and max
- multiple
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
----------------------------------------------------------------------------------------------
What does a <hgroup> tag do?
Ans : The <hgroup> tag is used to group heading elements.
The <hgroup> element is used to group a set of <h1> to <h6> elements.
<hgroup>
<h1>Hello</h1>
<h2>How r u?</h2>
</hgroup>
----------------------------------------------------------------------------------------------
Which video formats are used for the video element?
Ans :
Internet Explorer 9+: MP4
Chrome 6+: MP4, WebM, Ogg
Firefox 3.6+ : WebM, Ogg
Safari 5+ : MP4,
Opera 10.6+ : WebM,Ogg
----------------------------------------------------------------------------------------------
Difference between HTML4 and HTML5
----------------------------------------------------------------------------------------------
What is the <!DOCTYPE> ? Is it necessary to use in HTML5 ?
Ans : The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag
----------------------------------------------------------------------------------------------
What are the New Media Elements in HTML5?
Ans :
What does a <hgroup> tag do?
Ans : The <hgroup> tag is used to group heading elements.
The <hgroup> element is used to group a set of <h1> to <h6> elements.
<hgroup>
<h1>Hello</h1>
<h2>How r u?</h2>
</hgroup>
----------------------------------------------------------------------------------------------
Which video formats are used for the video element?
Ans :
Internet Explorer 9+: MP4
Chrome 6+: MP4, WebM, Ogg
Firefox 3.6+ : WebM, Ogg
Safari 5+ : MP4,
Opera 10.6+ : WebM,Ogg
----------------------------------------------------------------------------------------------
Difference between HTML4 and HTML5
----------------------------------------------------------------------------------------------
What is the <!DOCTYPE> ? Is it necessary to use in HTML5 ?
Ans : The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag
----------------------------------------------------------------------------------------------
What are the New Media Elements in HTML5?
Ans :
- <audio>
- <video>
- <source>
- <embed>
- <track>
HTML5 advanced interview questions and
answers
What are the rules established for HTML5?
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 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
WHAT IS THE DIFFERENCE BETWEEN HTML5
APPLICATION CACHE AND REGULATE HTML BROWSER CACHE?
The new HTML5 specification allows browsers to prefetch
some or all of a website assets such as HTML files, images, CSS, JavaScript,
and so on, while the client is connected. It is not necessary for the user to
have accessed this content previously, for fetching this content. In other
words, application cache can prefetch pages that have not been visited at all
and are thereby unavailable in the regular browser cache. Prefetching files can
speed up the sites performance, though you are of course using bandwidth to
download those files initially.
Explain the difference between HTML and
HTML5?
HTML5 is nothing more then upgraded version of HTML where
in HTML5 Lot of new future like Video, Audio/mp3, date select function , placeholder
, Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do
external plugin like Flash player or other library.
What are the new APIs provided by the
HTML 5 standard? Give a brief description of each
• The canvas element: Canvas consists of a drawable region
defined in HTML code with height and width attributes. JavaScript code may
access the area through a full set of drawing functions similar to other common
2D APIs, thus allowing for dynamically generated graphics. Some anticipated
uses of the canvas include building graphs, animations, games, and image
composition.
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration
WHAT ARE THE DIFFERENT TYPES OF STORAGE
IN HTML5?
HTML5 offers two new objects for storing data on the
client:
LocalStorage – stores data with no time limit
• <script type=“text/javascript”>
• localStorage.lastname=“ZAG”;
• document.write(localStorage.lastname);
• </script>
SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.
• <script type=“text/javascript”>
• sessionStorage.lastname=“ZAG”;
• document.write(sessionStorage.lastname);
• </script>
LocalStorage – stores data with no time limit
• <script type=“text/javascript”>
• localStorage.lastname=“ZAG”;
• document.write(localStorage.lastname);
• </script>
SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.
• <script type=“text/javascript”>
• sessionStorage.lastname=“ZAG”;
• document.write(sessionStorage.lastname);
• </script>
WHAT ARE THE NEW APIS PROVIDED BY THE
HTML 5 STANDARD? GIVE A BRIEF DESCRIPTION OF EACH?
The canvas element: Canvas consists of a drawable region
defined in HTML code with height and width attributes. JavaScript code may
access the area through a full set of drawing functions similar to other common
2D APIs, thus allowing for dynamically generated graphics. Some anticipated
uses of the canvas include building graphs, animations, games, and image
composition.
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration
WHAT OTHER ADVANTAGES DOES HTML5 HAVE?
a) Cleaner markup
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
GIVE AN EXAMPLE OF NEW ELEMENTS IN
HTML5 TO SUPPORT MULTIMEDIA AND GRAPHICS?
HTML5 introduced many elements such as , instead of to
support multimedia.
What is HTML5 Geolocation?
HTML5 Geolocation is used to locate a user’s position
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
HTML5 – Using Geolocation
Use the getCurrentPosition() method to get the user’s
position.
The example below is a simple Geolocation example returning the latitude and longitude of the user’s position:
Example
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“
Longitude: ” + position.coords.longitude;
}
</script>
The example below is a simple Geolocation example returning the latitude and longitude of the user’s position:
Example
<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“
Longitude: ” + position.coords.longitude;
}
</script>
What’s so different about HTML5?
There are a couple of great new approaches that are taking
place in the HTML5 description.
1. The Rise of WebApps
2. More descriptive semantics
3. Richer Media Elements
1. The Rise of WebApps
2. More descriptive semantics
3. Richer Media Elements
The Rise of WebApps
First, the language is being built around WebApps…small focused applications that can run on a browser or as a mobile application. The new version of HTML has features like offline storage or the ability to handle data even when the app is no longer connected to the internet, geo-location or the ability to detect and work with the location of the user as well as excellent rich media support…providing easy to implement audio and video elements.
First, the language is being built around WebApps…small focused applications that can run on a browser or as a mobile application. The new version of HTML has features like offline storage or the ability to handle data even when the app is no longer connected to the internet, geo-location or the ability to detect and work with the location of the user as well as excellent rich media support…providing easy to implement audio and video elements.
More descriptive semantics
The original goal of HTML was to develop a language that could describe the structure of a document. As the web grew, developers realized that oftentimes they were describing the same types of elements. For example…a header, a footer, nav, articles, sections, etc. HTML5 recognizes where the language has developed and incorporates those elements into the language with new tags for that type of content.
The original goal of HTML was to develop a language that could describe the structure of a document. As the web grew, developers realized that oftentimes they were describing the same types of elements. For example…a header, a footer, nav, articles, sections, etc. HTML5 recognizes where the language has developed and incorporates those elements into the language with new tags for that type of content.
Richer Media Elements
One of the great new improvments in HTML5 is the development of rich media tags like audio and video. Fully programmable with JavaScript, these tags offer incredible ease of use while also offering powerful flexibility through extensive access to media elements through programming
One of the great new improvments in HTML5 is the development of rich media tags like audio and video. Fully programmable with JavaScript, these tags offer incredible ease of use while also offering powerful flexibility through extensive access to media elements through programming
Why not HTML5?
I wish we could all be using HTML5 today, but the reality
is that there are a few problems that prevent the language from use in modern
websites.
1. Browser Support
2. The Language is a Spec
3. Media Licensing Issues
1. Browser Support
2. The Language is a Spec
3. Media Licensing Issues
Browser Support
The main problem with HTML5′s acceptance is that only modern browsers support it. By modern, I mean almost everything except for Internet Explorer. The new version…IE9 offers excellent support, but as of this writing it’s not quite out of beta. Even if it were, the majority of people will still use older versions of IE for quite some time. There are things you can do to make the language play nice with older browsers, but none of them are perfect.
The main problem with HTML5′s acceptance is that only modern browsers support it. By modern, I mean almost everything except for Internet Explorer. The new version…IE9 offers excellent support, but as of this writing it’s not quite out of beta. Even if it were, the majority of people will still use older versions of IE for quite some time. There are things you can do to make the language play nice with older browsers, but none of them are perfect.
The Language is a Spec
Another problem is that although parts of the language are very stable, the language itself is considered a work in progress, so technically, any of the elements could change at any time. The language is not expected to be completed for several years, which complicates things further. Thankfully, a lot of the language is considered stable and ready to use. I think it’s such a great move forward, that you should develop a Graceful Degradation approach to writing your HTML. That simply means writing HTML that will work with older browsers, but will offer users with more modern browsers an enhanced experience.
Another problem is that although parts of the language are very stable, the language itself is considered a work in progress, so technically, any of the elements could change at any time. The language is not expected to be completed for several years, which complicates things further. Thankfully, a lot of the language is considered stable and ready to use. I think it’s such a great move forward, that you should develop a Graceful Degradation approach to writing your HTML. That simply means writing HTML that will work with older browsers, but will offer users with more modern browsers an enhanced experience.
Media Licensing Issues
Another ugly fact about HTML5 is that because of licensing issues, rich media has to be compressed in multiple formats in order to be compatible with most browsers. So you’ll probably use something like mp3 audio for webkit browsers (safari, chrome), and ogg for mozilla (firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be resolved soon.
Another ugly fact about HTML5 is that because of licensing issues, rich media has to be compressed in multiple formats in order to be compatible with most browsers. So you’ll probably use something like mp3 audio for webkit browsers (safari, chrome), and ogg for mozilla (firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be resolved soon.
List out the advantages of HTML5?
The top 5 from some web research would appear to offer the
following HTML5 features;
1. Mutuality
2. Cleaner mark-up / Improved Code
3. Improved Semantics
4. Elegant forms and web apps
5. Offline Application cache
1. Mutuality
2. Cleaner mark-up / Improved Code
3. Improved Semantics
4. Elegant forms and web apps
5. Offline Application cache
List out the new tags with example in
HTML5?
To convert your PSD into HTML5 first you need to know about
the basic structure, the basic
structure include tags and HTML5 introduces a whole set of new elements that make it much easier to structure pages. Here you get knowledge of main six tags used in HTML5.
1. Header Tag
<header>
<h1>Header in HTML5</h1>
<p>By HTLM5Arena</p>
</header>
structure include tags and HTML5 introduces a whole set of new elements that make it much easier to structure pages. Here you get knowledge of main six tags used in HTML5.
1. Header Tag
<header>
<h1>Header in HTML5</h1>
<p>By HTLM5Arena</p>
</header>
This way you can use header tag. The header element
represents the header of a section.
Which contain logo, top navigation, search section etc. So the div id=”header” is replaced by
<header> tag.
2. Nav Tag
Here it is same like div id=”navigation”, changed and introduced as <nav> the navigation
pages will come here in this tag. Which include ul and li of different properties. See the use
of <nav> in below example.
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/products”>Products</a></li>
<li><a href=”/services”>Services</a></li>
<li><a href=”/about”>About</a></li>
</ul>
</nav>
Which contain logo, top navigation, search section etc. So the div id=”header” is replaced by
<header> tag.
2. Nav Tag
Here it is same like div id=”navigation”, changed and introduced as <nav> the navigation
pages will come here in this tag. Which include ul and li of different properties. See the use
of <nav> in below example.
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/products”>Products</a></li>
<li><a href=”/services”>Services</a></li>
<li><a href=”/about”>About</a></li>
</ul>
</nav>
3. Article Tag
The article element represents an independent section of a document, page or site. Mainly use for content like news articles, blog articles, forum posts, individual comments etc. Same like div
you can give id to article tag.
<article id=”article_01″>
<header>
<h4><a>Comment #1</a>
by <a href=”http://HTML5Arena.com/”>HTML5Arena Team</a></h4>
<p><time date>15 April, 2011at 24:20</time>
</header>
<p>Very helpful article is here!</p>
</article>
The article element represents an independent section of a document, page or site. Mainly use for content like news articles, blog articles, forum posts, individual comments etc. Same like div
you can give id to article tag.
<article id=”article_01″>
<header>
<h4><a>Comment #1</a>
by <a href=”http://HTML5Arena.com/”>HTML5Arena Team</a></h4>
<p><time date>15 April, 2011at 24:20</time>
</header>
<p>Very helpful article is here!</p>
</article>
4. Section Tag
<section>
<h1>Any level of heading</h1>
rest of the content
</section>
Generally people think <section> is used to wrap the content but it is wrong.
The section element represents a generic document or application section…
For content wrap we can use div.
5. Aside Tag
The aside element is generally used for marking up sidebars and content that is tangentially related to the content around it. Below is the example of aside tag.
<aside>
<h1>Archives</h1>
<ul>
<li><a>March 2011</a></li>
<li><a>April 2011</a></li>
</ul>
</aside>
6. Footer Tag
The footer element represents the footer for the section it applies to. Footer typically contains information about its section such as writer name, links of its useful documents, copyright data.
<footer>© 2011 All rights reserved.</footer>
<section>
<h1>Any level of heading</h1>
rest of the content
</section>
Generally people think <section> is used to wrap the content but it is wrong.
The section element represents a generic document or application section…
For content wrap we can use div.
5. Aside Tag
The aside element is generally used for marking up sidebars and content that is tangentially related to the content around it. Below is the example of aside tag.
<aside>
<h1>Archives</h1>
<ul>
<li><a>March 2011</a></li>
<li><a>April 2011</a></li>
</ul>
</aside>
6. Footer Tag
The footer element represents the footer for the section it applies to. Footer typically contains information about its section such as writer name, links of its useful documents, copyright data.
<footer>© 2011 All rights reserved.</footer>
What is Canvas?
Canvas is a element of HTML5 which uses JavaScript to draw
graphics on a web page. A canvas is a rectangular area. Each and every pixel of
it can be controlled by us. There are several methods for drawing paths, boxes,
circles, characters, and adding images by using canvas.
How to write Canvas?
To add canvas tag to our HTML document we need id, width
and height. Below is the example how to write a basic canvas tag to your HTML
document.
<canvas id=”myFirstCanvas” width=”100″ height=”100″></canvas>
<canvas id=”myFirstCanvas” width=”100″ height=”100″></canvas>
How canvas work with Javascript?
Canvas element can not draw anything, the drawing is done
in Javascript only. The Javascript use the id to reach the particular canvas.
The below is the small example which shows how Javascript work with canvas.
<!DOCTYPE HTML>
<html>
<body>
<!DOCTYPE HTML>
<html>
<body>
<canvas id=”myFirstCanvas” width=”100″ height=”100″
style=”border:2px solid #000000;”>
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myFirstCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FFF000″;
cxt.fillRect(0,0,100,125);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FFF000″;
cxt.fillRect(0,0,100,125);
</script>
The fillStyle method makes it yellow, and the fillRect method specifies the shape, position, and size.
Coordinates – X and Y
The fillStyle method makes it yellow, and the fillRect method specifies the shape, position, and size.
Coordinates – X and Y
The fillRect method above had the parameters (0,0,100,125).
This means: Draw a 100×125 rectangle on the canvas, starting at the top left
corner (0,0). The canvas’ X and Y coordinates decide the position of drawings
on the canvas.
Good Examples of canvas to start learning
Example 1:
Good Examples of canvas to start learning
Example 1:
<!DOCTYPE HTML>
<html>
<body>
<html>
<body>
<canvas id=”myFirstCanvas” width=”200″ height=”100″
style=”border:1px solid #999999;”>
</canvas>
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myFirstCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#000000″;
cxt.beginPath();
cxt.arc(50,18,18,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#000000″;
cxt.beginPath();
cxt.arc(50,18,18,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
Example 2:
</html>
Example 2:
<html>
<body>
<body>
<canvas id=”myFirstCanvas” width=”300″ height=”150″
style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>
Your browser does not support the canvas element.
</canvas>
<script type=”text/javascript”>
var c=document.getElementById(“myFirstCanvas”);
var cxt=c.getContext(“2d”);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#FF0000″);
grd.addColorStop(1,”#FFF000″);
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,100);
var cxt=c.getContext(“2d”);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#FF0000″);
grd.addColorStop(1,”#FFF000″);
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,100);
</script>
</body>
</html>
</html>
Does HTML5 support all browsers?
- Yes
- No
Ans: b. No
Does Multiple File Upload option
available in HTML5?
- Yes
- No
Ans: b. Yes
Does Canvas in HTML 5.0 belong to?
- List Element
- Element
- Styling attribute
- None of the above
Ans: b. Element
SVG Means
- Scalable Vector Graphics
- Scalable Vector Graph
- Scaled Vector Graphics
- None of the above
Ans: a. Scalable Vector Graphics
What is the rendering engine of
Firefox?
- Prince
- Gecko
- Mozilla
- None of the above
Ans: b. Gecko
HTML 5.0 is a equal to _________.
- XHTML 1.0
- HTML 4.0
- XHTML 1.1
- None of the above
Ans: b. HTML 4.0
Transformations are applied in HTML 5
by using ________
- transform
- canvas
- change
- None of the above
Ans: b. canvas
Does HTML5 support full CSS3?
- Yes
- No
Ans: a. Yes
Does HTML5 provide local SQL Database?
- Yes
- No
Ans: a. Yes
Does HTML5 provide email validation?
- Yes
- No
Ans: a. Yes
What is SSE in HTML5?
- Scalable Streaming Events
- Server-Sent Events
- Simple Sharing Extension
What are the web storages are available
in HTML5?
- sessionStorage and pageStorage
- localStorage and sessionStorage
- localStorage and pageStorage
- dataStorage and sessionStorage
Does HTML5 allow users to edit the
content on web page?
- Yes
- No
Does HTML5 support onreset function?
- Yes
- No
Q 1- What is the difference between HTML and HTML5 ?
Ans: HTML5 is nothing more then upgraded version of HTML where in HTML5 Lot of new future like Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other libraryQ 2- What is the <!DOCTYPE> ? Is it necessary to use in HTML5 ?
Ans: The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. AND The <!DOCTYPE> tag does not have an end tag and It is not case sensitive.The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).
Q 3- How many New Markup Elements you know in HTML5
Ans: Below are the New Markup Elements added in HTML5|
Tag
|
Description
|
|
<article>
|
Specifies independent, self-contained content, could be a
news-article, blog post, forum post,
or other articles which can be distributed independently from the rest of the site. |
|
<aside>
|
For content aside from the content it is placed in. The
aside content should
be related to the surrounding content |
|
<bdi>
|
For text that should not be bound to the text-direction of
its parent elements
|
|
<command>
|
A button, or a radiobutton, or a checkbox
|
|
<details>
|
For describing details about a document, or parts of a
document
|
|
<summary>
|
A caption, or summary, inside the details element
|
|
<figure>
|
For grouping a section of
stand-alone content, could be a video |
|
<figcaption>
|
The caption of the figure section
|
|
<footer>
|
For a footer of a document or section, could include the
name of the author, the
date of the document, contact information, or copyright information |
|
<header>
|
For an introduction of a document or section, could
include navigation
|
|
<hgroup>
|
For a section of headings, using <h1> to <h6>,
where the largest is the main
heading of the section, and the others are sub-headings |
|
<mark>
|
For text that should be highlighted
|
|
<meter>
|
For a measurement, used only if the maximum and minimum
values are known
|
|
<nav>
|
For a section of navigation
|
|
<progress>
|
The state of a work in progress
|
|
<ruby>
|
For ruby annotation (Chinese notes or characters)
|
|
<rt>
|
For explanation of the ruby annotation
|
|
<rp>
|
What to show browsers that do not support the ruby element
|
|
<section>
|
For a section in a document. Such as chapters, headers,
footers, or any
other sections of the document |
|
<time>
|
For defining a time or a date, or both
|
|
<wbr>
|
Word break. For defining a line-break opportunity.
|
Q 4- What are the New Media Elements in HTML5? is canvas element used in HTML5
Ans: Below are the New Media Elements have added in HTML5|
Tag
|
Description
|
|
<audio>
|
For multimedia content, sounds, music or other audio
streams
|
|
<video>
|
For video content, such as a movie clip or other video
streams
|
|
<source>
|
For media resources for media elements, defined inside
video or audio
elements |
|
<embed>
|
For embedded content, such as a plug-in
|
|
<track>
|
For text tracks used in mediaplayers
|
Q 5- Do you know New Input Type Attribute in HTML5
Ans: Yes we can use below new input type Attribute in HTML5
|
Type
|
Value
|
|
tel
|
The input is of type telephone number
|
|
search
|
The input field is a search field
|
|
url
|
a URL
|
|
email
|
One or more email addresses
|
|
datetime
|
A date and/or time
|
|
date
|
A date
|
|
month
|
A month
|
|
week
|
A week
|
|
time
|
The input value is of type time
|
|
datetime-local
|
A local date/time
|
|
number
|
A number
|
|
range
|
A number in a given range
|
|
color
|
A hexadecimal color, like #82345c
|
|
placeholder
|
Specifies a short hint that describes the expected value
of an input field
|
Q 6- How to add video and audio in HTML5
Ans: The canvas element is used to draw graphics images on a web page by using javascript like belowLike below we can add video in html5
- <video width=“320″ height=“240″ controls=“controls”>
- <source src=“mysong.mp4″ type=“video/mp4″ />
- <source src=“mysong.ogg” type=“video/ogg” />
- </video>
- <audio controls=“controls”>
- <source src=“mysong.ogg” type=“audio/ogg” />
- <source src=“mysong.mp3″ type=“audio/mpeg” />
- </audio>
Q 7- What is the use of localStorage in HTML5?
Ans: Before HTML5 LocalStores was done with cookies. Cookies are not very good for large amounts of data, because they are passed on by every request to the server, so it was very slow and in-effective.In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.and The data is stored in different areas for different websites, and a website can only access data stored by itself.
And for creating localstores just need to call localStorage object like below we are storing name and address
- <script type=“text/javascript”>
- localStorage.name=“PHPZAG”;
- document.write(localStorage.name);
- </script>
- <script type=“text/javascript”>
- localStorage.address=“Newyork USA”;
- document.write(localStorage.address);
- </script>
Q 8- What is the sessionStorage Object in html5 ? How to create and access?
Ans: The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. like below we can create and access a sessionStorage here we created “name” as session- <script type=“text/javascript”>
- sessionStorage.name=“PHPZAG”;
- document.write(sessionStorage.name);
- </script>
Q 9- What the use of Canvas Element in HTML5?
Ans: The canvas element is used to draw graphics images on a web page by using javascript like below- <canvas id=“pcdsCanvas” width=“500″ height=“400″>
- </canvas>
- <script type=“text/javascript”>
- var pcdsCanvas=document.getElementById(“phpzagCanvas”);
- var pcdsText=pcdsCanvas.getContext(“2d”);
- pcdsText.fillStyle=“#82345c”;
- pcdsText.fillRect(0,0,150,75);
- </script>
Q 10- What purpose does HTML5 serve?
Ans: HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.Q 11- What is the difference between HTMl5 Application cache and regular HTML browser cache?
Ans: HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.Q 12- HOW DO YOU PLAY A AUDIO USING HTML5?
Ans:We can display audio using the tag as shown below:
- <audio controls=“controls”>
- <source src=“test.mp3″ type=“audio/mp3″ />
- </audio>
Q 13- WHAT ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?
Ans:HTML5 offers two new objects for storing data on the client:
LocalStorage – stores data with no time limit
- <script type=“text/javascript”>
- localStorage.lastname=“ZAG”;
- document.write(localStorage.lastname);
- </script>
- <script type=“text/javascript”>
- sessionStorage.lastname=“ZAG”;
- document.write(sessionStorage.lastname);
- </script>
Q 14- HOW DO YOU PLAY A VIDEO USING HTML5?
Ans:We can display video using the tag as shown below:
- <video width=“320″ height=“240″ controls=“controls”>
- <source src=“test.mp4″ type=“video/mp4″ />
- </video>
Q 15- WHAT ARE THE NEW APIS PROVIDED BY THE HTML 5 STANDARD? GIVE A BRIEF DESCRIPTION OF EACH?
Ans:The canvas element: Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.
- Timed media playback
- Offline storage database
- Document editing
- Drag-and-drop
- Cross-document messaging
- Browser history management
- MIME type and protocol handler registration
Q 16- WHAT OTHER ADVANTAGES DOES HTML5 HAVE?
Ans:a) Cleaner markup
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
Q 17- GIVE AN EXAMPLE OF NEW ELEMENTS IN HTML5 TO SUPPORT MULTIMEDIA AND GRAPHICS?
Ans: HTML5 introduced many elements such as , instead ofQ 19- WHAT IS THE DIFFERENCE BETWEEN HTML5 APPLICATION CACHE AND REGULATE HTML BROWSER CACHE?
Ans:The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.
Q 20- WHAT PURPOSE DOES HTML5 SERVE?
Ans:HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silver light, Apache Pivot, and Sun JavaFX.
No comments:
Post a Comment