Scribd
Upload
3 views10 pages

HTML Interview Questions and Answers

The document contains a comprehensive list of HTML and CSS interview questions and answers, categorized into basic, intermediate, and advanced levels. It covers fundamental concepts such as HTML structure, CSS styling, and advanced topics like web components and responsive design. Each question is followed by a concise answer, making it a useful resource for interview preparation.

Uploaded by

Ajeet Soni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views10 pages

HTML Interview Questions and Answers

The document contains a comprehensive list of HTML and CSS interview questions and answers, categorized into basic, intermediate, and advanced levels. It covers fundamental concepts such as HTML structure, CSS styling, and advanced topics like web components and responsive design. Each question is followed by a concise answer, making it a useful resource for interview preparation.

Uploaded by

Ajeet Soni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML Interview Questions and Answers

✅ Basic Level

1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure content on
the web.
2. What are HTML tags?
Tags are predefined keywords in angle brackets (e.g., <p>) used to define elements and structure in
HTML.
3. What is <!DOCTYPE html>?
It declares the document type and version of HTML being used. It helps browsers render the page
correctly.
4. Difference between HTML and XHTML?
XHTML is stricter than HTML and must be well-formed. It combines HTML and XML rules.
5. What are semantic HTML elements?
These elements clearly describe their meaning in a human- and machine-readable way (e.g., <article>,
<section>, <nav>).
6. How do you create a hyperlink in HTML?
Using the <a> tag:

html
CopyEdit
<a href="https://example.com">Visit</a>

7. How to insert an image in HTML?


Use the <img> tag:

html
CopyEdit
<img src="image.jpg" alt="Description">

8. Difference between <div> and <span>?


<div> is a block-level container, <span> is inline. Use <div> for layout, <span> for text styling.
9. What is the <meta> tag used for?
It provides metadata about the HTML document (e.g., charset, author, viewport).
10. Difference between <strong> and <b>?
<strong> adds semantic importance, while <b> just makes text bold without semantics.
11. Difference between <em> and <i>?
<em> emphasizes text (with meaning), while <i> just displays it in italics.
12. What are empty elements in HTML?
Tags that don’t require closing (e.g., <br>, <img>, <hr>).
13. How to create a table in HTML?
Use <table>, <tr>, <td>, <th> tags.
14. How do you comment in HTML?
<!-- This is a comment -->
15. What is the use of the <form> tag?
It defines an HTML form for user input.
16. What is the difference between id and class?
id is unique per page; class can be reused across elements.
17. What is the use of the <label> tag?
It defines a label for an <input> element.
18. What is the default method of form submission?
GET is the default method.
19. How to open a link in a new tab?
Add target="_blank" in the <a> tag.
20. Can a single HTML element have multiple classes?
Yes. Use space-separated class names: class="btn primary"

✅ Intermediate Level

21. What are HTML attributes?


Attributes provide additional information about elements. Example: href, src, alt, class, id.
22. How do you embed audio in HTML?

html
CopyEdit
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

23. How do you embed video in HTML?

html
CopyEdit
<video controls>
<source src="video.mp4" type="video/mp4">
</video>

24. What is the <fieldset> tag?


Groups related form elements.
25. What is the <legend> tag?
Defines a caption for the <fieldset>.
26. What is the difference between <ul>, <ol>, and <dl>?
o <ul>: unordered list
o <ol>: ordered list
o <dl>: definition list
27. What is the action attribute in forms?
It defines where the form data will be sent.
28. What are data- attributes?*
Custom attributes that store extra data. Example: data-user="123"
29. What is the <iframe> tag?
Embeds another HTML page into the current one.
30. What are void elements?
Elements that do not require closing tags (e.g., <br>, <hr>).
31. Can you place a block element inside an inline element?
No, it violates HTML structure rules.
32. How do you make an image clickable?
Wrap it in an anchor tag:

