HTML

Basic HTML Interview Questions:
1. What is HTML?
o Answer: HTML (HyperText Markup Language) is the standard
markup language used for creating web pages. It structures the
content on the web using elements and tags.
2. What are tags in HTML?
o Answer: Tags in HTML are keywords enclosed in angle brackets
(<>) used to define elements on a webpage. Most HTML tags
come in pairs (an opening tag <p> and a closing tag </p>).
3.
 What is the difference between HTML and XHTML?
 Answer: HTML is more flexible and less strict about syntax, while
XHTML (Extensible HTML) is stricter about syntax and must follow XML
rules. For instance, all tags must be properly closed in XHTML.
 What is a semantic tag in HTML?
 Answer: Semantic tags clearly describe the meaning of their content
to both the browser and the developer. Examples include <header>,
<footer>, <article>, <section>, and <nav>. They improve code readability
and SEO
 What is the difference between block-level and inline elements?
 Answer: Block-level elements (e.g., <div>, <p>) occupy the entire width
of their parent container and start on a new line, while inline elements
(e.g., <span>, <a>) take up only as much space as needed and don't
force line breaks.
 What is the purpose of the DOCTYPE declaration in HTML?
 Answer: The DOCTYPE declaration defines the HTML version being used.
It ensures that the browser renders the page correctly according to
HTML5 or other standards.
Intermediate HTML Interview Questions:

1. What are HTML entities?
o Answer: HTML entities are used to display reserved characters
or characters that have special meanings in HTML. For example,
< for <, > for >, and & for &.
2. Explain the use of the <meta> tag.
o Answer: The <meta> tag is used within the <head> section to
provide metadata about the HTML document, such as character
set, viewport settings, description, author, and keywords for SEO.
 What is the difference between <link> and <a> tags?
 Answer: The <a> tag is used to create hyperlinks to other documents
or sections on the page. The <link> tag is used to define relationships
between a document and external resources, such as linking to a CSS
file.
 What is the difference between <script>, <noscript>, and <template>?
 Answer:
 <script>: Embeds JavaScript code into an HTML document.
 <noscript>: Displays alternative content if the browser does not support
JavaScript.
 <template>: Defines HTML  fragments that can be cloned and inserted
into the DOM, but they are not rendered until explicitly used.
 How do you make a webpage mobile-friendly in HTML?
 Answer: To make a webpage mobile-friendly:
 Use the <meta name="viewport" content="width=device-width, initial-
scale=1"> tag.
 Implement responsive design using CSS media queries.
 Ensure that the layout is flexible using relative units (%, em, rem)
instead of fixed pixels.
Advanced HTML Interview Questions:

1. What are HTML5 Web Workers?
o Answer: Web Workers in HTML5 allow scripts to run in the
background, independently of the main page. This allows for
executing tasks without affecting the performance of the web
page or blocking user interactions.
2. Explain the purpose of the <canvas> element.
o Answer: The <canvas> element is used for drawing graphics,
animations, and other visual content on the fly using JavaScript.
It is commonly used for creating charts, game elements, and
interactive visuals.
 What is the difference between localStorage and sessionStorage in HTML5?
 Answer: Both localStorage and sessionStorage allow for storing data on
the client side.
 localStorage: Stores data without expiration. It persists across browser
sessions.
 sessionStorage: Stores data only for the duration of the session. Once
the session ends (e.g., when the browser is closed), the data is
deleted.
 What is a Shadow DOM in HTML5?
 Answer: Shadow DOM is a part of the Web Components specification.
It encapsulates the internal structure of custom elements,  allowing
you to keep styles and scripts scoped to the component without
affecting the rest of the document.
 What are ARIA roles and how are they used in HTML?
 Answer: ARIA (Accessible Rich Internet Applications) roles enhance
web accessibility. They are attributes added to HTML elements to
describe their role or state to assistive technologies like screen
readers. Examples include role="button", aria-label, and aria-hidden.
HTML Form-Related Interview Questions:

1. How can you make an HTML form accessible?
o Answer: To make forms accessible:
o Use <label> elements linked to form controls (<input>, <textarea>)
using the for attribute.
o Provide helpful form error messages and field instructions.
o Use ARIA attributes like aria-required and aria-invalid where
needed.
2. What is the purpose of the novalidate attribute in forms?
o Answer: The novalidate attribute is used on a form to disable
HTML5 form validation. This allows you to manage validation
entirely through JavaScript if desired.
 What are the new input types introduced in HTML5?
