Scribd
Upload
742 views

HTML Interview Questions

The document provides a list of 38 HTML interview questions and answers covering topics like basic HTML tags and attributes, lists, links, images, forms and advanced topics like style sheets, applets and HTML5 canvas element. The questions get progressively more difficult moving from beginner to intermediate to advanced levels.

Uploaded by

SandeepRao
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
742 views

HTML Interview Questions

The document provides a list of 38 HTML interview questions and answers covering topics like basic HTML tags and attributes, lists, links, images, forms and advanced topics like style sheets, applets and HTML5 canvas element. The questions get progressively more difficult moving from beginner to intermediate to advanced levels.

Uploaded by

SandeepRao
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 42

HTML Interview Question Prof.

Sandeep Rao 8959490369

HTML INTERVIEW QUESTION

HTML Beginners Interview Questions


1. Define HTML.
HTML stands for HyperText Markup Language. HTML is a standard text formatting
language that creates and displays a variety of pages on the web.

2. What are the components of HTML?

HTML consists of two components: the first is the content, and the second is the tag.
Together, they help display pages with the required information.

3. Define HTML tags.


HTML tags help place content in a proper format. Tags are opened and closed with
< and > respectively. / is also used in the closing tag. For example:

<head>

</head>

4. Are all HTML tags applied in pairs?


No. The HTML tags are not always applied in pairs because some don’t need a
closing tag. For instance, for the <img> tag, the closing tags are not required.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

5. Define the standard list that is referred to while designing a page.


The standard list that is referred to while designing a page includes any or
combination of the following:

1. Menu list
2. Directory list
3. Ordered list
4. Unordered list
5. Definition list

6. Why do characters display incorrectly on all systems?


In some cases, the browser running does not support the character, and thus the
character is displayed as boxes. 

Intermediate Level HTML Interview Questions 


7. Define an image map.
An image map helps link different kinds of web pages using a single image. The
image map can be used for defining shapes in the images that are made part of the
image mapping process.

8. What is white space?


White space is the empty sequence of space characters. This white space is
considered a single space character in the HTML. White space helps the browser
collapse multiple spaces into one single space, and thereby the indent lines of the
text can be taken care of conveniently.

9. Can some attribute value best to predefined values?


Yes, some attribute values can be set to predefined values, but other attributes can
accept any kind of numerical value, which represents the pixel size.

10. How can we create links to different sections within the same web
page?
We can create several links to different sections within the same web page by using
the <a> tag along and using the # symbol.

11. Can we keep list elements straight in the HTML file?

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

Yes, we can keep list elements straight in the HTML file by using indents. The indent
can also be used for the sub-nested list for the parent list that contains it for creating
more lists and elements.

12. Which is the web page that is printed and pointed mostly as the
web address in the magazine?
The top-level page is the most popular web page that is printed and pointed mostly
as the web address in the magazine because it helps users browse all other pages
on the website from the same link.

13. Why do we use alternate text in the image mapping?


Alternate text is used to apply descriptive text to each of the hotspot links.

14. Can HTML files work well on the new browser?


Of course, the HTML files could work on a new browser, but the new browser must
be compliant with the HTML standards. It may be possible that new browsers do not
support the features of HTML and therefore won’t work well.

15. Do you think that the hyperlink only applies to the text-only?
No, the hyperlink does not apply to the text-only but also to the images. This means
that we can convert an image into a link that can allow the users to gain access to
another page when clicked on it.

16. How can symbols be represented in case the user’s operating


system does not support a character?
Symbols can be represented in the form of an image instead.

17. What are the two attributes of the number type in the middle of a
list?
The two attributes of the number type in the middle of a list include the type and
value. The type attribute is used to change the numbering type for any list item, while
the value attribute is used for changing the number index for any list item.

18. What is the purpose of a style sheet?


A style sheet helps create a well-defined template that is both consistent and
transportable. These style sheet templates can be linked to various web pages,
which makes it easier to maintain and change the look of the web page.

19. What are the different list types of the ordered list?
The different list types of the ordered list include roman numerals and alphabetical.
On the other hand, the unordered list attributes can be set through circle, square, or
disc.

20. How do we create colored text on a webpage?


By using the <font color=“color”> tags for the text where the color needs to be
applied.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

21. What are the advantages of grouping several checkboxes?


There are several advantages to grouping several checkboxes. These include:

1. Organizing checkboxes.
2. Applying particular names on the checkbox buttons to differentiate them easily
from a group.
3. Supporting the creation of a different group of checkboxes on a single
webpage with different names.

22. How does overlapping affect the sets of tags?


An overlapping set of tags in the HTML results in the recognition of only the first tag.
Such issues occur only when the text does not display on the browser screen.

23. What is the limit to a text field size?


The limit is 13 characters. The size attribute can be set to as low as 1.

Advanced HTML Interview Questions


24. Define Applets.
Applets are small programs that are embedded with web pages so that they can
perform particular functions, including animation, information processing, and even
computation. Applets are written using the Java language.