html
CopyEdit
<a href="#"><img src="image.jpg"></a>
33. What are global attributes in HTML?
Attributes applicable to all elements, like id, class, style, title.
34. How to specify character encoding?

html
CopyEdit
<meta charset="UTF-8">

35. What is HTML5?


The latest version of HTML, with semantic tags, audio/video support, etc.
36. What is the <canvas> tag used for?
It allows drawing graphics via JavaScript.
37. How does local storage differ from session storage?
o Local storage: persists across sessions
o Session storage: cleared on browser close
38. What is the <noscript> tag?
It defines content shown if JavaScript is disabled.
39. What is the use of the <template> tag?
Used to define HTML fragments that are not rendered until activated by JavaScript.
40. What is ARIA in HTML?
Accessibility features for assistive technologies using attributes like aria-label, aria-hidden.

🟢 CSS Interview Questions and Answers


✅ Basic Level

41. What is CSS?


Cascading Style Sheets (CSS) describe the style of HTML elements.
42. Types of CSS?
o Inline
o Internal
o External
43. Syntax of a CSS rule?

css
CopyEdit
selector {
property: value;
}

44. How to apply CSS to a single HTML element?


Using inline style: <p style="color:red">Text</p>
45. Difference between id and class in CSS?
#id is unique; .class can be used multiple times.
46. What is the use of the !important rule?
It overrides all other declarations.
47. What are pseudo-classes?
Define a special state of an element. Example: :hover, :first-child.
48. How to include external CSS?
html
CopyEdit
<link rel="stylesheet" href="styles.css">

49. What is the Box Model in CSS?


It includes: Content, Padding, Border, Margin.
50. How to center a div horizontally?

css
CopyEdit
margin: 0 auto;

51. Difference between relative, absolute, fixed, and sticky positioning?


o relative: relative to itself
o absolute: relative to nearest positioned ancestor
o fixed: relative to viewport
o sticky: toggles between relative and fixed
52. How to hide an element in CSS?
display: none; or visibility: hidden;
53. What is the difference between visibility: hidden and display: none?
visibility: hidden hides element but takes up space; display: none removes it from layout.
54. What are media queries?
Used for responsive design:

css
CopyEdit
@media (max-width: 768px) {
/* Styles */
}

55. What is z-index?


Controls stacking order of elements.
56. How do you apply styles to a specific element inside another?
Using descendant selectors:

css
CopyEdit
div p {
color: blue;
}

57. Difference between em, rem, and px?


o px: absolute unit
o em: relative to parent
o rem: relative to root
58. How to make a website responsive?
Use flexible layouts, media queries, and percentage-based widths.
59. How to add a background image in CSS?

css
CopyEdit
background-image: url("image.jpg");

60. What is specificity in CSS?


Determines which rule applies when multiple rules match an element.
Advanced HTML Questions and Answers
✅ Advanced Level (61–80)

61. What is the difference between HTMLCollection and NodeList?

 HTMLCollection is live (updates with DOM changes).


 NodeList can be live or static depending on the method used.

62. What are custom data attributes in HTML5?


Attributes prefixed with data-, e.g., data-id="123". Used to store extra information.
63. What is the difference between <script> and <noscript>?
<script> runs JavaScript; <noscript> shows alternative content when JS is disabled.
64. What is lazy loading in HTML?
A feature that delays loading images/videos using loading="lazy" attribute.
65. What is progressive enhancement in HTML?
Building a basic functional version first, then adding advanced features.
66. What is the <details> and <summary> tag?
Creates a collapsible section with a summary heading.
67. What is a web component in HTML5?
A set of APIs to create custom, reusable encapsulated HTML tags.
68. What is the difference between synchronous and asynchronous script loading?

 async: loads script independently and runs when ready.


 defer: loads with HTML and executes after parsing.

69. How to use HTML5 contenteditable?