3. Answer: HTML5 introduced several new input types such as email, url,
date, number, range, color, search, and tel. These help in collecting
specific types of data and come with built-in validation and UI
enhancements
HTML and CSS Combined Questions:

1. How do you include CSS in an HTML document?
o Answer: CSS can be included in an HTML document in three
ways:
o Inline: Directly within an element using the style attribute.
o Internal: Using the <style> tag within the <head> section.
o External: By linking to an external stylesheet using the <link>
tag.
2. What is the box model in HTML/CSS?
o Answer: The CSS box model represents the structure of HTML
elements. It includes:
o Content: The actual content inside the element.
1. Padding: The space between the content and the border.
o Border: The edge surrounding the padding (if present).
o Margin: The space between the border and adjacent elements.
Basic CSS Interview Questions:
1. What is CSS?
o Answer: CSS (Cascading Style Sheets) is a stylesheet language
used to describe the presentation of a document written in HTML
or XML. CSS controls the layout, color, fonts, and overall visual
appearance of web pages.
2. What are the different ways to apply CSS to an HTML document?
o Answer: CSS can be applied in three ways:
 Inline CSS: Applied directly to an HTML element using the
style attribute.
 Internal CSS: Placed inside a <style> tag in the <head>
Section of the HTML document.
External CSS: Using an external .css file, linked via the <link>
tag.


<p style="color: blue;">This is a blue paragraph.</p>

<style>
p { color: red; }
</style>

<link rel="stylesheet" href="styles.css">
What is the CSS box model?

1. Answer: The CSS box model represents the structure of an element,
comprising:
o Content: The actual content (text, images, etc.).
o Padding: Space around the content.
o Border: The edge surrounding the padding.
o Margin: Space outside the border.
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px; }
What are selectors in CSS?

1. Answer: Selectors are patterns used to select and style HTML
elements. Common types include:
o Element Selector: Selects all elements of a type (p {}).
o Class Selector: Selects elements with a specific class
(.className {}).
o ID Selector: Selects an element with a specific ID (#idName
{}).
p{
color: green; /* Element Selector */
}
.myClass {
font-size: 20px; /* Class Selector */
}
#myID {
background-color: yellow; /* ID Selector */
}
What is the difference between class and id selectors?

