Interview Questions and HTML5 Interview Questions in 2023
Interview Questions and HTML5 Interview Questions in 2023
The full form of HTML stands for Hypertext Markup Language and it also allows the user to
create and structure sections, paragraphs, headings, links, and blockquotes for web pages
and applications.
Images are not inserted into a web page basically they are linked to web pages. The <img>
tag helps to create a holding space for the referenced image.
The <img> tag is normally empty, it has attributes only, and does not have a closing tag.
In order to add a background image on an HTML element you need to use two things:
Normally HTML comments are not being displayed in the browser. But these comments can
help to document the HTML source code.
In order to add a space in the webpage, Go where you want to add the space and then use
the spacebar. Normally, HTML displays one space between words, no matter how many
times you have entered the space bar.
This is known as a non-breaking space because it helps to prevent a line break at its location.
Full form of CSS stands for Cascading Style Sheets (CSS) which is used to format the layout of
a webpage.
With the help of CSS, someone can control the color, font, the size of text, the spacing
between elements and also how elements are positioned and laid out, what background
images or background colors to be used, different displays for different devices and screen
sizes, and so many more as well.
Types of CSS:
The most common and used way to add CSS, is to have the styles in external CSS files.
Inline CSS
An inline CSS can be used to apply a unique and also different style to a single HTML element.
Now put the text color of the <h1> element to red, and the text color of the <p> element to blue:
Internal CSS
An internal CSS can be used to define a style for a single HTML page.
An internal CSS is used to define in the <head> section of an HTML page and also within a
<style> element.
Now let’s have an example of the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
External CSS
An external style sheet concept is normally used to define the style for many HTML pages.
In order to start using an external style sheet, put a link to it in the <head> section of each
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align: justify;
}
HTML tables help web developers to set the data into rows and columns.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Hobbies</th>
</tr>
<tr>
<td>Ram</td>
<td>Kumar</td>
<td>Travelling</td>
</tr>
<tr>
<td>Shyam</td>
<td>Chadra</td>
<td>Reading books</td>
</tr>
</table>
If you are working in a Windows system then open an HTML web page in Internet
Explorer, Google Chrome or Firefox.
The HTML style attribute is the option to add styles to an element, like: Color, Font, Size, and
more.
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">This is red</p>
<p style="color:blue;">This is blue</p>
<p style="font-size:50px;">I am Fat and big</p>
</body>
</html>
1. <font Color=”Blue”>
2. <font color=”rgb(128,128,0)”
3. <font color=”#00FF00″>
<!DOCTYPE html>
<html>
<head>
<title>
Example of color attribute
</title>
</head>
<body>
<font color="orange">
<!-- The color attribute of font tag sets the color name 'orange' for
the word Great Learningt-->
<center>
<h1>
Great Learning
</h1>
</center>
</font>
</body>
</html>
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
</body>
</html>
It is a way to give “information” to the browser about what will be the document type to
expect. In HTML5, the <! DOCTYPE> declaration is simple: <! DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Font</title>
</head>
<body>
<h1>Our Products</h1>
<p style = "font-family:georgia,garamond,serif;font-
size:16px;font-style:italic;">
This is sample doc
</p>
</body>
</html>
15. How to add space using < pre > tag in HTML?
The pre tag is used to create preformatted text. The text inside this tag will preserve both
spaces and line breaks. To add space using the tag, you can add the style attribute and set
the value to “margin:10px”.
DOM stands for Document Object Model. When a web page is getting loaded that time the
browser creates a Document Object Model of the page and it is constructed as a tree of
Objects. HTML DOM is basically an Object Model for HTML.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
22. How to select multiple options from a drop down list in HTML?
The div tag stands for Division tag. This is used in HTML to make divisions of content in the
web page like text, images, header, footer, navigation bar, etc. Div tag has two parts like:
1. open(<div>) and
2. closing (</div>) tag and it is mandatory to maintain the tag.
The Div is the most used tag in web page development because it has power to separate
respective data in the web page and also a particular section can be created for particular
data or function in the web pages.
<html>
<head>
<title>div tag demo</title>
<style type=text/css>
p{
background-color:gray;
margin: 100px;
}
div
{
color: white;
background-color: 009900;
margin: 4px;
font-size: 35px;
}
</style>
</head>
<body>
<div > div tag demo 1 </div>
<div > div tag demo 2 </div>
<div > div tag demo 3 </div>
<div > div tag demo 4 </div>
</body>
</html>
HTML is used to make static web pages and HTML stands for markup language.
<!DOCTYPE html>
<html>
<head>
<title>New HTML Document</title>
</head>
<body>
<h1>Demo</h1>
<p style="text-align:center;">Great Learning</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Demo HTML font size</title>
</head>
<body>
<h1 style="color:red;font-size:40px;">Heading</h1>
<p style="color:blue;font-size:18px;">Font size demo</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color
property:</p>
<button class="button">Green</button>
<button class="button buttondemo">Blue</button>
<button class="button buttondemo2">Red</button>
<button class="button buttondemo3">Gray</button>
<button class="buttonbuttondemo4">Black</button>
</body>
</html>
HTML5 is the newest version of HTML and it is better than HTML because it includes new
features like audio and video elements, new semantic elements, and support for local
storage.
The HTML <span> element stands for a generic inline container for phrasing content, that
does not inherently represent anything. It can also be used to group elements for styling
purposes like using the class or id attributes, or because they share attribute values, such as
lang.
<u> tag is used for underline the text. The <u> tag was deprecated in HTML, but then they re-
introduced in HTML5.
<font Color=”Blue”>
<font color=”rgb(128,128,0)”
<font color=”#00FF00″>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>
5 Example of color attribute
6 </title>
7 </head>
8 <body>
9 <font color="orange">
10 <!-- The color attribute of font tag sets the color name 'orange' for the word
11 <center>
12 <h1>
13 Great Learning
14 </h1>
15 </center>
16 </font>
17 </body>
18 </html>
To add links in html we use <a> and </a> tags, which are the tags used to define the links.
The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends.
Whatever text gets added inside these tags, will work as a hyperlink. Add the URL for the link
in the <a href=” ”>.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Title of the document</title>
5 </head>
6 <body>
7
8 <h1>This is a heading</h1>
9 <p>This is a paragraph.</p>
10
11 </body>
12 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div {
6 background-color: lightgrey;
7 width: 300px;
8 border: 15px solid green;
9 padding: 50px;
10 margin: 20px;
11 }
12 </style>
13 </head>
14 <body>
15
16 <h2>Demonstrating the Box Model</h2>
17
18 <p>Hey, welcome to Great Learning.</p>
19
20 <div><a href="https://www.mygreatlearning.com/academy" data-internallinksmanage
21
22 </body>
23 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div.ex1 {
6 background-color: lightblue;
7 width: 110px;
8 height: 110px;
9 overflow: scroll;
10 }
11
12 div.ex2 {
13 background-color: lightblue;
14 width: 110px;
15 height: 110px;
16 overflow: hidden;
17 }
18
19 div.ex3 {
20 background-color: lightblue;
21 width: 110px;
22 height: 110px;
23 overflow: auto;
24 }
25
26 div.ex4 {
27 background-color: lightblue;
28 width: 110px;
29 height: 110px;
30 overflow: visible;
31 }
32 </style>
33 </head>
34 <body>
35
36 <h1>Welcome to great learning</h1>
37
38
39
40 <h2>scroll:</h2>
41 <div class="ex1">Great Learning Academy is an initiative taken by Great Learnin
42 </body>
43 </html>
44
HTML attributes help to provide the additional information about HTML elements.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Demo HTML font size</title>
5 </head>
6 <body>
7 <h1 style="color:red;font-size:40px;">Heading</h1>
8 <p style="color:blue;font-size:18px;">Font size demo</p>
9 </body>
10 </html>
45. How to change color of text in HTML?
To text bold in HTML, use the <b> </b> tag or <strong> </strong> tag.
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1>The footer element</h1>
6
7 <footer>
8 <p>demo of footer<br>
9 <a href="mailto:[email protected]">[email protected]</a></p>
10 </footer>
11
12 </body>
13 </html>
14
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5
6 <header>
7 <b>hey</b>
8 </header>
9
10
11 </body>
12 </html>
1 <div class='myDiv'>
2 <button style='margin-right:16px'>Button 1</button>
3 <button style='margin-right:16px'>Button 2</button>
4 <button>Button 3</button>
5 </div>
The width and height attributes always define the width and height of the image in pixels.
Doctype is used for Document Type Declaration and also It informs the web browser about
the type and version of HTML used in building the web document.
You can create a .png image and then use f the following snippets between the <head> tags
for the static HTML documents:
1 <div class="container">
2 <img src="img_snow.jpg" alt="Snow" style="width:100%;">
3 <div class="bottom-left">Left</div>
4 <div class="top-left">Up Left</div>
5 <div class="top-right">Up Right</div>
6 <div class="bottom-right"> Right</div>
7 <div class="centered">Middle</div>
8 </div>
Step 1: Filter your HTML form requirements for your contact us web page.
Step 2: Create a database and a table in MySQL.
Step 3: Create HTML form.
Step 4: Create PHP page to Insert contact us HTML form data in MySQL database.
Step 5: All done!
The HTML <blink> tag stands for a non-standard element that is used to create an enclosed
text. It flashes slowly and normally blinks, meaning is light flashing on and off in a regular or
intermittent way so samely blinking effect is used very rarely, as it is not eye soothing for
users to watch a part of text constantly turning on and off.
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5
6
7 <button onclick=”CalenderFunction()">Put the date</button>
8
9
10 <script>
11 function CalenderFunction()n() {
12 var x = document.createElement("INPUT");
13 x.setAttribute("type", "date");
14 x.setAttribute("value", "2014-02-09");
15 document.body.appendChild(x);
16 }
17 </script>
18
19 </body>
20 </html>
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1> Google Map</h1>
6
7 <div id="googleMap" style="width:100%;height:400px;"></div>
8
9 <script>
10 function myMap() {
11 var mapProp= {
12 center:new google.maps.LatLng(51.508742,-0.120850),
13 zoom:5,
14 };
15 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
16 }
17 </script>
18
19 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMa
20
21 </body>
22 </html>
1 <form>
2 <label for="fname">First name:</label><br>
3 <input type="text" id="fname" name="fname"><br>
4 <label for="lname">Last name:</label><br>
5 <input type="text" id="lname" name="lname">
6 </form>
1 <div class="month">
2 <ul>
3 <li class="prev">❮</li>
4 <li class="next">❯</li>
5 <li>August<br><span style="font-size:18px">2017</span></li>
6 </ul>
7 </div>
8
9 <ul class="weekdays">
10 <li>Mo</li>
11 <li>Tu</li>
12 <li>We</li>
13 <li>Th</li>
14 <li>Fr</li>
15 <li>Sa</li>
16 <li>Su</li>
17 </ul>
18
19 <ul class="days">
20 <li>1</li>
21 <li>2</li>
22 <li>3</li>
23 <li>4</li>
24 <li>5</li>
25 <li>6</li>
26 <li>7</li>
27 <li>8</li>
28 <li>9</li>
29 <li><span class="active">10</span></li>
30 <li>11</li>
31 </ul>
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>HTML Demp Frames</title>
6 </head>
7
8 <frameset rows = "10%,80%,10%">
9 <frame name = "top1" src = "/html/top_frame.htm" />
10 <frame name = "mainframe" src = "/html/main_frame.htm" />
11 <frame name = "bottompart" src = "/html/bottom_frame.htm" />
12
13 <noframes>
14 <body>Hey Great Learning</body>
15 </noframes>
16
17 </frameset>
18
19 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 div {
7 width: 35px;
8 height: 5px;
9 background-color: black;
10 margin: 6px 0;
11 }
12 </style>
13 </head>
14 <body>
15
16 <p>Menu icon:</p>
17
18 <div></div>
19 <div></div>
20 <div></div>
21
22 </body>
23 </html>
The starting and ending tags mark the beginning and end of the HTML element. The tags are
enclosed within the < and > symbol. HTML Elements is the text written between HTML tags and
it holds the content.
There are 6 types of headings that can be found in HTML which are numbered <h1> to <h6>
from largest to smallest. Headings are used in the following way.
To insert the copyright symbol you can use the “©” as well as “©” in the HTML file.
<meta> is the tag used to specify metadata in HTML. <meta> is a void tag which means there
is no closing tag.
73. What are Inline and block elements in HTML?
The block elements take up the full page width and start on a new line, instead of inline
element that only take the space to accommodate the length of the content and continue on
the same line. Some examples of block elements are <div>, <p>, <header>, <footer>, <h1>…
<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>,
<hr>, <article>, <section>, etc. Some examples of inline elements are <span>, <a>, <strong>,
<img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>,
<input>, <output>, <q>, etc.
Audio tags are supported in HTML5 and with these, you can add audio to a webpage. The file
formats supported by HTML5 include MP3, WAV, and OGG.
To change the color of the bullet, you need to change the text color of the first line in the list.
The bullet takes the color from the first line of the list.
76. How can you keep list elements straight in an HTML file?
You can use indents to keep the elements of a list aligned straight. You can use a nested list
and indent them further than the parent list, you can quickly determine the lists and elements
contained under the list.
If you want to collect the information of the visitors to the webpage, you can add a form to
the webpage. Once the user enters the information into the form fields, it is added to a
database specified by you.
Some elements in HTML only need an opening tag, without the need for a close tag, and these
are known as void elements. Some examples are <br />, <img />, <hr />, etc.
Whenever you need to link any two web pages, website templates, or sections, you can do so
using the anchor tag. The anchor tag format is <a href=”#” target=”link”></a>. Here the ‘link’ is
defined as the target attribute, while the ‘href’ attribute indicates the sections in the
documents.
Identified by the <map> tag, the image map can link an image to different web pages. It is
one of the most asked questions in interviews these days.
The datalist tag is an HTML tag that lets the user auto-complete the form based on the
predefined options. It presents the users with predefined options that they can choose from.
An example of this can be as below:
<label>
<datalist id=”BolActor”>
</datalist>
</label>
HTML stands for Hypertext Markup Language while XHTML stands for Extensible Hypertext Markup
Language
The format of HTML is a document file format while for XHTML the file format is a markup file
format
In HTML it is not necessary to close tags in the same order as they were opened, but in XHTML it is
necessary
In XHTML, it is quite important to write doctype on the top of the file; while in HTML is it not needed
The file name extension used in HTML are .html, .htm.; and the file name extension used in XHTML
are .xhtml, .xht, .xml.
It is an attribute that refers to one or more than one class name for an HTML element. The
class attribute can be used for the HTML elements.
IFrame or Inline Frame is basically an HTML document implanted inside the other HTML
documents on a website. The IFrame element is used for inserting content from other source,
which can be an advertisement into a webpage.
URL is encoded in HTML as it converts characters into a format that can be transmitted over
the web. A URL is transmitted over the internet through the ASCII character set. The non-ASCII
characters can be replaced by “%” which is followed by hexadecimal digits.
A document type declaration or doctype is actually an instruction that conveys to the web
browser what type of document it should expect.
The <!DOCTYPE> declaration is included at the start of each document it is added just above
the <html> tag in each document.
The common doctype declaration for different version of HTML and XHTML are:
3. HTML 4.01 Transitional: The transitional version of HTML 4.01 this Transitional document type
definition (DTD) allows users to utilize certain elements and attributes which were not allowed to
be used in strict doctype.
“http://www.w3.org/TR/html4/transitional.dtd”>
4. HTML 4.01 Frameset: In HTML 4.01 version Frameset document type definition (DTD),allows users to
use frames.
5. XHTML 1.0 Strict: In XHTML 1.0 version Strict document type definition (DTD), does not support
deprecated tags and the code must be written according to the XML Specification.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
6. XHTML 1.0 Transitional: In XHTML 1.0 version Transitional document type definition (DTD), allows
deprecated elements.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
7. XHTML 1.0 Frameset: In XHTML 1.0 version Frameset document type definition (DTD), framesets are
used.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
8. XHTML 1.1: In XHTML 1.1 version document type definition (DTD), allows the addition of modules
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
89. Please explain how to indicate the character set being used by a
document in HTML?
HTML5 by default uses utf-8 charset even if it is not defined. To define explicitly in an HTML
document the character set is specified using the charset attribute of a <meta> tag which is
placed inside the <head> element of the HTML.
1 <head>
2 <title>Charset HTML</title>
3 <meta charset="UTF-8">
4 </head>
90. What is the advantage of collapsing white space?
White spaces are a sequence of blank space characters, treated as a single space character
in an HTML document.
Some characters are reserved in HTML that has special meaning.HTML entities are used to
display invisible characters and reserved characters that might be interpreted as HTML code.
HTML entities is a piece of text, or string, that begins with an ampersand (&) and ends with a
semicolon (;).
An HTML page layout describes the appearance of a website. An HTML layout structure helps
the user to navigate through web pages easily. HTML layout specifies a way to arrange web
pages in well-mannered, well-structured using simple HTML tags.
Page loading refers to how quickly your content is displayed when a user visits a page on
your site.
Cell Padding and Cell Spacing are the attributes of formatting a table basically sets the white
spaces in your table.
Used to fix the width/space between the Fixes the white space between the single cell, i.e.,
border and its content space between the edges and adjacent cell
Syntax: Syntax:
<table cellpadding=”value” > <table cellspacing=”value” >
….. …..
….. ……
</table> </table>
Here, cellpadding value specifies the space Here, cellspacing value specifies the space
between the border and its content between adjacent cells
Example:
static.
relative.
fixed.
absolute.
sticky.
There are two ways we can include javascript code in the HTML
1. Embedded Js: In this, we add the script tag directly in the HTML document as shown below:
Can add the script tag either in the head section of the body section of an HTML document
depending on when you want the script to be loaded.
2. External Js: create a separate javascript file and save it with .js extension and with the help of src
attribute of script tag add the .js file to the HTML document as shown below:
<script src=”file1.js”></script>
The Head and Body tag of HTML have their own significance as below:
Head Body
Describes the metadata or information Describes the documents main content of an HTML
related to the document document
Head Tag contains the title for the Body tag contains all the contents of an HTML
document, and also other tags such as document, defined using different tags such as text,
scripts, styles, links, and meta. hyperlinks, images, tables, lists, etc.
There are a handful of HTML5 interview questions that an interviewee is most likely to face. So,
let’s dig deeper into those questions.
1. What is HTML5?
HTML5 is the latest version of HTML (HyperText Mark-up Language) which is also referred to as
World Wide Web (www) primary language. This standard version of HTML has features and
behaviours, as well as a larger set of technologies leading to the building of more diverse and
powerful web sites and applications. It is a cooperation between W3C(World Wide Web
Consortium) and WHATWG( Web Hypertext Application Technology Working Group). HTML5
actually incorporates three main kinds of code – HTML, CSS and JavaScript to take care of
structure, presentation and implementation respectively, hence reducing the requirement of
external plugins.
HTML5 is a markup language that is used to design the structural layout and format of
webpages in World Wide Web. It is the fifth and latest version of HTML, hence it has a good lot
of enhanced features and elements in its box for the users and developers. HTML5 is used for
designing web content like web pages, sites, applications, advertisements, audio-video
contents and games.
HTML5 has replaced Flash in a quite fast pace and allows to make highly interactive ads and
videos without requiring any external plugins, thus it can be said that it has revolutionized the
world of web.
HTML5 was published on 22 January, 2008 as a public-facing form. However, it was released
as a W3C recommendation on 28 October, 2014 which brought the specification process to
completion. Further, HTML5.1 and HTML5.2 were released as recommendations by W3C on 1
November,2016 and on 14 December, 2017 respectively. HTML5 does not only intend to
encompass HTML4 but XHTML 1and DOM Level2 HTML also.
HTML5 being the fifth and the last version of HML till now is much more efficient and
advanced as compared to HTML:
The main differences between the HTML4 and HTML5 are listed below:
7. What is new in HTML5?
HTML5 includes a lot of new features that are quite convenient to implement. New inline
elements of HTML5 indicate contents that are-
The new features of HTML5 that support making of more dynamic pages-
The new form types HTML5 include: datetime, datetime-local, date, month, week, time,
number, range, email, url.
HTML5 does not support some elements of HTML4 like acronym, big, dir, etc. HTML5 provides a
few new elements like supporting drawing space in JavaScript, adding audio and video to
one’s web pages with simple tags.
HTML5 gives a well-defined structure of a web page, including definitions for sections of
pages, header & footer of a page, navigation on a page, some primary content or article on a
page, images to annotate articles of page, and some extra content like slide bar on the
pages.
Currently, latest versions of Apple Safari, Google Chrome, Opera and Mozilla Firefox support
many functionalities of HTML5. Internet Explorer 9.0 is also intended to have support for HTML
features. Besides, the mobile web browsers that come pre-installed on Android phones,
iPhones, and iPads, all provide excellent support for HTML5.
Here are the steps to turn on HTML5 in Chrome by installing the extension from Chrome Web
Store (using IDE for example):
It has been quite long since Google proposed making HTML5 the default language over Flash
in Chrome, i.e. Chrome directly syncs to HTML5. However, when it comes to Androids, one can
always enable HTML5 in Chrome by changing its settings.
No as such installation of HTML5 is required since almost all the modern day web browsers
support HTML5 by default. However, a proper text editor to work with HTML5 (like in the case of
HTML) is required to be installed on the device, which can be done by directly downloading it
from the browser. All the HTML5 web contents are automatically supported by the web
browsers; hence no separate installation is needed to work on or with HTML5.
11. Why to use HTML5?
There are numerous reasons that point towards the benefits of using HTML5. Be it for
individual purposes or for business purposes, HTML5 is there to meet its users’ needs and
requirements.
More interactive: In this world of growing virtualization, high interactivity is a must to have
features. <canvas>, the HTML5 drawing tag is used to create dynamic websites. Besides, it comes
with a great assortment of APIs, like Drag and Drop, offline storage database, browser history
management, document editing and timed playback of media, to provide excellent user
experience.
High accessibility: The Semantics and ARIA of HTML5 are the major reasons behind the creation
of highly accessible sites. Headings like <header>, <section>, etc. are responsible for providing
access to different sections of a web page.
Doctype: Coding in HTML5 does not involve any kind of hustle and bustle at all. Its doctype
declaration is nevertheless pretty precise and simple. Apart from the simplicity part, HTML5 runs
in almost all the web browsers.
Supports audio and video without external plugin: <video> and <audio> tags of HTML5 enable
its users to access audio and video content without any third party plugin like Flash and
Silverlight. These tags use attributes like height, width, autoplay and so on to specify the
parameters of the audio/video.
Enhanced storage: The local and session storage of HTML5 provides a smarter way of using the
storage capacity efficiently. Local storage makes the web applications possible without third
party plugins.
Easy and clean coding: With a diversified set of attributes and tags, it becomes very easy to
code in HTML5. It allows writing clean and descriptive codes with its semantic markup structure.
Also, HTML5 boilerplate enables the designers to create webpages without facing any hassle.
Wide browser support: All modern and popular web browsers such as Chrome, Firefox, Opera,
etc., all support HTML5. Now even IE features tend to make use of some HTML5 functionality.
Game development: HTML5 provides an efficient way to develop interactive games. <canvas>
element plays an important role in game development using HTML5.
Mobile friendly: Since mobile technology is ruling the world in the current era, it is pretty much
comprehensible for HTML5 to be mobile friendly if it wants to lead the world of web.
In order to code in HTML5, begin with <!DOCTYPE HTML> in the text editor. One can simply open
the text editor and write the code for html5 like any other html code, just to be kept in mind
that one has to start with <!DOCTYPE HTML>. Start with DOCTYPE, add <html> tag to specify
the language, create head section and body section as per your requirements and then save
the file with .htm extension.
1 <!DOCTYPE HTML>
2 <html lang = "en">
3 <head>
4 <!-- basic.html -->
5 <title>basic.html</title>
6 <meta charset = "UTF-8" />
7 </head>
8 <body>
9 <h1> Sample</h1>
10 <p>
11 This is a sample code.
12 It teaches how to code in HTML5
13 </p>
14 </body>
15 </html>
Output:
DOCTYPE( Document Type Definition) is a declaration that is done on the top of a webpage. It
tells the web browser about the version of markup language being used for writing the
webpage. There are three types of DOCTYPE- Strict, Framest and Transitional DOCTYPE. The
DOCTYPE for HTML5 is quite efficiently concise as well as case – insensitive.
<!DocTYpe html>, <!dOCtype html>, and <!doctype html>, are some other declarations of
DOCTYPE that are supported by HTML5.
For YouTube(Chrome)
For Firefox
Go to about:config
Set media.ogg.enabled to false
There are several easy ways to download an HTML5 video, one of them are mentioned here:
The video technology of HTML5 empowers the marketers with the ability to show up an
engaging video experience on any platform virtually, no matter whether it is an iPad or a
Smartphone device or a web browser. HTML5 video players provide a simpler way for
marketers and digital agencies to embed videos on websites or within different applications.
There are certain HTML5 video players that make it pretty convenient to work with as well as
build on various HTML5 videos.
With new syntactical features and elements of HTML5, it becomes very easy to integrate
various multimedia and graphical contents without requiring Flash and external plugins. Also,
with its inbuilt features of adding audio and video, we don’t require third party plugins while
working with HTML5. Hence-
HTML5 ads are easy to update and do not need extra plugins
HTML5 ads essentially work with more platforms and browsers
HTML5 ads are much more interactive and engaging, henceforth revolutionizing the world of
digital marketing
External style sheets (CSS) can be easily linked to HTML5 by using the <link> tag in the head
section, which contains the link to the CSS code of the style sheet. Consider the following
example-
1 <!DOCTYPE html>
2 <html lang = "en-US">
3 <head>
4 <meta charset = "UTF-8">
5 <title>CSSlink.html</title>
6 <link rel = "stylesheet"
7 type = "text/css"
8 href = "MyStyle.css" />
9 </head>
10 <body>
11 <h1>External Style Sheet</h1>
12 <p>
13 This sheet contains a style set for headings, body and paragraphs. This sheet
14 </p>
15 </body>
16 </html>
Output:
<datalist>: This element allows to display a list of suggestions to a text input element
<meter>: This element is used to point to a numeric value that lies within a range. Value, max,
min, high, low, optimum are the attributes of this element.
<output>: This element displays the output text which can be modified via using Script like
JavaScript.
<progress>: This form element indicates the amount of work completed, i.e. tells about the
progress of a task.
<keygen>: This element passes encrypted data to the server by generating an encryption key.
keytype and challenge come under its parameters.
Apart from the above mentioned new form elements; there are a whole lot of new form
<input> elements as well-
21. What happens if you view a new HTML5 form input type in an
older browser?
Most of the web browsers( both new and old) are capable of handling HTML elements as
inline elements even when they are unrecognized as input elements if a new HTML5 form
input is viewed in it. Still, one can have the browsers to identify and further handle the new
form input types. While some of the browsers ignore these new form elements and some
might treat them as errors, one needs to add CSS rules to the webpage, causing these
elements to behave like block elements in order to fix the compatibility issue.
header, section, footer, aside, nav, main, article, figure
{ display: block;}
Apart from this method, one can also rebuild the widgets with JavaScript to make the
elements familiar to the old browsers.
Earlier, <center> tag was used in HTML to center text. But, since this tag is a deprecated HTML
tag and no longer supported by HTML5, CSS text align property or style attribute in HTML5 is
applied to the desired <div> or <p> element. Hence, text can be centered in HTML5 by
applying text – align : center to the desired text. However, their total dimensions remain the
same. CSS margin – right and margin – left properties can be used in HTML5 to center the
blocks as per one’s requirements.
1 <!DOCTYPE HTML>
2
3 <html>
4 <head>
5 <title> Center text</title>
6 </head>
7 <body>
8 <p style="text-align: center">Hello World!</p>
9 </body>
10
11 </html>
Centering a block using CSS margin alignment property
1 T.blocktext {
2 margin-left: auto; // setting left and right margins to auto places
3 margin-right: auto;
4 width: 10cm
5 }
6 ...
7 <P class="block_text">Pieces of text to be made block text
Output:
To center an image in HTML5, style attribute with its value text – align : center is used within a
block level element like <p> … </p> tags.
Example:
1 <!DOCTYPE HTML>
2
3 <html>
4 <head>
5 <title> Centering an image </title>
6 </head>
7 <body>
8 <p style="text-align:center;"><img src="C:\Users\Lenovo\Desktop\great-lea
9 </body>
10 </html>
Output:
Also, CSS properties can be used to center an image in HTML5. Consider the following
example using CSS alignment property:
1 IMG.DisplayLogo
2 {
3 display: block;
4 margin-left: auto;
5 margin-right: auto;
6 }
7 ...
8 <IMG class="DisplayLogo" src=" C:\Users\Lenovo\Desktop\great-learning-logo.png "
Canvas in HTML5 is an element that gives a very powerful and convenient way to design
graphics using JavaScript. <canvas> is used to draw charts, graphs, compose photos and
even carry out basic animations.
This <canvas> element has just additional width and height attributes along with the core
attributes like id, name, etc.
Example:
1 <!DOCTYPE HTML>
2
3 <html>
4 <head>
5 <title> Canvas usage </title>
6 <style>
7 #mycanvas{border:5px solid green;}
8 </style>
9 </head>
10
11 <body>
12 <canvas id = "mycancvas" width = "100" height = "200"></canvas>
13 </body>
14 </html>
Output:
Initially the <canvas> element of HTML5 is blank and its rendering context is needed to be
accessed and drawn on it in order to display something. For that matter, the rendering
context of sample canvas in the above example has to be created too.
Just like HTML5 is the fifth and the latest version of HTML, CSS is the third and the latest version
of CSS. HTML5 includes a number of advanced elements to facilitate easy coding of web
pages. Likewise, CSS3 encompasses the concept of modules that aid efficient designing in
less time. HTML5 contains cascaded CSS3 to specify the style and structure of the site or app.
HTML5 and CSS3 files are kept separated though.
Syntax:<footer>…</footer>
Example:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> footer example</title>
5 </head>
6 <body>
7 <p> The part below this paragraph is the footer section of this page. Hop
8 Happy learning! </p>
9 <footer>
10 <div class="column">
11 <p>Company Info</p>
12 <ul style="list-style-type:disc">
13 <li>About Us</li>
14 <li>Terms & Conditions</li>
15 <li>Contact Us</li>
16 </ul>
17 </div>
18 </footer>
19 </body>
20 </html>
Output:
A table is created using the <table> tag. Furthermore, <tr>, <th> and <td> tags are used for
specifying the table row, table headings and table data respectively. Let’s consider the
following example:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Table</title>
5 </head>
6 <body>
7 <table border = "2">
8 <tr>
9 <td>row1,cell1</td>
10 <td>row1,cell2</td>
11 </tr>
12 <tr>
13 <td>row2,cell1</td>
14 <td>row2,cell2</td>
15 </tr>
16 </body>
17 </html>
18 <!DOCTYPE html>
19 <html>
20 <head>
21 <title>Table</title>
22 </head>
23 <body>
24 <table border = "2">
25 <tr>
26 <td>row1,cell1</td>
27 <td>row1,cell2</td>
28 </tr>
29 <tr>
30 <td>row2,cell1</td>
31 <td>row2,cell2</td>
32 </tr>
33 </body>
34 </html>
Output:
The tag which is used to represent an independent piece of content of a document in HTML5
is <article> tag. This tag represents a self – contained text which can be distributed
independently from the rest of the site. This element can be used for a blog post, forum post
or news story.
Example:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> article example</title>
5 </head>
6 <body>
7 < article class = ‘OurCourses’>
8 <h1>We provide following courses</h1>
9 <article class = ‘Courses’>
10 <h2> HTML5</h2>
11 <p>HTML5 is a mark-up language</p>
12 </article class = ‘Courses’>
13 <article>
14 <h2>Python</h2>
15 <p>Python is a programming language</p>
16 </article>
17 </article>
18 </body>
19 </html>
Output:
31. What are the common lists to design a webpage using HTML5?
Ordered lists, used to make a list of related items in a specific order using <ol> tag
Unordered lists, used to make an unordered list of related items using <ul> tag
Menu lists create menu driven set of elements using <menu> tag
Definition lists are used to create list of objects along with their definitions using <dl> tag
Directory lists can be generated using <dir> tag
32. What are the audio and video formats that are used for
embedding on a webpage?
The audio formats that are used to embed on a webpage are MP3, WAV, Ogg Vorbis. WebM,
MPEG4, Ogg video formats are used for embedding purposes on a web page.
SVG(Scalable Vector Graphics) are used to draw 2d vectors and graphics in XML. <svg> tag in
HTML5 enables the user to use SVG of XML to draw vector type diagrams since it contains the
SVG graphics .
Raphael-Vector Graphics, Zoom plugin, Touch enabled SVG pan, jQuery inline, SVG path
animation plugin, iSVG are some of the jQuery SVG plugins required in order to use the <svg>
tags in HTML5.
By following the steps mentioned below, one can easily convert Flash to HTML5:
1. In any of the Flash to HTML5 conversion tools like Animate, open your Flash file.
2. Click on ‘Convert to Other Document Formats’
3. Then choose HTML Canvas and click OK button
4. Click Code Snippets in order to change Actions script
5. Choose Convert to Bitmap, enabling conversion of vectors to bitmaps by right-clicking
6. Check Export all bitmaps as Spritesheets and check Convert text to outlines, further click on OK
button to Publish.
For the conversion of PSD to HTML5, one has to go through the following procedure:
Dividing the PSD file into chunks: Since a PSD file is too heavy and static; it is not possible to
export it directly to HTML5. Therefore, the image file created in Photoshop has to be divided into
sections like header, body, navigation, or footer. It helps in coding that file in HTML5
Coding for the file chunks in HTML5(conversion): Now, the segments of PSD file need to be
coded in the HTML5 mark-up language using any good text editor. As the first step of coding,
code the main work and its background. In the next step, code the image navigation, content
area and footer section. While coding, take special care of the navigation menu and the
typography fonts.
SEO semantic Coding: The fundamentals of semantic coding in SEO have to be kept in mind
while conversion. Incorporation of ALT tags along with descriptions of heading and meta tags as
per requirement.
Test and Validation: A validation tool can be used to make this process of test and validation of
coding less time consuming.
HTML5 stack is a set of linked software technologies that aid in carrying out a particular
operation of a certain website or web application. The HTML5 stack includes HTML5, CSS3 and
JavaScript. This stack has predefined common elements (including noscript and simple div)
and attributes. Besides, there is a choice of using one’s own set too; this feature makes the
stack very flexible and versatile.
Drag and Drop facility of HTML5 is one of its most essential features that are responsible for
an enhanced user interface. This feature allows the user to drag an object from one place
and drop it at the desired location with a simple mouse click.
Move, copy and link are some of the common features that are used by most of the Drag and
Drop operations. In order to make an image draggable, one is supposed to set the draggable
image attribute to true, i.e., type = <img draggable = “true”>. In this way, the Drag and Drop
feature can be used for an image.
38. What is the Geolocation API in HTML5 and how to use it?
Geolocation API is used for obtaining the user’s location for certain privacy and security
reasons. The navigator.geolocation.get current position() method is used to get one’s
location.
Example:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> location page</title>
5 </head>
6 <body>
7 <p>Click The My Location Button given below to get your location.</p>
8 <button onclick="getLocation()"> My Location </button>
9 <p id="location"></p>
10 <script>
11 var x = document.getElementById("location");
12 function getLocation() {
13 if (navigator.geolocation) {
14 navigator.geolocation.getCurrentPosition(showPosition);
15 } else {
16 x.innerHTML = "Geolocation is not supported by this browser.";
17 }
18 }
19 function showPosition(position) {
20 x.innerHTML = "At Latitude: " + position.coords.latitude +
21 "<br>At Longitude: " + position.coords.longitude;
22 }
23 </script>
24 </body>
25 </html>
Output:
39. How to clear HTML5 offline storage mega?
HTML5 offline storage space mega browser (like Chrome) error can be cleared by following
the steps enlisted below:
Now, you won’t find Out of HTML5 Storage Space message anymore while downloading a file
using HTML5 downloader.
HTML5 boilerplate which is now known to be one the most popular front-end templates is
used to build robust, adaptable and fast web sites and applications. It offers a set of HTML5
in-built features and elements to help the designers make efficient websites and
applications in just no time. The very basic features and elements to be found in HTML5
boilerplate cover almost all the requirements needed to begin with any website designing. It
supports HTML, CSS, JavaScript, Crossdomain.xml, Apache web server
configuration(.htaccess) and other miscellaneous documentation like ignore file, gitignore,
etc.
In other words, HTML5 boilerplate is a professional template cum handy tool to create
websites. It is pretty good to go with, when it comes to designing apps and sites, especially
for beginners. It gives splendid mobile friendly analytics, graphics, icons and what not! It
supports the latest versions of Modernizr, as well as includes normalizers.css to produce
satisfactory output.
41. How to make HTML5 games?
HTML5 has been gaining popularity in developing games too. The steps to make a game in
HTML5 are as follows-
One can either use a dashboard template or go along with the conventional way of coding
for creating a dashboard in HTML5. First get the concept for your dashboard then think about
what all things you need to include. After that, get started with a clean design of dashboard.
Now, move on to the development of your dashboard in which you are supposed to choose
the functional and the most visually compelling components of HTML5. It allows you to
produce a dynamic and descriptive representation of data. In the last part, think about the
deployment but thanks to HTML5 compatibility, it has got you covered there.
43. What are some of the advantages of HTML5 over its previous
versions?
HTML5 has newly added features and tags providing improved accessibility.
Multimedia support for native audio and video which was not there in previous versions
HTML5 supports SVG (Scalable Vector Graphics), Canvas, and other virtual vector graphics;
previous versions supported only vector graphics by combining it with tools like flash or
silverlight.
HTML5 has the ability to draw shapes which were not there in previous versions.
HTML5 supports data storage using local storage, web SQL databases,and application cache for
storing data temporarily; previous versions of HTML had data storage using cookies and
browser cache to store data temporarily.
JavaScript and browser interfaces run in different threads; previous versions have a single
thread.
Doctype declaration is shorter and not mandatory for a few browsers.
HTML5 uses UTF-8 for character encoding while previous versions uses ASCII for character
encoding.
HTML5 has geolocation API
Semantic element is that it clearly defines its meaning to the developer and the browser.
Examples of non-semantic elements do not convey anything about the content: <div> and
<span>
Examples of semantic elements conveys the meaning of the content to the browser and
developer: <form>, <table>, <header>, <article> etc.
45. What is the difference between <meter> tag and <progress> tag?
<meter> <progress>
The meter tag describes a scale for measuring A progress tag is used to specify a progress bar
data within a defined range. that shows the progress of a task.
For example, usage of the disk, purpose of a For example, form completion task, file upload
query result, the temperature of an object, etc progress, file download progress, etc on a website
Syntax:<meter>….<meter> Syntax:<progress>….</progress>
A web worker is essentially a thread executing a JavaScript file. It makes it possible to execute
a JavaScript file asynchronously and autonomously. It also helps achieve multi-threading in
your web applications
Microdata in HTML5 is a standard way to define your own customized elements for your
webpage and start adding properties for it.Has an item and name-value pair to add values.
The groups are called items and are created using the itemscope attribute and to add a
property to an item, the itemprop attribute is used.
For example:
1 <html>
2 <body>
3 <div itemscope>
4 <p>My name is <span itemprop = “name''>ABC</span>.</p>
5 </div>
6 <div itemscope>
7 <p>My name is <span itemprop = “name''>DEF</span>.</p>
8 </div>
9 </body>
10 </html>
Canvas.
Canvas:
Uses JavaScript to draw graphics on a web page. A rectangular area, and you control every
pixel of it
Syntax
</canvas>
The canvas element has no drawing abilities of its own. All drawing must be done inside a
JavaScript using the context object
For example:
1 <script type="text/javascript">
2 var c=document.getElementById("myCan");
3 var ctx=c.getContext("2d");
4 ctx.fillStyle="#FF0000";
5 ctx.fillRect(60,60,120,80);
6 </script>
clearRect(x, y, width, height): Clears the specified rectangular area, making it fully
transparent
lineTo(x, y): Draws a line from the current drawing position to the position specified by x and y
arc(x, y, r, sAngle, eAngle, anticlockwise) : Draws an arc centered at (x, y) with radius r starting
at sAngle and ending at eAngle going anticlockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius) : Draws an arc with the given control points and radius, connected
to the previous point by a straight line
createLinearGradient(x1, y1, x2, y2): Creates a linear gradient object with a starting point of (x1,
y1) and an end point of (x2, y2).
createRadialGradient(x1, y1, r1, x2, y2, r2) : Creates a radial gradient. The parameters represent
two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2,
y2) with a radius of r2.
fillText(text, x, y [, maxWidth]): Fills a given text at the given (x,y) position. Optionally with a
maximum width to draw.
strokeText(text, x, y [, maxWidth]): Strokes a given text at the given (x,y) position. Optionally
with a maximum width to draw.
SVG stands for Scalable Vector Graphics it defines vector-based graphics using HTML
elements. SVG graphics do NOT lose any quality if they are zoomed or resized
Syntax:
</svg>
The new input types provided by HTML5 for forms which make the form more interactive and
provide user experience are email: enter a valid email id, tel: enter a phone number with a
specific format, URL: enter a valid URL, search: text field to enter a search keyword, Date: a
drop-down calendar which allows the user to select a date, DateTime: select a date and time
along with time zone, DateTime-local: user can select a local date and time, time: user can
enter time, week: enables the user to select a week and year from a drop-down calendar,
month: enables the user to select a month and year from a drop-down calendar, range:
slider for a range of values, number: enter numeric values with increase and decrease bar
and colour: enables colour using a colour picker.
The full form of MathML is Mathematics Markup Language; it is not a programming language.
It is used to illustrate the mathematical equation or expression in web browsers like other
HTML elements.
The MathML can be used to describe Matrix form, Partial Differential Equation and Chemical
Reaction Equation.
HTML5 server-sent event is a feature that creates a unidirectional and constant connection
between a web page and server.
SSE is unidirectional data delivery from the server-side to the client which is the browser. It
allows a web page to hold an open connection to a server that can send a new response
automatically at any time, there’s no need to reconnect again to run the same server script
from scratch again.
To use SSE in an application is added using <eventsource> element to the document which
has a src attribute that points to an URL that sends a data stream containing the events.
A web worker is basically a thread executing a JavaScript file. Webworkers make it possible to
execute a JavaScript file asynchronously and autonomously. It helps achieve multithreading
in your web applications
54. What is the usage of a novalidate attribute for the form tag that
is introduced in HTML5?
novalidate is a Boolean attribute used with <form> element that specifies that the form-
data should not be validated when submitting the form i.e., specifying validation to be
disabled for form.
Vector images are made up of points, lines, and curves that can be scaled infinitely without
the loss of image quality. Vector programs include CorelDRAW, Adobe Illustrator, and
Inkscape. Vector graphics can be chosen while designing a logo.
Raster images are made up of a set grid of dots called pixels, where each pixel is assigned a
colour value. Raster images are resolution-dependent. When you change the size of a raster
image, you shrink or stretch the pixels will result in a significant loss of clarity and generate
blurry images. Raster programs include Adobe Photoshop and GIMP. Raster programs are
chosen while designing a website, app, icon, banner ad, or any other design considered for
electronic use.
A manifest file is a simple text file that tells the browser to cache a few files or web pages so
that they can be used even in offline mode. Caching is done by adding manifest attributes in
<html> tag to cache web pages.
NETWORK: This section of manifest gives a list of all the resources that will never be cached.
The resources need a connection to the server and can’t be used in offline mode.
FALLBACK:This section of manifest gives a lists the fallback resources that can be used in case
a page is not accessible due to any reason. It provides a resource that will be replaced in
case of server connection failure.
Web components are web platform and the APIs that encapsulate your HTML,CSS and JS and
enable you to create new custom, reusable code that can be used anywhere in web sites.
The web component is supported across all browsers. All JS frameworks and libraries that
work with HTML can be used to work with encapsulated HTML tags.
The web component model, provides the following four main specifications for the creation of
useful HTML components:
Custom Elements: helps in designing and using new types of DOM elements.
Shadow DOM: describes how to use encapsulated style and markup in web components.A
set of JavaScript APIs for adding DOM elements
HTML Templates: are fragments of markup templates that do not appear on the displayed
page and can be used later on a runtime.
Web components reduce the amount of work in developing projects greatly, and provide a
versatile code structure. It is a universal framework for the simple and combined reuse of
HTML, CSS and JavaScript code.
So, these were the html5 interview questions that can help you have a fine chance of
qualifying for your interview, but ultimately, the final results will be governed by your depth of
preparation and clarity of concept. Hope these html5 interview questions will help you fetch
good news for yourself! Best of luck!
If you wish to learn more such concepts, you can join Great Learning Academy’s free online
courses and upskill today!
This brings us to the end of the blog on HTML Interview Questions and HTML5 Interview
Questions. We hope you are now well-equipped with the kind of questions that may be asked
during an Interview. Wondering where to learn the highly coveted in-demand skills for free?
Check out the courses on Great Learning Academy.
Sharing is caring:
Great Learning
Great Learning's Blog covers the latest developments and innovations in technology
that can be leveraged to build rewarding careers. You'll find career guides, tech
tutorials and industry news to keep yourself updated with the fast-changing world of
tech and business.