Set contenteditable="true" to allow in-browser editing of text.
70. What is the use of the <mark> tag?
Highlights text (e.g., for search terms).
71. What are microdata and schema.org?
Allow embedding metadata using attributes like itemprop, itemscope for better SEO.
72. What is cross-origin resource sharing (CORS) in HTML?
A browser feature allowing controlled access to resources across domains.
73. How to embed a YouTube video?
Using an <iframe> with the video URL:

html
CopyEdit
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>

74. Difference between <section> and <article>?

 <section>: thematic grouping


 <article>: self-contained content

75. What is the shadow DOM?


A part of web components that encapsulates styles and markup to avoid conflicts.
76. What does the rel="noopener noreferrer" attribute do?
Enhances security and performance for links with target="_blank".
77. How to preload assets in HTML?
Using the <link rel="preload"> tag for resources like fonts, images.
78. What is the purpose of the srcset attribute in <img>?
Provides multiple image resolutions for responsive loading.
79. What is an access key in HTML?
Assigns a keyboard shortcut to an element using accesskey attribute.
80. How to make a field required in a form?
Add the required attribute to input elements.

🟢 Advanced CSS Questions and Answers


✅ Advanced Level (81–100)

81. What is the difference between relative and absolute positioning in CSS?

 relative: relative to its normal position.


 absolute: relative to the nearest positioned ancestor.

82. What is specificity and how is it calculated?


Calculated as:

 Inline style: 1000


 ID: 100
 Class/Attribute/Pseudo-class: 10
 Element/Pseudo-element: 1

83. What is a pseudo-element in CSS?


Style specific parts of elements using ::before, ::after, etc.
84. What is the difference between visibility: hidden and opacity: 0?
Both hide the element, but opacity: 0 keeps the element in layout and clickable.
85. How to apply styles to an element only when printing?
Use @media print query:

css
CopyEdit
@media print {
body { color: black; }
}

86. What is the difference between min-width, max-width, and width?

 width: exact width


 min-width: minimum width constraint
 max-width: maximum width constraint

87. What is the use of calc() in CSS?


Performs calculations:

css
CopyEdit
width: calc(100% - 50px);

88. What is Flexbox in CSS?


A layout model that arranges elements efficiently in rows or columns using properties like display:
flex, justify-content, etc.
89. What is the Grid layout in CSS?
A 2D layout system using display: grid with rows and columns.
90. Difference between Flexbox and Grid?

 Flexbox: 1D layout (row or column)


 Grid: 2D layout (rows and columns)

91. What are combinator selectors in CSS?

 Descendant ( ), Child (>), Adjacent sibling (+), General sibling (~)

92. What is the difference between inline, block, and inline-block?

 inline: no new line, width/height not respected


 block: starts on new line, full width
 inline-block: behaves like inline but accepts width/height

93. What is a media query breakpoint?


Screen width at which the layout changes. E.g., @media (max-width: 768px)
94. How to make a sticky header in CSS?

css
CopyEdit
position: sticky;
top: 0;

95. How to create a responsive image?

css
CopyEdit
img {
width: 100%;
height: auto;
}

96. How to make text overflow with ellipsis?

css
CopyEdit
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

97. What is the difference between rem and em units?

 rem: relative to root element


 em: relative to parent element
98. How to animate elements in CSS?
Use @keyframes and animation properties:

css
CopyEdit
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}

99. What is the difference between transitions and animations?

 Transition: triggered on state change


 Animation: runs independently

100. How to optimize CSS performance?

 Minify CSS
 Avoid deep selectors
 Use shorthand
 Use fewer rules

Here are 50 more HTML and CSS interview questions and answers, split into Basic (1–25) and
Intermediate (26–50) levels. These are fresh and not duplicates of the previous 100.

🔹 Basic HTML and CSS Interview Questions (1–25)