25. Where can you specify colors for table borders?


The specification of color for table borders can be made in the style sheet, and in its
absence, the same color as the text will apply.

26. Can style sheets help align images and wrap text?
Yes, the style sheet can apply tables to position text and images to align them.

27. How do you change the color of bullets?


The color of bullets is usually the color of the first character in the list. However, if
you change the color of the first character with the set of <font> tags, then the bullet
color and first character color from the text will change.

28. How is the maximum size value determined?


The maximum size value can be determined by the browser width.

29. What happens if the size attribute is set to zero?


If the size attribute is set to zero, then the size will be set to the default size of 13
characters.

30. What are the similarities between the border and rule attributes?
If the border attribute is set to a non-zero value, then the default cell borders with the
thickness of one pixel will be added automatically. Similarly, if the rule attribute is

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

added to the <table> tag, then the border attribute will not be included, and the
default one-pixel border will be set and appear on the screen.

31. What is a Marquee and how is it applied?


A Marquee helps set scrolling text on the web page. To apply a marquee, you use
the <marquee> tag.

32. Can the text appear outside the browser?


By default, the text cannot appear outside the browser, but, in case the text is part of
a table cell with a predefined width, it could extend beyond the browser window.

33. Can the stylesheet limit the number of style definitions?


No, the style sheets do not limit the number of style definitions for a given selector,
which can be included within the brackets. However, every new style definition
needs to be separated from others using the semicolon symbol.

34. Is there a hierarchy that is followed on the style sheets?


Yes, there is a hierarchy that is followed on the style sheet, which includes three
different style definitions. The first definition, which is closest to the actual tag, takes
precedence. The second definition, which is the inline style, takes priority over the
embedded style sheet. The third definition is the external style sheets, which take
priority over the others.

35. Can we group various selectors with different class names?


Yes, we can group the various selectors with different class names and the same
style definition by using commas.

36. Can the external CSS file be opened in the browser?


No, the external CSS file cannot be opened in the browser because the file has a
different extension. However, it can be opened only with <link> tag within the HTML
document.

37. Can the list-style-type property affect the paragraph?


No, the list-style-type property cannot affect the paragraph, and will ignore this non-
list element.

38. Define the Canvas element?


A canvas element supports the creation of charts and graphs. It helps create 2D
images that can be placed directly through the HTML5 code.

HTML Coding Interview Questions and Answers


39. Write a program to create nested web pages in HTML.
A webpage inside of another is a nested webpage. It is done using the iframe tag
which creates an inline frame. 

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<!DOCTYPE html>

<html>

<body>

<h2>HTML Iframes example</h2>

<p>Use the height and width attributes to specify the size of the iframe:</p>

<iframesrc="https://hackr.io/"height="400"width="600"></iframe>

</body>

</html>

40. Explain SVG with HTML code.


HTML SVG is a two-dimensional vector and vector/raster graphics. SVG images and
their behaviors are defined in XML text files. It is used for vector diagrams like pie
charts and 2-dimensional graphs in an X, Y coordinate system.

<!DOCTYPE html>

<html>

<body>

<h2>HTML SVG example</h2>

<svg width="400" height="400">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />

</svg>

</body>

</html>

41. Explain the button tag with the help of code.


The button tag lets you create a clickable button in the HTML form on the webpage. 

<!DOCTYPE html>

<html>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<body>

<h2>HTML Button Tag Example</h2>

<button name="button" type="button">CLICK ME</button>

</body>

</html>

42. What are the different types of headings in HTML?

<!DOCTYPE html>

<html>

<head>

<style>

