Q #1) What is HTML5?
Answer: HTML5
is the latest version of the HyperText Markup Language that can be referred to
the WWW (World Wide Web) primary language, this markup language enhances a text
file with bits of code, and this code which we can say as “markup” describes
the structure of the document.
HTML5 provides
some standard features like that of CSS, HTML, JavaScript, and DOM, which in
turn will reduce the requirement of external plugins. It’s more markup to
replace scripting, better error handling, etc. HTML5 is device independent.
HTML5 introduces some new
features that can be used to change the way of user interaction with documents
including:
·
Adding new parsing rules to enhance flexibility.
·
Adding New attributes.
·
Allow offline editing.
·
Support (Web SQL), – A common standard for storing data in SQL
databases.
·
Support Protocol and MIME handler registration.
Q #2) What is the difference
between HTML and HTML5?
Answer: Difference between HTML
and HTML5 are given below:
|
HTML5 |
HTML |
|
HTML5
has high-level video and audio support. |
High-level
video and audio support is not a part of the version and specifications in
the previous HTML. |
|
Canvas, SVG and other virtual vector
graphics are supported in HTML5. |
In HTML, if we want to implement vector
graphics, that was only possible by using third party library like VML,
Silver-light, etc. |
|
SVG and
MathML can be used in text. |
This is
not possible in HTML. |
|
Web SQL database, application cache and
web storage is used as permanent storage. |
Browser cache can be used as temporary
storage. |
|
HTML5
is more mobile friendly. |
HTML is
less mobile friendly. |
|
Doctype declaration is simple and easy. |
Doctype declaration is long and
complicated.. |
|
Allows
drag and drop effect. |
Does
not allow drag and drop effect. |
|
Attributes of Async, charset, and ping
are available. |
These attributes are not available in
HTML. |
|
HTML5
support javascript to run in the background. |
Does
not support javascript to run within the web browser. |
|
We can draw shapes like rectangle,
circle, and triangle in HTML5. |
It is not possible to draw shapes like
rectangle, circle, triangle etc. |
Q #3) What is <!DOCTYPE>?
What are the different types of <!DOCTYPE> that are available?
Answer: The
<!DOCTYPE> declaration provides instruction to the web browser to
understand what information it should be display, and the need to start with
<!DOCTYPE> declaration. In HTML5, DOCTYPE declaration is very short, and
case-insensitive, and <!DOCTYPE html> is written at the top of every
HTML5 page.
The following DOCTYPE are also
supported in HTML5:
·
<!DocTYpe html>
·
<!dOCtype html>
·
<!doctype html>
There are 3 types of DOCTYPES
as mentioned below:
·
Strict Doctype
·
Frameset Doctype
·
Transitional Doctype
Q #4) What are the New tags in
Media Elements in HTML5?
Answer: The new tags in Media
Elements in HTML5 are enlisted below:
·
<audio>: Apply for multimedia contents like sounds,
audio streams or music, embed audio content without the requirement of any
additional plug-in like flash player.
·
<video>: Apply for video content like video streams
or movie clip, embed video content etc.
·
<source>: Apply for multiple media
resources in media elements, such as audio, video, picture etc.
·
<embed>: Apply for an external application or embedded
content (a plug-in).
·
<track>: Apply for text tracks in the media
elements such as video or audio. This tag is used for subtitles or caption
files while the video media is playing.
Q #5) What is a tag in HTML5?
Answer: A tag
is a special content in HTML5, which is surrounded by an angle bracket
(<,>). A slash (/) symbol is used to close the tag after completing the
block.
For Example
<title> This is my Browser </title>An Html5 tag
is a set of characters that develop a formatted command for a web page. These
formatted commands communicate and send the instruction to the Browser.
Q #6) What is the minimum
number of HTML5 tags that are required to create a Web page?
Answer: Minimum
3 HTML5 tags are required to create a Web page, such as (<HEAD>,
<BODY>, <HTML>).
Q #7) What is the importance of
Drag and Drop in HTML5?
Answer: Drag
and Drop is the most important User Interface concept which makes it easy to
grab an object and Drag it at the place you want with the help of a mouse
click.
Some common
features that are mostly used by Drag and Drop operation include move, link or
copy.
We can drag
an image using elements, type = <img draggable = “true”>,
to make an image draggable and set the draggable image attribute to true.
Q #8) Explain new Form input
types in HTML5.
Answer: HTML5 has 14 new forms
input types:
·
Date: This is a Date picker, we can pick a date by
using type = “date”.
·
Week: This is a Week picker, we can pick a week by
using type = “week”.
·
Month: This is a Month picker, we can pick a month by
using type = “month”.
·
Time: This is a Time picker, we can pick the time by
using type = “time”.
·
Datetime: This is a combined date and time, we
can pick the combination of date and time by using type = “datetime”.
·
Datetime-local: A combined local date and time, we
can pick the combination of local date and time using type = “DateTime-local”.
·
Email: Allows one or more Email Addresses, we can enter
multiple email addresses using type = “email”.
·
Tel: Allows different phone numbers around the world.
A phone number is validated by the client-side. We can enter a phone number using
type = “tel”.
·
Search: Allows to search queries by input text. We can
enter multiple queries using type = “search”.
·
Number: Allows inserting a numerical value with
additional attributes such as min, max. etc., and we can enter multiple
numerical values using type = “number”.
·
Url: A url input type, that is used for the web
address. In a single url, we can use multiple attributes using type = “url”.
·
Color: Allows to select multiple colors, we can pic
multiple color using type = “color”.
·
Range: Allows to insert a numerical value within a
specific range, Range is similar to the number but it is much specific. We can
enter a numerical value within a range using type = “range”.
·
Placeholder: Allows to display a short hint
(usually in a light color) in the input fields, before we enter the value. We
can write a short hint in the input field by using type = “placeholder”.
Q #9) What is image map in
html5?
Answer: Image
maps are a combination of URL and images, where clicking on these images
(clickable area of the image) will open different new web pages.
Two types of image maps are
available in HTML5, i.e. client side and server side:
The client-side image map is created
by using two elements <area> and <map>, where the map holds the map information
and the area element takes the attributes to define each section of the map. Server-side image map created by using <usemap> attribute, the usemap attribute is
the name of our map.
Q #10) How do you write a
copyright symbol on a web browser page?
Answer: In
order to write a copyright symbol, we need to type © or © in
an HTML5 file.
Q #11) How to optimize website
assets?
Answer: We
need to understand some basic optimization rules, in order to optimize website
assets. Initially, we should decrease the download size and make fewer http
requests.
To optimize website assets we
can follow the below techniques:
·
File compression
·
File concatenation
·
CDN Hosting
·
Offloading assets
·
Re-organizing
·
Refining code
Q #12) What is the use of
MathML Element in HTML5?
Answer: The
word MathML (Mathematical Markup Language) is a markup language, that is used
to show scientific and mathematical expression on the web. MathML is a form of
XML (extensible markup language) to describe the Math notation.
We can use <math>…</math> tags inside the HTML5
documents for implementing MathML element.
Example: print
a²+2b+5=0 using HTML5 code.
|
<!doctype html> <html> <head> <meta charset= “UTF-8”> <title>MathMl
Example</title> </head> <body> <math xmlns=> <a
href="http://www.w3.org/1998/Math/MathML"> http://www.w3.org/1998/Math/MathML</a> ”> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>2</mn> <mo/> <mi>b</mi> </mrow> <mo>+</mo> <mn>5</mn> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math> </body> </html> |
Note: If MathML is
used by an application that conforms to the Namespace in an XML Recommendation,
then the following namespace should be used:
http://www.w3.org/1998/Math/MathMLQ #13) What are the various
formatting tags in HTML5?
Answer: HTML5 has some old and
new formatting tags as given below:
·
Marked text: Represents highlighted text for
Reference purposes. We can use <marks> tags
for text highlight.
·
Deleted text: Specifies the deleted block of text.
We can use <del> tags to implement
a deleted text.
·
Emphasized text: Defines the emphasized text.
We can use <em> tags to implement
an emphasized text.
·
Inserted text: Inserts a block of text into a
document. We can use <ins> tags
to implement an inserted text.
·
Small text: Display inserted text in a small size. We
can use <small> tags to implement a small text.
·
Superscript text: This is a superscripted text. We can
use <sup> tags to implement a superscript text.
·
Subscript text: This is a subscripted text. We
can use <sub> tags to implement a superscript text.
Q #14) Why do we use HTML5?
Answer: HTML5
supports animation, drawing, audio, video, etc and it easily embeds a video on
the web page. It does not require any additional software like Flash for
watching videos.
Some of the important reasons
to use HTML5 are given below:
·
Legacy and cross-browser support
·
Better interactions
·
Smarter storage
·
Cleaner code
Q #15) What is a hyperlink?
Does it only apply to text?
Answer: The
hyperlink is a link that allows a user to move from one web page to another web
page when clicked. Hyperlink concept is used on text and as well as image, and
we can convert an image into a link with the help of <a href = “
”….</a>> tags.
Example to Create a
hyperlink in an image (clickable image) is shown below.
|
<!DOCTYPE html> <html> <head> <title> Image Hyperlink Example
</title> </head> <body> Click the following link <a href =
“https://en.wikipedia.org/wiki/HTML5” target = “_self”> <img src = “image.png” alt =
“Wiki” border = “0/”> </a> </body> </html> |
|
|
Q #16) Explain the concept of
web storage in HTML5.
Answer: Web
storage provides the facility to store the data of our web applications locally
into the user’s browser. It can store up to 10 MB data. Web storage helps to
increase the performance of our applications.
There are two types of web
storage that are used to store data locally in HTML5:
·
Local storage: This stores the data that will not
expire or clear automatically when a user closes or reopens a browser.
·
Session Storage: This stores data for one
session only(i.e, a user who is surfing the internet or website). Once the
browser is closed, session data will automatically delete from the web browser.
Q #17) Explain Geolocation API
in HTML5.
Answer: Geolocation API is used to locate a user’s
geographical position.
For privacy
reasons, the user is asked for permission to report the location information.
Use the navigator.geolocation.get current position() method
to get the user’s position and geographical coordinates (longitude and latitude
number).
For example, to Return the latitude
and longitude position of a user is shown below.
|
|
Example Explained:
·
Check, if Geolocation is supported or not.
·
If Geolocation is supported, run the getCurrentPosition()
method. If Geolocation is not supported, display the error message to the user.
·
If getCurrentPosition() method is successful, it returns
coordinates and functions specified in the parameter.
·
The showPosition() function, gets the output – Longitude and
Latitude.
Q #18) Explain HTML5 Graphics.
Answer: HTML5
supports two types of graphics i.e. Canvas and SVG.
a) Canvas: <canvas>
element is used to design graphics on the web page, and it has several methods
available for drawing circles, boxes, adding images and text. 300 px X 150 px
(width X height) is the default pixel size of canvas.
Example to Draw square Box
using canvas element is shown below.
|
|
b) SVG: <svg> Scalable
Vector Graphics, are mostly used for graphical application and scalable vector
type diagrams, such as X, Y coordinate system, two-dimensional and pie charts.
This makes it faster and lightweight. SVG follows XML format.
Example to draw a
Rectangle using SVG element is shown below.
|
|
Q #19) What are the advantages
of using HTML5?
Answer: HTML5
is the advanced version of HTML. HTML5 enables to create easier or interactive
websites by embedding video, audio, and graphics on the web page.
HTML5
support multimedia technology and graphical content to the web without using
any third party plugins.
Some of the most important
features added by HTML5 include:
·
Geolocation
·
Offline Application Cache
·
Client-side database
·
Error Handling
·
New Structure and new multimedia elements.
·
Browser Support and compatibility.
Supports Some New Application
Programming Interface (API) like:
·
Browser History Management
·
Drag and Drop
·
2D drawing on a web page
·
Time media playback
Supported Applications include:
·
Web Workers – JavaScript
·
Local File Access
·
Application Cache
·
Local data storage
·
Local SQL databases
Q #20) How to create a link
that will connect to another web browser page when clicked in HTML5?
Answer: Use
the <href> tag to create hyperlinks, and these
are used to connect to another web page. We can create hyperlink by using type
= <a href = “ url of website”> text</a> tag.
When we click the text then, the linked URL of the web page will open.
For Example, the code
below is a link that leads to the Yahoo home page, located at the address
https://in.yahoo.com
|
|
Q #21) How many web browsers
does HTML5 support?
Answer: Most
of the latest versions of Apple Safari, Google Chrome, Opera, Internet
Explorer, and Mozilla Firefox are supported by HTML5.
Q #22) What are the frequently
useful API in HTML5?
Answer: A list of the most
frequently useful API’s in HTML5 include:
·
Media API
·
Data Transfer API
·
Application Cache API
·
User Interaction
·
History API
·
Constraint Validation API
·
Command API
·
Text Track API
Q #23) How many tags were
removed in HTML5?
Answer: The list of the
tags that are removed completely in HTML5 include:
·
<frame>
·
<frameset>
·
<noframes>
·
<big>
·
<basefront>
·
<applet>
·
<center>
·
<bigcenter>
·
<acronym>
·
<basefont>
·
<dir>
·
<tt>
·
<font>
·
<strike>
Q #24) Which video and audio
formats are used for embedding on web page?
Answer: Formats of video and
audio that are used for embedding on the web page are given below:
·
Video: MPEG4, Ogg, WebM.
·
Audio: WAV, Ogg Vorbis, MP3.
Q #25) List out the page
structure elements of HTML5.
Answer: Page structure elements
of HTML5 are given below:
·
<header>: Represents the header section and
stores the starting information about the web page.
·
<footer>: Represents the footer section (last
portion) of the page.
·
<nav>: Represents the navigation elements
of the HTML page.
·
<article>: It is a set of information.
·
<section>: It is a set of instructions that is
used inside the article block to define the basic structure of a page.
·
<aside>: Sidebar content of the page.
Q #26) Explain some of the
common lists to design a web page.
Answer: The common lists to
design a web page include:
·
Directory list
·
Definition list
·
Ordered list
·
Menu list
·
Unordered list
Different– Different
tags are used to compose each list.
Q #27) What is the use of
output tag in HTML5?
Answer: <output> tag is used to represent the
different types of output and result.
Q #28) Which element provides
the autocomplete feature in a textbox?
Answer: In
HTML5 <Datalist> element, provides the
autocomplete feature in a textbox.
Q #29) How to Embed Video and
Audio in Html5?
Answer:
Video:
Example to
Embed a video in HTML5:
|
|
Audio:
Example to
Embed an Audio in HTML5:
|
|
Q #30) What are the migrated
tags from HTML4 to HTML5?
Answer: List of the
migrated tags from HTML4 to HTML5 are given below:
Typical HTML4
Typical HTML5
<div id =
“footer”>
<footer>
<div id = “header”>
<header>
<div id = “menu”>
<nav>
<div id = “post”>
<article>
<div id = “content”>
<section>
Q #31) What are the part of
HTML5 Technologies?
Answer: List is given below:
·
Web Workers
·
Web Storage
·
SVG
·
CSS3
·
Server-Sent Events(SSE)
·
Microdata
·
Web Intents
·
Web Sockets
·
Offline Application
·
Geolocation
·
File API
·
Web Messaging
·
Drag and Drop
·
Canvas 2D
Q #32) What is the difference
between SVG and Canvas elements?
Answer:
|
SVG |
Canvas elements |
|
It is Object
Model-based. |
It is pixel based. |
|
Is suitable for using large rendering areas. |
Is suitable for using small rendering areas. |
|
SVG provides any support
for event handlers . |
Canvas does not provide
any recourse for event handlers. |
|
Modification is allowed through script and CSS. |
Modification is allowed through script only. |
|
SVG has Better
scalability |
Canvas has poor
scalability. |
|
SVG is Vector based (composed of shapes). |
Canvas is Raster based (composed of a pixel). |
|
SVG is not suitable for
Games graphics. |
Canvas is suitable for
games graphics. |
|
SVG does not depend on resolution. |
Canvas is completely dependent on resolution. |
|
SVG is capable for API
animation. |
Canvas has no any API
for animation. |
|
SVG is suitable for printing with high quality and any
resolution. |
Canvas is not suitable for printing high quality and high
resolution. |
Q #33) What is the use of
<figure> tag in HTML5?
Answer: The
figure tag is used to add an image in the document on a web page.
Q #34) What is Microdata in
HTML5?
Answer: Microdata
is a new simple semantic syntax, that is used to add the nested groups of name
and value pair of data to documents, that are commonly based on the page
content. Microdata is used for new global attributes.
Q #35) Explain Meta tags.
Answer: Meta
tags are used to provide useful information to our web pages.
Some of the tags include:
·
Title: Provides a title to the web page.
·
Style: Inserts some styles and CSS details to the web
page.
·
Link: Defines the relationship between one page to another page
and an external source.
Some Useful Abbreviations
·
XML: Extensible Markup Language
·
W3C: World Wide Web Consortium
·
SQL: Structured Query Language
·
JPEG: Joint Photographic Expert Group
·
IP: Internet Protocol
·
HTTP: Hypertext Transfer Protocol
·
href: Hypertext Reference
·
FTP: File Transfer Protocol
·
API: Application Programming Interface
·
IDE: Integrated Development Environment
·
WEFT: Web Embedding Fonts Tool
·
DOM: Document Object Model
·
Url: Uniform Resource Locator