1. What does HTML stand for?
Answer: HyperText Markup Language.
2. What does CSS stand for?
Answer: Cascading Style Sheets.
3. What is the latest version of HTML?
Answer: HTML5.
4. What tag is used to insert an image in HTML?
Answer: <img src="image.jpg" alt="Description">
5. How do you create a hyperlink in HTML?
Answer: <a href="https://example.com">Link</a>
6. What tag is used for a line break in HTML?
Answer: <br>
7. Which tag is used to create an ordered list?
Answer: <ol>
8. What is the purpose of the <head> tag?
Answer: Contains metadata, links to CSS, scripts, and title.
9. Which tag is used for the largest heading?
Answer: <h1>
10. What tag is used for creating a checkbox?
Answer: <input type="checkbox">
11. How do you add a comment in HTML?
Answer: <!-- This is a comment -->
12. What is the alt attribute in <img> tag used for?
Answer: Provides alternate text for the image.
13. What tag is used to create a table row?
Answer: <tr>
14. How do you apply bold text in HTML?
Answer: <b> or <strong>
15. Which HTML tag is used to define a form?
Answer: <form>
16. What is the default method of form submission?
Answer: GET
17. How do you define a text input in a form?
Answer: <input type="text">
18. What is the difference between <div> and <span>?
Answer: <div> is block-level; <span> is inline.
19. What is the purpose of the <title> tag?
Answer: Sets the title shown on the browser tab.
20. Which CSS property sets the background color?
Answer: background-color
21. What is the use of the color property in CSS?
Answer: Sets the text color.
22. Which CSS selector selects all paragraphs?
Answer: p { }
23. How do you center text in CSS?
Answer: text-align: center;
24. How do you make text italic using CSS?
Answer: font-style: italic;
25. What is the use of the margin property in CSS?
Answer: Sets outer spacing around an element.

🔸 Intermediate HTML and CSS Interview Questions (26–50)


26. What is semantic HTML?
Answer: HTML that uses meaningful tags like <article>, <nav>, <section>.
27. What does the <meta charset="UTF-8"> tag do?
Answer: Specifies character encoding.
28. What is the difference between block and inline elements?
Answer: Block takes full width; inline fits content.
29. What does the placeholder attribute do?
Answer: Shows a hint in an input field before user enters data.
30. What is the action attribute in forms?
Answer: Specifies the URL to send form data to.
31. What is the difference between id and class in HTML?
Answer: id is unique; class can be reused.
32. What is the fieldset element used for?
Answer: Groups form fields together.
33. What is the use of the <label> tag?
Answer: Binds text to an input element, improving accessibility.
34. What is the default display value of <div> and <span>?
Answer: div: block; span: inline
35. What is the purpose of the target="_blank" attribute?
Answer: Opens the link in a new browser tab.
36. How do you write a CSS comment?
Answer: /* This is a comment */
37. What is the box model in CSS?
Answer: Describes the element layout: content, padding, border, and margin.
38. How do you select an element by ID in CSS?
Answer: #id { }
39. How do you select an element by class in CSS?
Answer: .classname { }
40. What are pseudo-classes in CSS?
Answer: Define element states like :hover, :focus, :nth-child().
41. How do you hide an element using CSS?
Answer: display: none; or visibility: hidden;
42. What is the difference between padding and margin?
Answer: Padding is inside the border; margin is outside.
43. What is z-index in CSS?
Answer: Controls stacking order of elements.
44. How do you apply styles to all <h1> elements inside a <div>?
Answer: div h1 { }
45. What is a media query in CSS?
Answer: Allows styles to adapt to different screen sizes.
46. What is the use of inherit in CSS?
Answer: Forces an element to inherit a property from its parent.
47. What’s the difference between relative and fixed positioning?
Answer: relative: offset from normal position; fixed: positioned relative to the viewport.
48. How do you include an external CSS file?
Answer: <link rel="stylesheet" href="style.css">
49. What is a responsive web design?
Answer: A design that adjusts its layout across devices using flexible layouts, media queries, etc.
50. How do you use a Google Font in your webpage?
Answer:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

If you’d like, I can now combine all 150 Q&As into a formatted PDF or Word document for easy revision.
Would you like that?

You might also like