h1{

color: red;

h2{

color: blue;

h3{

color: green;

h4{

color: purple;

h5{

color: yellow;

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

h6{

color: orange;

</style>

</head>

<body>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

</body>

43. Explain the script tag.


The script tag embeds client-side script. It can be inside the head or body tag of the
HTML code. This tag is executed when the browser reaches that part of the
document.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Script Tag Example</h2>

<script>

var x = 5;

var y = 6;

var result = x + y;

alert("X + Y is equal to " + result);

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

</script>

</body>

</html>

44. How do you insert an image in a HTML webpage?

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image Example</h2>

<img src="tulip.jpeg">

</body>

</html>

45. How do you insert an Emoji in a web page?

<!DOCTYPE html>

<html>

<body>

<h2>HTML Emoji Example</h2>

<p>&#128512;</p>

</body>

</html>

46. Explain HTML forms.


Forms are designed to get user input which can later be sent to the server for
processing. Input can be given as text or in the form of radio buttons and can be
submitted by clicking the submit button.

<!DOCTYPE html>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<html>

<body>

<h2>HTML Form Example</h2>

<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>

<p> </p>

<form>

<input type="radio"id="male"name="gender"value="male">

<label for="male">Male</label><br>

<input type="radio"id="female"name="gender"value="female">

<label for="female">Female</label><br>

<input type="radio"id="other"name="gender"value="other">

<label for="other">Other</label>

<br> </br>

<inputtype="submit"value="Submit">

</form>

</body>

</html>

47. How are hyperlinks inserted in a web page?


Hyperlinks are defined with the HTML <a> tag.

<!DOCTYPE html>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<html>

<body>

<h2>HTML Hyperlink Example</h2>

<a href="url">link text</a>

</body>

</html>

48. How do you add color to text?

<!DOCTYPE html>

<html>

<body>

<h2>HTML Color Text Example</h2>

<h1 style="color:Tomato;">Hello HTML</h1>

<p style="color:DodgerBlue;">Line 1</p>

<p style="color:MediumSeaGreen;">Line 2</p>

</body>

</html>

49. Explain ordered and unordered lists.


An unordered list is written with the <ul> tag and each element of the list is with a
<li> tag. The list items are displayed as bullets. 
An ordered list is written between <ol> tag and each element of the list is written with
a <li> tag. The list items are displayed as numbers. 

<!DOCTYPE html>

<html>

<body>

<h2>HTML List Example</h2>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

50. Explain Description Lists.


The description list allows us to add a description to each element of the list. 
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term. 

<!DOCTYPE html>

<html>

<body>

<h2>HTML Description List xample</h2>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

</dl>

</body>

</html>

51. Define and implement the alt attribute. 


If an image cannot be displayed, the alt attribute specifies the alternate text to be
displayed instead.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Alt Example</h2>

<img src="tulip.jpeg"alt= "Tulip Garden">

</body>

</html>

HTML Interview Questions and Answers


1. Are the HTML tags and elements the same thing?

No. HTML elements are defined by a starting tag, may contain some content and a
closing tag.For example, <h1>Heading 1</h1> is a HTML element but just <h1> is
a starting tag and </h1> is a closing tag.

2. What are tags and attributes in HTML?

Tags are the primary component of the HTML that defines how the content will be
structured/ formatted, whereas Attributes are used along with the HTML tags to
define the characteristics of the element. For example, <p align=” center”>Interview

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

questions</p>, in this the ‘align’ is the attribute using which we will align the
paragraph to show in the center of the view.

3. What are void elements in HTML?

HTML elements which do not have closing tags or do not need to be closed are
Void elements. For Example <br />, <img />, <hr />, etc.

You can download a PDF version of Html Interview Questions.


Download PDF

4. What is the advantage of collapsing white space?

In HTML, a blank sequence of whitespace characters is treated as a single space


character, Because the browser collapses multiple spaces into a single space
character and this helps a developer to indent lines of text without worrying about
multiple spaces and maintain readability and understandability of HTML codes.

5. What are HTML Entities?

In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in
our webpage we need to use the character entities called HTML Entities. Below are
a few mapping between the reserved character and its respective entity character
to be used.

Character Entity Name Entity Number


< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
(non-breaking space) Eg. 10 &nbsp; Eg.
&#160;
PM <p>10&nbsp&nbspPM</p>

6. What are different types of lists in HTML?

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

7. What is the ‘class’ attribute in HTML?

The class attribute is used to specify the class name for an HTML element. Multiple
elements in HTML can have the same class value. Also, it is mainly used to associate
the styles written in the stylesheet with the HTML elements.

8. What is the difference between the ‘id’ attribute and the ‘class’
attribute of HTML elements?

Multiple elements in HTML can have the same class value, whereas a value of id
attribute of one element cannot be associated with another HTML element.

9. Define multipart form data?

Multipart form data is one of the values of the enctype attribute. It is used to send
the file data to the server-side for processing. The other valid values of the enctype
attribute are text/plain and application/x-www-form-urlencoded.

10. Describe HTML layout structure.

Every web page has different components to display the intended content and a
specific UI. But still, there are few things which are templated and are globally
accepted way to structure the web page, such as:

 <header>: Stores the starting information about the web page.


 <footer>: Represents the last section of the page.
 <nav>: The navigation menu of the HTML page.
 <article>: It is a set of information.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

 <section>: It is used inside the article block to define the basic structure of a
page.
 <aside>: Sidebar content of the page.

11. How to optimize website assets loading?

To optimize website load time we need to optimize its asset loading and for that:

 CDN hosting - A CDN or content delivery network is geographically


distributed servers to help reduce latency.
 File compression - This is a method that helps to reduce the size of an asset
to reduce the data transfer
 File concatenation - This reduces the number of HTTP calls
 Minify scripts - This reduces the overall file size of js and CSS files
 Parallel downloads - Hosting assets in multiple subdomains can help to
bypass the download limit of 6 assets per domain of all modern browsers.
This can be configured but most general users never modify these settings.
 Lazy Loading - Instead of loading all the assets at once, the non-critical
assets can be loaded on a need basis.

12. What are the various formatting tags in HTML?

 HTML has various formatting tags:

 <b> - makes text bold


 <i> - makes text italic
 <em> - makes text italic but with added semantics importance
 <big> - increases the font size of the text by one unit
 <small> - decreases the font size of the text by one unit
 <sub> - makes the text a subscript
 <sup> - makes the text a superscript
 <del> - displays as strike out text
 <strong> - marks the text as important
 <mark> - highlights the text
 <ins> - displays as added text

13. What are the different kinds of Doctypes available?

The three kinds of Doctypes which are available:

 Strict Doctype 
 Transitional Doctype
 Frameset Doctype

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

14. Please explain how to indicate the character set being used by a
document in HTML?

The character set is defined in <meta> tag inside <head> element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
...
...
</head>
...
</html>

15. What is the difference between <strong>, <b> tags and <em>,
<i> tags?

The effect on a normal webpage of the tags <strong>, <b>  and <em>, <i> is the
same. <b> and <i> tags stands for bold and italic. These two tags only apply font
styling and bold tag <b>, just adds more ink to the text, these tags don't say
anything about the text.

Whereas, <strong> and <em> tags represent that the span of text is of strong
importance or more importance and emphatic stress respectively than the rest of
the text. These tags have semantic meaning.

16. What is the significance of <head> and <body> tag in HTML?

<head> tag provides the information about the document. It should always be
enclosed in the <html> tag. This tag contains the metadata about the webpage
and the tags which are enclosed by head tag like <link>, <meta>, <style>,
<script>, etc. are not displayed on the web page. Also, there can be only 1 <head>
tag in the entire Html document and will always be before the <body> tag.

<body> tag defines the body of the HTML document. It should always be enclosed
in the <html> tag. All the contents which needs to be displayed on the web page
like images, text, audio, video, contents, using elements like <p>, <img>, <audio>,
<heading>, <video>, <div>, etc. will always be enclosed by the <body> tag. Also,
there can be only 1 body element in an HTML document and will always be after
the <head> tag.

17. Can we display a web page inside a web page or Is nesting of


webpages possible?

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

Yes, we can display a web page inside another HTML web page. HTML provides a
tag <iframe> using which we can achieve this functionality.

<iframe src=”url of the web page to embed” />

18. How is Cell Padding different from Cell Spacing?

Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell
Padding is the space or gap between the text/ content of the cell and the edge/
border of the cell. Please refer to the above figure example to find the difference.

19. How can we club two or more rows or columns into a single row
or column in an HTML table?

HTML provides two table attributes “rowspan” and “colspan” to make a cell span to
multiple rows and columns respectively.

20. Is it possible to change an inline element into a block level


element?

Yes, it is possible using the “display” property with its value as “block”, to change
the inline element into a block-level element.

21. In how many ways can we position an HTML element? Or what are
the permissible values of the position attribute?

There are mainly 7 values of position attribute that can be used to position an
HTML element:

1. static: Default value. Here the element is positioned according to the normal
flow of the document.
2. absolute: Here the element is positioned relative to its parent element. The
final position is determined by the values of left, right, top, bottom.
3. fixed: This is similar to absolute except here the elements are positioned
relative to the <html> element.
4. relative: Here the element is positioned according to the normal flow of the
document and positioned relative to its original/ normal position.
5. initial: This resets the property to its default value.
6. inherit: Here the element inherits or takes the property of its parent.

22. In how many ways you can display HTML elements?

1. inline: Using this we can display any block-level element as an inline


element. The height and width attribute values of the element will not affect.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

2. block: using this, we can display any inline element as a block-level element. 
3. inline-block: This property is similar to inline, except by using the display as
inline-block, we can actually format the element using height and width
values.
4. flex: It displays the container and element as a flexible structure. It follows
flexbox property.
5. inline-flex: It displays the flex container as an inline element while its
content follows the flexbox properties.
6. grid: It displays the HTML elements as a grid container.
7. none: Using this property we can hide the HTML element.

Below are some of the display types which are rarely used:

1. table
2. inline-table
3. table-cell
4. table-column
5. table-row
6. inline-grid
7. list-item
8. inherit
9. initial
10. table-caption

23. What is the difference between “display: none” and “visibility:


hidden”, when used as attributes to the HTML element.

When we use the attribute “visibility: hidden” for an HTML element then that
element will be hidden from the webpage but still takes up space. Whereas, if we
use the “display: none” attribute for an HTML element then the element will be
hidden, and also it won’t take up any space on the webpage.

24. How to specify the link in HTML and explain the target attribute?

HTML provides a hyperlink - <a> tag to specify the links in a webpage. The ‘href’
attribute is used to specify the link and the ‘target’ attribute is used to specify,
where do we want to open the linked document. The ‘target’ attribute can have the
following values:

1. _self: This is a default value. It opens the document in the same window or
tab as it was clicked.
2. _blank: It opens the document in a new window or tab.
3. _parent: It opens the document in a parent frame.
4. _top: It opens the document in a full-body window.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

25. In how many ways can we specify the CSS styles for the HTML
element?

There are three ways in which we can specify the styles for HTML elements:

 Inline: Here we use the ‘style’ attribute inside the HTML element.
 Internal: Here we use the <style> tag inside the <head> tag. To apply the
style we bind the elements using ‘id’ or ‘class’ attributes.
 External: Here we use the <link> tag inside <head> tag to reference the
CSS file into our HTML code. Again the binding between elements and styles
is done using ‘id’ or ‘class’ attributes.

26. Difference between link tag <link> and anchor tag <a>?

The anchor tag <a> is used to create a hyperlink to another webpage or to a


certain part of the webpage and these links are clickable, whereas, link tag <link>
defines a link between a document and an external resource and these are not
clickable.

27. How to include javascript code in HTML?

HTML provides a <script> tag using which we can run the javascript code and make
our HTML page more dynamic.

<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="demo"></span></u>
</h1>
<script>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

document.getElementById("demo").innerHTML = "script Tag"


</script>
</body>
</html>

28. When to use scripts in the head and when to use scripts in the
body?

If the scripts contain some event-triggered functions or jquery library then we


should use them in the head section. If the script writes the content on the page or
is not inside a function then it should be placed inside the body section at the
bottom. In short, follow below three points:

1. Place library scripts or event scripts in the head section.


2. Place normal scripts that do not write anything on the page, in the head
section until there is any performance issue.
3. Place scripts that render something on the web page at the bottom of the
body section.

29. What are forms and how to create forms in HTML?

The HTML form is used to collect the user inputs. HTML provides a <form> tag to
create forms. To take input from the user we use the <input> tag inside the form
so that all collected user data can be sent to the server for processing. There are
different input types like ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’, ‘submit’
etc.

<form action="/submit_data.php">
<label>Enter your name: </label>
<input type="text" name="name" />
<label>Enter Mobile number </label>
<input type="number" name="mobile_no"/>
<input type="submit" value="Submit">
</form>

30. How to handle events in HTML?

HTML allows event trigger actions in browsers using javascript or JQuery. There are
a lot of events like ‘onclick’, ‘ondrag’, ‘onchange’, etc.

<!DOCTYPE html>
<html>
<body style="padding-top:50px">
<h3 id="event_demo">0</h3>
<input type="button" onclick="myFunction()" value="Click Me" />
<input type="reset" onclick="reset()" value="Reset" />
</body>

<script>
function myFunction() {

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

var value = document.getElementById("event_demo").innerHTML


value = parseInt(value) + 1;
document.getElementById("event_demo").innerHTML = value;
}
function reset() {
document.getElementById("event_demo").innerHTML = 0;
}
</script>
</html>

HTML5 Interview Questions


31. What are some of the advantages of HTML5 over its previous
versions?

Some advantages of HTML5 are:-

 It has Multimedia Support.


 It has the capabilities to store offline data using SQL databases and
application cache.
 Javascript can be run in the background.
 HTML5 also allows users to draw various shapes like rectangles, circles,
triangles, etc.
 Included new Semantic tags and form control tags.

32. How can we include audio or video in a webpage?

HTML5 provides two tags: <audio> and <video> tags using which we can add the
audio or video directly in the webpage.

33. Inline and block elements in HTML5?

Inline Block
Inline elements just take up the space
that is absolutely necessary for the Block elements start on a new line and
content and does not start from a new consume the full width of the page available.
line. Example:- <div>, <p>, <header>, <footer>,
Example:- <span>, <a>, <strong>, <h1>...<h6>, <form>, <table>, <canvas>,
<img>, <button>, <em>, <select>, <video>, <blockquote>, <pre>, <ul>, <ol>,
<abbr>, <label>, <sub>, <cite>, <figcaption>, <figure>, <hr>, <article>,
<abbr>, <script>, <label>, <i>, <section>, etc.
<input>, <output>, <q>, etc.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

34. What is the difference between <figure> tag and <img> tag?

The <figure> tag specifies the self-contained content, like diagrams, images, code
snippets, etc. <figure> tag is used to semantically organize the contents of an
image like image, image caption, etc., whereas the <img> tag is used to embed the
picture in the HTML5 document.

35. How to specify the metadata in HTML5?

To specify we can use <meta> tag which is a void tag,i.e., it does not have a closing
tag. Some of the attributes used with meta tags are name, content, http-equiv, etc.
The below image tells how to specify the metadata.

36. Is the <datalist> tag and <select> tag same?

No. The <datalist> tag and <select> tag are different. In the case of <select> tag a
user will have to choose from a list of options, whereas <datalist> when used along
with the <input> tag provides a suggestion that the user selects one of the options
given or can enter some entirely different value.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

37. Define Image Map?

Image Map lets a developer map/link different parts of images with the different
web pages. It can be achieved by the <map> tag in HTML5, using which we can link
images with clickable areas.

<img src=”image_url” , usemap=”#workspace” />


<map name=”workspace”>
<area shape=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />
<area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />
</map>

38. What are Semantic Elements?

Semantic elements are those which describe the particular meaning to the browser
and the developer. Elements like <form>, <table>, <article>, <figure>, etc., are
semantic elements.

39. Convert the below data into Tabular format in HTML5?

S.no., Language, Mostly used for

1, HTML, FrontEnd

2, CSS, FrontEnd

3, Python, BackEnd

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

40. What is the difference between <meter> tag and <progress> tag?

<progress> tag should be used when we want to show the completion progress of
a task, whereas if we just want a scalar measurement within a known range or
fraction value. Also, we can specify multiple extra attributes for <meter> tags like
‘form’, ‘low’, ‘high’, ‘min’, etc.

41. Is drag and drop possible using HTML5 and how?

Yes, in HTML5 we can drag and drop an element. This can be achieved using the
drag and drop-related events to be used with the element which we want to drag
and drop.

42. Difference between SVG and Canvas HTML5 element?

SVG Canvas
It is Raster based i.e., composed
SVG is a vector based i.e., composed of shapes. 
of pixels.
Canvas works better with a
SVG works better with a larger surface.
smaller surface.
Canvas can only be modified
SVG can be modified using CSS and scripts.
using scripts.
SVG is highly scalable. So we can print at high
It is less scalable.
quality with high resolution.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

43. What type of audio files can be played using HTML5?

HTML5 supports the following three types of audio file formats:

1. Mp3
2. WAV
3. Ogg

44. What are the significant goals of the HTML5 specification?

These were the target area of the HTML5 specs:

 Introduction of new element tags to better structure the web page such as
<header> tag.
 Forming a standard in cross-browser behavior and support for different
devices and platforms
 Backward compatible with the older version HTML web pages
 Introduction of basic interactive elements without the dependency of plugins
such as <video> tag instead of the flash plugin.

45. Explain the concept of web storage in HTML5.

This web storage helps in storing some of the static data in the local storage of the
browser so that we do not need to fetch it from the server every time we need it.
There is a size limit based on different browsers. This helps in decreasing the load
time and a smooth user experience. There are two types of web storage that are
used to store data locally in HTML5:

 Local Storage - This helps in storing data that will be retained even though
the user reopens the browser. It is stored for each webapp on different
browsers.
 Session Storage - This is used for one session only. After the user closes the
browser this gets deleted.

46. What is Microdata in HTML5?

It is used to help extract data for site crawlers and search engines. It is basically a
group of name-value pairs. The groups are called items, and each name-value pair
is a property. Most of the search engines like Google, Microsoft, Yandex, etc follow
schema.org vocabulary to extract this microdata.

<div itemscope itemtype="http://schema.org/SoftwareApplication">


<span itemprop="name">Interviewbit Games</span> -
REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
<link itemprop="applicationCategory"
href="http://schema.org/GameApplication"/>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<div itemprop="aggregateRating" itemscope


itemtype="http://schema.org/AggregateRating">
RATING:
<span itemprop="ratingValue">4.6</span> (
<span itemprop="ratingCount">8864</span> ratings )
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: Rs.<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="INR" />
</div>
</div>

 itemid – The unique, global identifier of an item.


 itemprop – Used to add properties to an item.
 itemref – Provides a list of element ids with additional properties.
 itemscope – It defines the scope of the itemtype associated with it.
 itemtype – Specifies the URL of the vocabulary that will be used to define
itemprop.

The above example will be parsed by Google as

47. Which tag is used for representing the result of a calculation?


Explain its attributes.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

The <output> tag is used for representing the result of a calculation. It has the
following attributes:

 for - It defines the relationship between the elements used in calculation


and result.
 form - This is used to define the form the output element belongs to.
 name - The name of the output element.

<form oninput = "result.value=parseInt(n1.value)+parseInt(n2.value)">


<input type = "number" name = "n1" value = "1" /> +
<input type = "number" name = "n2" value = "2" /><br />
The output is: <output name = "result"></output>
</form>

The above example looks like

48. What is new about the relationship between the <header> and
<h1> tags in HTML5?

As HTML5 was all about better semantics and arrangements of the tags and
elements, the <header> tag specifies the header section of the webpage. Unlike in
previous version there was one <h1> element for the entire webpage, now this is
the header for one section such as <article> or <section>. According to the HTML5
specification, each <header> element must at least have one <h1> tag.

49. Explain HTML5 Graphics.

HTML5 supports two kinds of graphics:

 Canvas - It is like drawing on a whitepaper or a blank webpage. We can add


different graphic designs on web pages with available methods for drawing
various geometrical shapes.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas width="300" height="100" style="border:2px solid;"></canvas>
</body>
</html>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

 SVG - Scalable Vector Graphics are used mostly for diagrams or icons. It
follows the XML format.

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:#FFF;stroke-
width:2;stroke:#000" />
</svg>
</body>
</html>

Both of the above examples produce this output and represent two different
approaches provided by HTML5 to implement graphical aspects in the webpage.

50. Explain new input types provided by HTML5 for forms?

Following are the significant new data types offered by HTML5:

 Date - Only select date by using type = "date"


 Week - Pick a week by using type = "week"
 Month - Only select month by using type = "month"
 Time - Only select time by using type = "time".
 Datetime - Combination of date and time by using type = "datetime"
 Datetime-local - Combination of  date and time by using type = "datetime-
local." but ignoring the timezone
 Color - Accepts multiple colors using type = "color"
 Email - Accepts one or more email addresses using type = "email"
 Number - Accepts a numerical value with additional checks like min and max
using type = "number"
 Search - Allows searching queries by inputting text using type = "search"
 Tel - Allows different phone numbers by using type = "tel"
 Placeholder - To display a short hint in the input fields before entering a
value using type = "placeholder"
 Range - Accepts a numerical value within a specific range using type =
"range"
 Url - Accepts a web address using type = "url”

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<form>
<div>
<label>Date:</label>
<input type="date" id="date" />
<br>
<label>Week:</label>
<input type="week" id="week" />
<br>
<label>Month:</label>
<input type="month" id="month" />
<br>
<label>Time:</label>
<input type="time" id="time" />
<br>
<label>Datetime:</label>
<input type="datetime" id="datetime" />
<br>
<label>Datetime Local:</label>
<input type="datetime-local" id="datetime-local" />
<br>
<label>Color:</label>
<input type="color" id="color"/>
<br>
<label>Email:</label>
<input type="email" id="email" placeholder="email address" />
<br>
<label>Number:</label>
<input type="number" id="number" />
<br>
<label>Search:</label>
<input type="search" id="search" />
<br>
<label>Phone:</label>
<input type="tel" id="phone" placeholder="Phone Number"
pattern="\d{10}$" />
<br>
<label>Range:</label>
<input type="range" id="range" />
<br>
<label>URL:</label>
<input type="url" id="url"/>
</div>
</form>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

51. What are the New tags in Media Elements in HTML5?

 <audio> - Used for sounds, audio streams, or music, embed audio content
without any additional plug-in.
 <video> - Used for video streams, embed video content etc.
 <source> - Used for multiple media resources in media elements, such as
audio, video, etc.
 <embed> - Used for an external application or embedded content.
 <track> - Used for subtitles in the media elements such as video or audio.

<label>
Video:
</label>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en"
label="English">
</video>
<br>
<label>
Embed:
</label>
<embed type="video/webm"
src="https://www.youtube.com/embed/MpoE6s2psCw" width="400" height="300">
<br>
<label>
Audio:
</label>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

52. Why do you think the addition of drag-and-drop functionality in


HTML5 is important? How will you make an image draggable in
HTML5?

The drag and drop functionality is a very intuitive way to select local files. This is
similar to what most of the OS have copy functionality thus making it very easy for
the user to comprehend. Before the native drag and drop API, this was achievable
by writing complex Javascript programming or external frameworks like jQuery.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

To enable this functionality there is a draggable attribute in the <img> tag and
need to set ondrop and ondragover attribute to an eventhandler available in
scripts.

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
...
}
</script>
</head>
<body>
...
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"
style="border: 1px solid #aaaaaa; width:350px; height: 70px;"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" width="336"
height="69">
...
</body>
</html>

53. Why do we need the MathML element in HTML5?

MathML stands for Mathematical Markup Language. It is used for displaying


mathematical expressions on web pages. For this <math> tag is used.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<math>
<mrow>
<mrow>
<msup>
<mi> a </mi>
<mn> 2 </mn>
</msup>
<mo> + </mo>
<msup>
<mi> b </mi>
<mn> 2 </mn>
</msup>
<mo> + </mo>
<mn> 2 </mn>
<mn> a </mn>
<mn> b </mn>
</mrow>
<mo> = </mo>
<mn> 0 </mn>
</mrow>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

</math>
</body>
</html>

This displays the equation a2 + b2 + 2ab = 0.

54. What are the server-sent events in HTML5?

The events pushed from the webserver to the browsers are called server-sent
events. DOM elements can be continuously updated using these events. This has a
major advantage over straight-up polling. In polling, there is a lot of overhead since
every time it is establishing an HTTP connection and tearing it down whereas, in
server-sent events, there is one long-lived HTTP connection. To use a server-sent
event, <eventsource> element is used. The src attribute of this element specifies
the URL from which sends a data stream having the events.

<eventsource src = "/cgi-bin/myfile.cgi" />

55. What are Web Workers?

These are added to bring parallelism and async capability. It runs in the background
to do the computationally expensive tasks without yielding to make the page
responsive. It is achieved by starting a separate thread for such tasks. These are not
meant to perform UI operations. There are three types of web workers:

 Dedicated Workers - These are workers that are utilized by a single script.
 Shared Workers -These are workers that are utilized by multiple scripts
running in different windows, IFrames, etc.
 Service Workers - These act as proxy servers between web applications, the
browser, and the network. Mostly used for push notifications and sync APIs.

<p>Count numbers: <output id="result"></output></p>


<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

56. What is the usage of a novalidate attribute for the form tag that is
introduced in HTML5?

Its value is a boolean type that indicates whether or not the data being submitted
by the form will be validated beforehand. By making this false, forms can be
submitted without validation which helps users to resume later also.

<form action = "" method = "get" novalidate>


Name:<br><input type="name" name="sname"><br>
Doubt:<br><input type="number" name="doubt"><br>
<input type="submit" value="Submit">
</form>

57. What are raster images and vector images?

Raster Images - The raster image is defined by the arrangement of pixels in a grid
with exactly what color the pixel should be. Few raster file formats include
PNG(.png), JPEG(.jpg), etc.
Vector Images - The vector image is defined using algorithms with shape and path
definitions that can be used to render the image on-screen written in a similar
markup fashion. The file extension is .svg

58. How to support SVG in old browsers?

To support old browsers instead of defining the resource of svg in src attribute of
<img> tag, it should be defined in srcset attribute and in src the fallback png file
should be defined.

<img src="circle.png" alt="circle" srcset="circle.svg">

59. What are different approaches to make an image responsive?

 Art direction - Using <picture> element the landscape image fully shown in
desktop layout can be zoomed in with the main subject in focus for a
portrait layout.

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

<picture>
<source media="(min-width: 650px)" srcset="img_cup.jpg">
<img src="img_marsh.jpg" style="width:auto;">
</picture>

Bigger Screen (>650px)

For any other screen

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

 Resolution switching - Instead of zoom and crop the images can be scaled
accordingly using vector graphics. Also, this can be further optimized to
serve different pixel density screens as well. 

For example SVG

<svg width="100" height="100">


<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
</svg>

60. What is a manifest file in HTML5?

The manifest file is used to list down resources that can be cached. Browsers use
this information to make the web page load faster than the first time. There are 3
sections in the manifest file

 CACHE Manifest - Files needs to be cached


 Network - File never to be cached, always need a network connection.
 Fallback - Fallback files in case a page is inaccessible

CACHE MANIFEST
# 2012-06-16 v1.0.0
/style.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
<!DOCTYPE HTML>
<html manifest="tutorial.appcache">
...
...
</html>

61. What is the Geolocation API in HTML5?

Geolocation API is used to share the physical location of the client with websites.
This helps in serving locale-based content and a unique experience to the user,

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

based on their location. This works with a new property of the global navigator
object and most of the modern browsers support this.

var geolocation = navigator.geolocation;

62. Write HTML5 code to demonstrate the use of Geolocation API.


<!DOCTYPE html>
<html>
<body>
<p>Click "try it" button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation functionality is not supported by
this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

The above example asks for user permission for accessing the location data via
geolocation API and after clicking the button the coordinates of the physical
location of the client get displayed.

63. Explain Web Components and it’s usage.

These are used to create reusable custom elements which are very difficult in
traditional HTML. It consists of three technologies:

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

 Custom elements - These are JavaScript APIs that help in defining custom
elements and their behavior.
 Shadow DOM - These are JavaScript APIs that attach an encapsulated
shadow DOM tree to an element to keep the element’s features private and
unaffected by other parts.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>composed and composedPath demo</title>
<script src="main.js" defer></script>
</head>
<body>
<h1><code>composed</code> and <code>composedPath</code> demo</h1>
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
</body>
</html>
customElements.define('open-shadow',
class extends HTMLElement {
constructor() {
super();
const pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(pElem);
}
}
);
customElements.define('closed-shadow',
class extends HTMLElement {
constructor() {
super();
const pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
const shadowRoot = this.attachShadow({mode: 'closed'});
shadowRoot.appendChild(pElem);
}
}
);
document.querySelector('html').addEventListener('click', e => {
console.log(e.composed);
console.log(e.composedPath());
});

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

Here 2 custom elements are defined <open-shadow> and <closed-shadow> which


takes their text content and inserts them into a shadow DOM as content of a <p>
element.

 HTML templates - The markup templates are written using <template> and
<slot> elements which can be reused multiple times as the basis of a custom
element's structure.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple template</title>
<script src="main.js"></script>
</head>
<body>
<h1>Simple template</h1>
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p><slot name="my-text">My default text</slot></p>
</template>
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
<my-paragraph>
<ul slot="my-text">
<li>Let's have some different text!</li>
<li>In a list!</li>
</ul>
</my-paragraph>
</body>
</html>
customElements.define('my-paragraph',
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-paragraph');
const templateContent = template.content;
this.attachShadow({mode: 'open'}).appendChild(
templateContent.cloneNode(true)
);
}
}
);
const slottedSpan = document.querySelector('my-paragraph span');
console.log(slottedSpan.assignedSlot);
console.log(slottedSpan.slot);

HTML Interview Question Prof. Sandeep Rao 8959490369


HTML Interview Question Prof. Sandeep Rao 8959490369

HTML Interview Question Prof. Sandeep Rao 8959490369

You might also like