HTML Interview Questions

1. What is HTML?
a. HTML stands for Hyper Text Markup Language. It is a standard text
formatting language used for developing web pages. HTML is a
language that is interpreted by the browser and it tells the browser
what to display and how to display.
2. Can we display a web page inside a web page or Is nesting of webpages
possible?
a. Yes, we can display a web page inside another HTML web page. HTML
provides a tag <iframe> using which we can achieve this functionality.
3. What are tags and attributes in HTML?
a. 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 questions</p>, in this the
‘align’ is the attribute using which we will align the paragraph to show
in the center of the view.
4. What are void elements in HTML?
a. HTML elements which do not have closing tags or do not need to be
closed are Void elements. For Example <br />, <img />, <hr />, etc.
5. What is the advantage of collapsing white space?
a. 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.
6. What are HTML Entities?
a. 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. ( < = &lt; ), ( > =
&gt;) , (& = &amp;) , (non-breaking space) = &nbsp;
7. What are different types of lists in HTML?

a.
8. What is the ‘class’ attribute in HTML?
a. 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.
9. What is the difference between the ‘id’ attribute and the ‘class’ attribute of
HTML elements?
a. 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.
10. Define multipart form data?
a. 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.
11. Describe HTML layout structure.
a. 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:
i. <header>: Stores the starting information about the web page.
ii. <footer>: Represents the last section of the page.
 iii. <nav>: The navigation menu of the HTML page.
iv. <article>: It is a set of information.
v. <section>: It is used inside the article block to define the basic
structure of a page.
vi. <aside>: Sidebar content of the page.
12. How to optimize website assets loading?
a. To optimize website load time, we need to optimize its asset loading
and for that:
i. CDN hosting - A CDN or content delivery network is geographically
distributed servers to help reduce latency.
ii. File compression - This is a method that helps to reduce the size of
an asset to reduce the data transfer
iii. File concatenation - This reduces the number of HTTP calls
iv. Minify scripts - This reduces the overall file size of js and CSS files
v. 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.
vi. Lazy Loading - Instead of loading all the assets at once, the non-
critical assets can be loaded on a need basis.
13. What are the various formatting tags in HTML?
a. HTML has various formatting tags:
i. <b> - makes text bold
ii. <i> - makes text italic
iii. <em> - makes text italic but with added semantics importance
iv. <big> - increases the font size of the text by one unit
v. <small> - decreases the font size of the text by one unit
vi. <sub> - makes the text a subscript
vii. <sup> - makes the text a superscript
viii. <del> - displays as strike out text
ix. <strong> - marks the text as important
x. <mark> - highlights the text
 xi. <ins> - displays as added text
14. What are the different kinds of Doctypes available?
a. The three kinds of Doctypes which are available:
i. Strict Doctype
ii. Transitional Doctype
iii. Frameset Doctype
15. Please explain how to indicate the character set being used by a document
in HTML?
a. The character set is defined in <meta> tag inside <head> element.

16. What is the difference between <strong>, <b> tags and <em>, <i> tags?
a. 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.
17. What is the significance of <head> and <body> tag in HTML?
a. <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.
18. Are the HTML tags and elements the same thing?
a. 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.
19. How is Cell Padding different from Cell Spacing?
a. 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.
20. How can we club two or more rows or columns into a single row or column
in an HTML table?
a. HTML provides two table attributes “rowspan” and “colspan” to make a
cell span to multiple rows and columns respectively.
21. Is it possible to change an inline element into a block level element?
a. Yes, it is possible using the “display” property with its value as “block”,
to change the inline element into a block-level element.
22. In how many ways can we position an HTML element? Or what are the
permissible values of the position attribute?
a. There are mainly 7 values of position attribute that can be used to
position an HTML element:
i. static: Default value. Here the element is positioned according to
the normal flow of the document.
ii. absolute: Here the element is positioned relative to its parent
element. The final position is determined by the values of left,
right, top, bottom.
 iii. fixed: This is similar to absolute except here the elements are
positioned relative to the <html> element.
iv. relative: Here the element is positioned according to the normal
flow of the document and positioned relative to its original/
normal position.
v. initial: This resets the property to its default value.
vi. inherit: Here the element inherits or takes the property of its
parent.
23. In how many ways you can display HTML elements?
a. The ways to display HTML elements:
i. 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.
ii. block: using this, we can display any inline element as a block-level
element.
iii. 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.
iv. flex: It displays the container and element as a flexible structure. It
follows flexbox property.
v. inline-flex: It displays the flex container as an inline element while
its content follows the flexbox properties.
vi. grid: It displays the HTML elements as a grid container.
vii. 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
24. What is the difference between “display: none” and “visibility: hidden”,
when used as attributes to the HTML element?
a. 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.
25. How to specify the link in HTML and explain the target attribute?
a. 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:
i. _self: This is a default value. It opens the document in the same
window or tab as it was clicked.
ii. _blank: It opens the document in a new window or tab.
iii. _parent: It opens the document in a parent frame.
iv. _top: It opens the document in a full-body window.
26. In how many ways can we specify the CSS styles for the HTML element?
a. There are three ways in which we can specify the styles for HTML
elements:
i. Inline: Here we use the ‘style’ attribute inside the HTML element.
ii. Internal: Here we use the <style> tag inside the <head> tag. To
apply the style we bind the elements using ‘id’ or ‘class’ attributes.
iii. 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.
27. Difference between link tag <link> and anchor tag <a>?
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.
28. How to include JavaScript code in HTML?
a. HTML provides a <script> tag using which we can run the JavaScript
code and make our HTML page more dynamic.
29. When to use scripts in the head and when to use scripts in the body?
a. 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:
i. Place library scripts or event scripts in the head section.
ii. Place normal scripts that do not write anything on the page, in the
head section until there is any performance issue.
iii. Place scripts that render something on the web page at the
bottom of the body section.
30. What are forms and how to create forms in HTML?
a. 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.
31. How to handle events in HTML?
a. HTML allows event trigger actions in browsers using JavaScript or
jQuery. There are a lot of events like ‘onclick’, ‘ondrag’, ‘onchange’, etc.
32. https://www.interviewbit.com/html-interview-questions/