1. Answer:
o Class: Can be applied to multiple elements and is identified by a
dot (.) in CSS.
o ID: Must be unique to a single element and is identified by a
hash (#).
Intermediate CSS Interview Questions:

1. What is the difference between margin and padding?
o Answer:
1. Padding: The space between the content and the element’s
border.
2. Margin: The space outside the element’s border,
separating it from other elements.
css
code
div {
padding: 10px;
margin: 20px;
How does the z-index property work?

1. Answer: The z-index property controls the stacking order of elements
along the z-axis. Higher values are in front of lower values. It only
works on positioned elements (relative, absolute, fixed).
css
Copy code
.box1 {
position: absolute;
z-index: 1;
.box2 {
position: absolute;
z-index: 2;
4. What are pseudo-classes in CSS?
o Answer: Pseudo-classes are used to define a special state of an

element. Common pseudo-classes include:
1. :hover: Applied when the mouse is over an element.
2. :focus: Applied when an element is focused.
3. :nth-child(): Applied to a specific child element.
css
Copy code
a:hover {
color: red;
input:focus {
border-color: blue;
li:nth-child(2) {
font-weight: bold;
5. What are pseudo-elements in CSS?
o Answer: Pseudo-elements style parts of an element, like the

first letter or first line. Examples include ::before, ::after, ::first-
letter, and ::first-line.
css
Copy code
p::first-letter {
font-size: 2em;
color: blue;
h1::before {
content: "★ ";

}
6. Explain the CSS display property.
o Answer: The display property defines how an element is

displayed in the layout. Common values are:
1. block: The element takes up the full width and starts on a
new line.
2. inline: The element takes up only as much width as
necessary.
3. inline-block: Combines block and inline, allowing an
element to be inline but respect the width and height
properties.
4. none: Hides the element.
css
Copy code
div {
display: block;
span {
display: inline;
img {
display: inline-block;
Advanced CSS Interview Questions:

 What is Flexbox, and how does it work?
o Answer: Flexbox is a layout model designed to align and
distribute space within a container. Flex items are placed along a
main axis and a cross-axis. The key properties include:
 display: flex: Defines a flex container.
 flex-direction: Specifies the direction of the flex items (row,
column).
 justify-content: Aligns items horizontally.
 align-items: Aligns items vertically.
css
Copy code
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
 What is CSS Grid, and how does it work?

o Answer: CSS Grid is a 2D grid-based layout system that allows
the creation of complex, responsive layouts. Some key properties
include:
 display: grid: Defines a grid container.
 grid-template-columns: Defines the column structure.
 grid-template-rows: Defines the row structure.
 grid-gap: Sets the space between grid items.
css
Copy code
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
 Explain the difference between absolute, relative, fixed, and

sticky positioning.
o Answer:
 relative: The element is positioned relative to its normal
position.
 absolute: The element is positioned relative to its nearest
positioned ancestor.
 fixed: The element is positioned relative to the viewport
and remains fixed during scrolling.
 sticky: The element is positioned relative to the scroll
position, toggling between relative and fixed.
css
Copy code
.relative {
position: relative;
top: 20px;
.absolute {
position: absolute;
top: 20px;
left: 50px;
.fixed {
position: fixed;
bottom: 0;
.sticky {
position: sticky;
top: 0;
 What are media queries in CSS?

o Answer: Media queries allow the application of different styles
based on screen size or device type. They are essential for
responsive design.
css
Copy code
@media (max-width: 600px) {

body {
background-color: lightblue;
 What is the difference between rem and em units in CSS?

o Answer:
 em: Relative to the font size of the parent element.
 rem: Relative to the root element’s font size (html).
css
Copy code
p{
font-size: 2em; /* 2 times the parent element's font size */
p{
font-size: 2rem; /* 2 times the root element's font size */
CSS Animation and Transition Questions:

 What is the difference between transitions and animations in
CSS?
o Answer:
 Transitions: Allows you to change a property’s value
smoothly (e.g., color change on hover). Triggered by an
event (e.g., hover, focus).
 Animations: More complex, allowing keyframe-based
property changes over time.
css
Copy code
/* Transition */
button {
transition: background-color 0.5s ease;
button:hover {
background-color: blue;
/* Animation */
@keyframes example {
0% {background-color: red;}
100% {background-color: yellow;}
div {
animation: example 3s infinite;
What are the various markup languages available?

 HTML: Hypertext Markup Language
 KML: Key whole Markup Language
 MathML: Mathematical Markup Language
 SGML: Standard Generalized Markup Language
3. XHTML: eXtensible Hypertext Markup Language
 XML: eXtensible Markup Language
What is the current version of HTML?

HTML 5 is the fifth and current version of HTML.
6. What is !DOCTYPE?
A doctype or document-type declaration is an instruction that tells the
web browser about the markup language in which the current page is
written. The doctype is not an element or tag, it lets the browser know
about the version of or standard of HTML or any other markup
language that is being used in the document. The DOCTYPE for HTML5
is case-insensitive and can be written as shown below:
<!DOCTYPE html>
Please refer to the HTML Doctypes article for a detailed description.

7. What are elements and tags, and what are the
differences between them?
HTML Tags: Tags are the starting and ending parts of an HTML
element. They begin with < symbol and end with > symbol. Whatever
is written inside < and > are called tags.
Syntax:
<b> </b>
HTML elements: Elements enclose the contents in between the tags.

They consist of some kind of structure or expression. It generally
consists of a start tag, content, and an end tag.
Syntax:
<b>This is the content.</b>
Difference between HTML Tag & HTML Element:

HTML Tag HTML Element
Either opening or closing is used to

Collection of a start tag, end
mark the start or end of an
tag, and its attributes.
element.
Used to hold the HTML element. Holds the content.
Whatever is written within an

Starts with < and ends with >.
HTML tag are HTML elements
. What are the various heading tags and their
importance?
There are 6 levels of headings defined by HTML. These six heading
elements are H1, H2, H3, H4, H5, and H6; with H1 being at the
highest level and H6 at the least.
Importance of Heading:
 Search Engines use headings for indexing the structure and
content of the webpage.
 Headings are used for highlighting important topics.
 They provide valuable information and tell us about the
structure of the document.
9. How to redirect to a particular section of a page using

HTML?
One can use the anchor tag to redirect to a particular section on the
same page. You need to add “id attribute” to the section that you
want to show and use the same id in href attribute with “#” in the
anchor tag. So that On click a particular link, you will be redirected to
the section that has the same id mentioned in the anchor tag.
Syntax:
<a href="#home_section">home</a>
<section id="home_section">
Information About Page
</section>
Example: When the user clicks on the “Contact Us” link, he will be
redirected to the “Contact Us section” on the same page.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
height: 400px;
border: 1px solid black;
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<p>
This is the example of

<i>
Redirect to a particular section

using HTML on same page
</i>
</p>
<a href="#CONTACTUS"> Contact Us </a>
<div>
<h2>Home section</h2>
</div>
<div>
<h2>About Us section</h2>
</div>
<div id="CONTACTUS">
<h2>Contact Us section </h2>
</div>
<div>
<h2>Team Section</h2>
</div>
</body>
</html>
Output
What are attributes?

An attribute is used to provide extra or additional information about
an element.
 All HTML elements can have attributes. Attributes provide
additional information about an element.
 It takes 2 parameters ie., name and value. These define the
properties of the element and are placed inside the opening
tag of the element. The name parameter takes the name of
the property we would like to assign to the element and the
value takes the property value or extent of the property
names that can be aligned over the element.
 Every name has some value that must be written within
quotes.
11. Are <b> and <strong> tags same? If not, then why?
HTML strong tag: The strong tag is one of the elements of HTML used
in formatting HTML texts. It is used to show the importance of the text
by making it bold or highlighting it semantically.
Syntax:
<strong> Contents... </strong>
HTML bold tag: The bold tag or <b> is also one of the formatting
elements of HTML. The text written under the <b> tag makes the text
bold presentationally to draw attention.
Syntax:
<b> Contents... </b>
The main difference between the <bold> tag & <strong> tag is that
the strong tag semantically emphasizes the important word or section
of words while the bold tag is just offset text conventionally styled
in bold. Click Here to know more.
What is the difference between <em> and <i> tags?
<i> tag: It is one of the elements of HTML which is used in formatting
HTML texts. It is used to define a text in technical terms, alternative
mood or voice, a thought, etc.
Syntax:
<i> Content... </i>
<em> tag: It is also one of the elements of HTML used in formatting

texts. It is used to define emphasized text or statements.
Syntax:
<em> Content... </em>
By default, the visual result is the same but the main difference
between these two tags is that the <em> tag semantically
emphasizes the important word or section of words while the <i> tag
is just offset text conventionally styled in italic to show alternative
mood or voice. Click Here to know the difference between them.
13. How are comments added in HTML?
The comment tag (<!– Comment –>) is used to insert comments in
the HTML code.
Types of HTML Comments: There are two types of comments in HTML
which are:
7. Single-line comment
 Multi-lines comment
14. What are the different formats in which colors in

HTML can be declared?
The color of an element can be defined in the following ways:
 Built-In Color
 RGB Format
 RGBA Format
4. Hexadecimal Notation
 HSL
 HSLA
 Hue: Hue is the degree of the color wheel. Its value lies
between 0 to 360 where 0 represents red, 120 represents
green and 240 represents blue color.
 Saturation: It takes a percentage value, where 100%
represents completely saturated, while 0% represents
completely unsaturated (gray).
3. Lightness: It takes a percentage value, where 100%
represents white, while 0% represents black.
How to create a link in HTML?

A Link is a connection from one Web resource to another. A link has
two ends, An anchor and a direction. The link starts at the “source”
anchor and points to the “destination” anchor, which may be any Web
resource such as an image, a video clip, a sound bite, a program, an
HTML document, or an element within an HTML document.
HTML Link Syntax: Links are specified in HTML using the “a” tag.
<a href="url">Link Text<a>
Explanation:
8. href: The href attribute is used to specify the destination
address of the link used.
 Text link: The text link is the visible part of the link.
16. What is the use of the target attribute in the <link>

tag?
The HTML <link> target Attribute is used to specify the window or a
frame where the linked document is loaded. It is not supported by
HTML 5.
Syntax:
<link target="_blank|_self|_parent|_top|framename">
Attribute Values:
 _blank: It opens the link in a new window.
 _self: It opens the linked document in the same frame.

 _parent: It opens the linked document in the parent frameset.
5. _top: It opens the linked document in the full body of the
window.
 framename: It opens the linked document in the named
frame.
17. What is the use of alt attribute in images?

The <img> alt attribute is used to specify the alternate text for an
image. It is useful when the image is not displayed. It is used to give
alternative information for an image.
Syntax:
<img alt="text">
18. What are the HTML tags used to display a table?

 <table>: It is used to define a table.
 <tr>: It is used to define a row in a table.
 <th>: It is used to define a header cell in a table.
4. <td>: It is used to define a cell in a table.
 <caption>: It is used to define the table caption.
 <colgroup>: It is used to define a group of one or more
columns in a table for formatting.
 <col>: It is used with <colgroup> element to specify column
properties for each column.
 <tbody>: It is used to define a group of body content in a
table.
4. <thead>: It is used to group the header content in a table.
 <tfooter>: It is used to group the footer content in a table.
19. What are the different types of lists in HTML?

A list is a record of short pieces of related information used to display
the data or any information on web pages in the ordered or unordered
form. HTML offers 3 ways for specifying lists of information. All lists
must contain one or more list elements. The types of lists that can be
used in HTML are:
 Unordered List: It will list the items using plain bullets.
3. Ordered List: It will use different schemes of numbers to list
your items.
2. Definition List: It arranges your items in the same way as they
are arranged in a dictionary.
20. What is the difference between block and inline

elements?
Every element in HTML has a default display value which depends
upon the element type. Block or inline is the default display value for
most of the elements.
Block-Level Elements: A block-level element always starts on a new
line and stretches out to the left and right as far as it can.
3. div element: The div element is used as a container for other
HTML elements. It has no required
attributes. Style, class, and id are the commonly used
attributes.
Inline Elements: An inline element does not start on a new line and
only takes up as much width as necessary.
2. span element: The span element is used as a container for
text. It has no required attributes. Style, class, and id are the
commonly used attributes. It is typically used to apply styles
or scripts to a small portion of text within a larger block of
content.

HTML

Uploaded by

Copyright:

Available Formats

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Basic HTML Interview Questions:

Intermediate HTML Interview Questions:

Advanced HTML Interview Questions:

HTML Form-Related Interview Questions:

HTML and CSS Combined Questions:

What is the CSS box model?

What are selectors in CSS?

What is the difference between class and id selectors?

Intermediate CSS Interview Questions:

How does the z-index property work?

4. What are pseudo-classes in CSS?

o Answer: Pseudo-classes are used to define a special state of an

5. What are pseudo-elements in CSS?

o Answer: Pseudo-elements style parts of an element, like the

content: "★ ";

6. Explain the CSS display property.

o Answer: The display property defines how an element is

Advanced CSS Interview Questions:

 What is CSS Grid, and how does it work?

grid-template-columns: repeat(3, 1fr);

 Explain the difference between absolute, relative, fixed, and

 What are media queries in CSS?

@media (max-width: 600px) {

 What is the difference between rem and em units in CSS?

font-size: 2em; /* 2 times the parent element's font size */

font-size: 2rem; /* 2 times the root element's font size */

CSS Animation and Transition Questions:

transition: background-color 0.5s ease;

100% {background-color: yellow;}

animation: example 3s infinite;

What are the various markup languages available?

What is the current version of HTML?

Please refer to the HTML Doctypes article for a detailed description.

HTML elements: Elements enclose the contents in between the tags.

Difference between HTML Tag & HTML Element:

Either opening or closing is used to

Used to hold the HTML element. Holds the content.

Whatever is written within an

9. How to redirect to a particular section of a page using

border: 1px solid black;

This is the example of

Redirect to a particular section

<a href="#CONTACTUS"> Contact Us </a>

<h2>Contact Us section </h2>

What are attributes?

<em> tag: It is also one of the elements of HTML used in formatting

14. What are the different formats in which colors in

How to create a link in HTML?

16. What is the use of the target attribute in the <link>

 _self: It opens the linked document in the same frame.

17. What is the use of alt attribute in images?

18. What are the HTML tags used to display a table?

19. What are the different types of lists in HTML?

20. What is the difference between block and inline

You might also like