Scribd
Upload
64 views19 pages

HTML CSS interview questions by Aman Khan_533f7e18-33f3-4dbb-94c1-1aa879fb9039

This document contains a comprehensive list of interview questions and answers related to HTML, CSS, and Bootstrap. It covers fundamental concepts such as HTML structure, tags, attributes, and CSS properties, as well as advanced topics like semantic HTML5 and differences between CSS versions. The content is structured in a Q&A format, making it a useful resource for interview preparation in web development.

Uploaded by

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

HTML CSS interview questions by Aman Khan_533f7e18-33f3-4dbb-94c1-1aa879fb9039

This document contains a comprehensive list of interview questions and answers related to HTML, CSS, and Bootstrap. It covers fundamental concepts such as HTML structure, tags, attributes, and CSS properties, as well as advanced topics like semantic HTML5 and differences between CSS versions. The content is structured in a Q&A format, making it a useful resource for interview preparation in web development.

Uploaded by

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

HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

05, Shayam Plaza, Patwardhan marg, Just behind Grace Church, Dewas, M.P. 455001

By Aman Khan 1
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

1. What is HTML?
a. HTML stands for Hypertext Markup Language. It is the standard markup language
used for defining web structure.

2. What are the basic building blocks of HTML?


a. The basic building blocks of HTML are tags, which are used to structure and define
the content of a web page.

3. What is the DOCTYPE declaration in HTML?


a. The DOCTYPE declaration is used to specify the version of HTML that the web page
is written in. It helps the browser render the page correctly.

4. What is the difference between HTML elements, tags, and attributes?


a. HTML elements are the individual components that make up a web page, such as
headings, paragraphs, and images. Tags are used to mark the beginning and end of
HTML elements. Attributes provide additional information or modify the behaviour of
HTML elements.

5. What are some common HTML tags?


a. Some common HTML tags include <h1> to <h6> for headings, <p> for paragraphs,
<a> for links, <img> for images, <ul> and <li> for unordered lists, and <table> for tables.

6. What is the purpose of the <head> tag in HTML?


a. The <head> tag is used to contain meta-information about the HTML document,
such as the title, character encoding, and linked stylesheets or scripts.

7. What is the purpose of the <body> tag in HTML?


a. The <body> tag is used to define the main content of the HTML document that is
displayed in the browser.

By Aman Khan 2
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

8. What is the difference between block-level elements and inline elements?


a. Block-level elements start on a new line and take up the full width available, while
inline elements do not start on a new line and only take up the necessary width to
display the content.

9. What is the purpose of the <a> tag in HTML?


a. The <a> tag is used to create hyperlinks to other web pages, files, or locations
within the same page.

10. What are HTML Attributes?


Attributes are the properties that can be added to an HTML tag. These attributes change
the way the tag behaves or is displayed.

11. What is the purpose of the href attribute in the <a> tag?
a. The href attribute specifies the URL or destination of the hyperlink.

12. What is the purpose of the <img> tag in HTML?


a. The <img> tag is used to display images on a web page.

13. What is the purpose of the src attribute in the <img> tag?
a. The src attribute specifies the source file or URL of the image.

14. What is the purpose of the <table> tag in HTML?


a. The <table> tag is used to create tabular data with rows and columns.

15. What are the <thead>, <tbody>, and <tfoot> tags used for in HTML5?
a. The <thead> tag is used to group the header content in a table. The <tbody> tag is
used to group the body content, and the <tfoot> tag is used to group the footer content.

By Aman Khan 3
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

16. What is the purpose of the <tr> tagin HTML?


a. The <tr> tag is used to define a row in a table.

17. What is the purpose of the <th> and <td> tags in HTML?
a. The <th> tag is used to define a header cell in a table, while the <td> tag is used to
define a data cell.

18. What is the purpose of the colspan and rowspan attributes in the <td> and <th>
tags?
a. The colspan attribute specifies the number of columns a cell should span, and the
rowspan attribute specifies the number of rows a cell should span.

19. What is the purpose of the <form> tag in HTML?


a. The <form> tag is used to create an interactive form on a web page to collect user
input.

20. What are some commonly used form elements in HTML?


a. Some commonly used form elements include <input> for text input, checkboxes,
and radio buttons, <select> for dropdown lists, and <textarea> for multiline text input.

21. What is the purpose of the name attribute in form elements?


a. The name attribute is used to identify form elements and is used to retrieve their
values on the server side.

22. What is the purpose of the method attribute in the <form> tag?
a. The method attribute specifies the HTTP method used to send form data to the
server. The most common values are "GET" and "POST".

By Aman Khan 4
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

23. What is the purpose of the action attribute in the <form> tag?
a. The action attribute specifies the URL or destination where the form data should be
sent.

24. What is the purpose of the <input> tag in HTML?


a. The <input> tag is used to create various types of form input fields, such as text
fields, checkboxes, radio buttons, and submit buttons.

25. What is the purpose of the type attribute in the <input> tag?
a. The type attribute specifies the type of input field to be created, such as "text",
"checkbox", "radio", "submit", etc.

26. What is the purpose of the <label> tag in HTML?


a. The <label> tag is used to associate a text label with a form element. It improves
accessibility and allows users to click on the label to activate the associated form
element.

27. What is the purpose of the <select> tag in HTML?


a. The <select> tag is used to create a dropdown list of options for users to choose
from.

28. What is the purpose of the <option> tag in the <select> tag?
a. The <option> tag is used to define an option within a dropdown list.

29. What is the purpose of the value attribute in the <option> tag?
a. The value attribute specifies the value associated with an option. It is sent to the
server when the form is submitted.

By Aman Khan 5
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

30. What is the purpose of the <textarea> tag in HTML?


a. The <textarea> tag is used to create a multiline text input field where users can
enter larger blocks of text.

31. What is the purpose of the <div> tag in HTML?


a. The <div> tag is a container used to group and style HTML elements. It is commonly
used for layout and organization purposes.

32. What is the purpose of the <span> tag in HTML?


a. The <span> tag is an inline container used to apply styles or manipulate specific
portions of text within a larger block of content.

33. What is the purpose of the <audio> and <video> tags in HTML5?
a. The <audio> tag is used to embed audio content on a web page, and the <video>
tag is used to embed video content. They provide built-in controls for playing and
pausing the media.

34. What is the purpose of the <header>, <main>, <footer>, and <nav> tags in
HTML5?
a. The <header> tag is used to define the header section of a web page. The <main>
tag is used to define the main content area. The <footer> tag is used to define the footer
section, and the <nav> tag is used to define the navigation section.

35. What is the purpose of the <article> and <section> tags in HTML5?
a. The <article> tag is used to define an independent, self-contained content section
that can be distributed and reused. The <section> tag is used to define a section of
related content within an HTML document.

36. What is the purpose of the <aside> tag in HTML5?


a. The <aside> tag is used to define content that is related to the main content but
can be considered separate from it, such as sidebars or pull-out quotes.

By Aman Khan 6
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

37. What is semantic HTML5?


a. Semantic HTML is the practice of using HTML elements that accurately describe the
meaning or purpose of the content they contain. It improves accessibility, search engine
optimization, and code readability.

38. What are the advantages of using external CSS stylesheets?


a. Some advantages of using external CSS stylesheets include easier maintenance,
consistent styling across multiple pages, better separation of concerns (HTML for
structure, CSS for presentation), and faster page loading times due to browser caching.

39. What is the purpose of the class attribute in HTML?


a. The class attribute is used to assign one or more class names to an HTML element.
It allows for targeted styling and JavaScript manipulation.

40. What is the purpose of the id attribute in HTML?


a. The id attribute is used to assign a unique identifier to an HTML element. It is used
for targeting specific elements with CSS or JavaScript.

41. What is the purpose of the CSS display property?


a. The display property is used to control how an element is rendered and displayed
in the browser. It can change an element's behaviour from block to inline, or vice versa.

42. What is the purpose of the CSS position property?


a. The position property is used to specify the positioning method of an element on
the web page. It can be set to static, relative, absolute, or fixed.

43. What is the purpose of the CSS float property?


a. The float property is used to align an element to the left or right of its container,
allowing other content to wrap around it.

By Aman Khan 7
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

44. What is the purpose of the CSS box-sizing property?


a. The box-sizing property is used to control how the width and height of an element
are calculated. It can be set to content-box (default) or border-box.

45. What is the purpose of the CSS flexbox layout?


a. The CSS flexbox layout is a flexible box layout model that allows you to create
responsive and flexible layouts. It provides powerful tools for arranging and aligning
elements within a container.

46. What is the purpose of the <meta> tag in HTML?


a. The <meta> tag is used to provide metadata about an HTML document, such as the
character encoding, viewport settings, or author information.

47. What is the purpose of the viewport meta tag in HTML?


a. The viewport meta tag is used to control the width and scaling of the viewport on
mobile devices. It ensures that web pages are displayed correctly and responsively on
different screen sizes.

48. What is the purpose of the alt attribute in the <img> tag?
a. The alt attribute is used to provide alternative text for an image. It is displayed if
the image cannot be loaded or for accessibility purposes.

49. What is the purpose of the spellcheck attribute in form elements?


The spellcheck attribute is used to enable or disable spell checking for a form input field.

50. What is the purpose of the download attribute in the <a> tag?
The download attribute is used to specify that a hyperlink should be downloaded
instead of navigated to when clicked. It specifies the filename of the downloaded file.

By Aman Khan 8
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

51. What is the purpose of the <script> tag in HTML?


The <script> tag is used to embed or reference JavaScript code within an HTML
document.

52. What is the difference between inline and external JavaScript?


Inline JavaScript is directly embedded within the HTML document using the <script> tag,
while external JavaScript is saved in a separate .js file and linked to the HTML document
using the src attribute of the <script> tag.

53. What is the purpose of the <noscript> tag in HTML?


The <noscript> tag is used to provide an alternative content that should be displayed if a
web browser does not support or has disabled JavaScript.

54. What is the purpose of the <iframe> tag in HTML?


The <iframe> tag is used to embed another web page or document within the current
HTML document.

55. What is the purpose of the autocomplete attribute in form elements?


The autocomplete attribute is used to control whether a form input field should have
autocomplete suggestions or not.

56. What is the purpose of the required attribute in form elements?


The required attribute is used to specify that a form input field must be filled out before
submitting the form.

57. What is the purpose of the <nav> tag in HTML?


The <nav> tag is used to define a section of a web page that contains navigation links.

By Aman Khan 9
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

58. What is the purpose of the <abbr> tag in HTML?


The <abbr> tag is used to define an abbreviation or acronym. It can provide additional
information when the user hovers over it.

59. What is the purpose of the <pre> tag in HTML?


The <pre> tag is used to display preformatted text, preserving both spaces and line
breaks as they appear in the HTML code.
60. What is the purpose of the placeholder attribute in form elements?
The placeholder attribute is used to provide a hint or example value for a form input
field. It is displayed in the field until the user enters their own value.

61. What are the new features of HTML5?

The top new features in HTML5 are the introduction of audio and video tags, vector
graphics options, figure and figcaption tags to not only markup an image but also allot
space for its caption in the document. All these improvements make the syntax of
HTML5 much simpler and user-friendly as compared to HTML4.

62. What are CSS HSL Colors?

HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the
cylindrical coordinate system.

 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 a blue color.

 Saturation: It takes a percentage value, where 100% represents completely


saturated, while 0% represents completely unsaturated (gray).

 Lightness: It takes a percentage value, where 100% represents white, while 0%


represents black.

By Aman Khan 10
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

63. What is the difference between margin and padding?

 Margin is used to create space around elements and padding is used to create
space around elements inside the border.

 We can set the margin property to auto but we cannot set the padding property
to auto.

 In Margin property we can allow negative or float number but in padding we


cannot allow negative values.

64. How is CSS different from CSS 3?

S.No. CSS CSS3

CSS is capable of positioning On the other hand, CSS3 is capable of


texts and objects. CSS is making the web page more attractive and
1
somehow backward takes less time to create. If you write CSS3
compatible with CSS3. code in CSS, it will be invalid.

Responsive designing is not CSS3 is the latest version, hence it


2
supported in CSS supports responsive design.

CSS cannot be split into Whereas, whereas CSS3 can be breakdown


3
modules. into modules.

But in CSS3 we can perform all kinds of


Using CSS, we cannot build 3D animation and transformations as it
4
animation and transformation. supports animation and 3D
transformations.

CSS is very slow as compared


5 Whereas, CSS3 is faster than CSS.
to CSS3

By Aman Khan 11
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

65. What is the purpose of the disabled attribute in form elements?


The disabled attribute is used to make a form input field or button non-editable or non-
clickable. It prevents user interaction with the element.

66. What is the difference between CSS border and outline?

 CSS border properties allow us to set the style, color, and width of the border.

 CSS outline property allows us to draw a line around the element, outside the
border.

67. What is CSS Box Model?

The CSS box model is a container that contains multiple properties including borders,
margin, padding, and the content itself. It is used to create the design and layout of web
pages.

By Aman Khan 12
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

68. What are the various positioning properties in CSS?

The position property in CSS tells about the method of positioning for an element or an
HTML entity. There are five different types of position properties available in CSS:

1. Fixed
2. Static
3. Relative
4. Absolute
5. Sticky

69. What is CSS flexbox?


It is also called a flexible box model. It is basically a layout model that provides an easy
and clean way to arrange items within a container. Flexbox is different from the block
model which is vertically biased and the inline which is horizontally biased.
To create a flex container set the display property to flex.

70. What does the CSS box-sizing property do?


The box-sizing CSS property defines how the user should calculate the total width and
height of an element i.e. padding and borders, are to be included or not.
Property Values:
 content-box: This is the default value of the box-sizing property. In this mode,
the width and height properties include only the content. Border and padding are
not included in.
 border-box: In this mode, the width and height properties include content,
padding, and borders.

71. What is CSS overflow?

The CSS overflow controls the big content. It tells whether to clip content or to add scroll
bars. The overflow contains the following property:

 visible
 hidden
 scroll
 auto

By Aman Khan 13
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

72. What are the different CSS link states?

Links can exist in different states and they can be styled using pseudo-classes.
There are four states of links given below:

 a:link: This is a normal, unvisited link.

 a:visited: This is a link visited by a user at least once

 a:hover: This is a link when the mouse hovers over it

 a:active: This is a link that is just clicked.

73. What is the difference between display: none and visibility: hidden?

Both of the property is quite useful in CSS. the difference between display:
“none”; and visibility: “hidden”;, right from the name itself we can tell the difference
as display: “none”, completely gets rids of the tag, as it had never existed in the HTML
page whereas visibility: “hidden”;, just makes the tag invisible it will still be on the
HTML page occupying space it’s just invisible.

74. What is CSS overflow?

The CSS overflow controls the big content. It tells whether to clip content or to add scroll
bars. The overflow contains the following property:

 visible
 hidden
 scroll
 auto

75. How can we make our website responsive using CSS?

Media query is used to create a responsive web design. It means that the view of a web
page differs from system to system based on screen or media types

By Aman Khan 14
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

76. What are the attribute selectors?

The CSS Attribute Selector is used to select an element with some specific attribute or
attribute value.
There are several types of attribute selectors which are discussed below:

 [attribute] Selector: This type of attribute selector is used to select all the
elements that have the specified attribute and applies the CSS property to that
attribute. For example, the selector [class] will select all the elements with the
style attribute.

 [attribute = “value”] Selector: This selector is used to select all the elements
whose attribute has the value exactly the same as the specified value.

77. What is Bootstrap?

Bootstrap is a free and open-source tool collection used for creating responsive websites
and web applications. It is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first websites. Bootstrap is used for creating tables,
forms, buttons, carousels, navigation bars, and images.

78. What are the features of Bootstrap?

Bootstrap’s features are:

 It is open-source and free to use.

 All browsers are compatible with Bootstrap.

 Its designs are responsive.

 Quick and simple to use

79. How can you make responsive images?

By adding the class .img-responsive to the <img> tag in Bootstrap, images may be made
responsive. This class gives the picture max-width: 100%; and height: auto; so that it
scales well with the parent element.

By Aman Khan 15
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

80. What is Grid System in Bootstrap?

Bootstrap Grid System divides up to 12 columns across the page. You can use each of
them individually or also can be merge together for wider columns. You can use 12
columns each of width 1 or use 4 columns each of width 3 or any other combination.

81. Suggests the lists that Bootstrap supports.

There are 3 types of lists supported by Bootstrap are:

 Unordered Lists: In Unordered lists, items are marked with bullets.

 Ordered Lists: In Ordered lists items are marked with numerical bullets such as
1,2, i, ii, etc.

 Definition Lists: In Definition lists, items are defined with their description.

82. Tell the difference between Bootstrap 4 and Bootstrap 5.

 Bootstrap 4 has 5 levels (xs, sm, md, lg, xl). And Bootsstrap 5 has 6 levels (xs, sm,
md, lg, xl, xxl).

 Bootstrap 4 has jquery and all related plugins. But in Bootstrap 5, jquery is
removed and switched to vanilla JS with some working plugins.

 We cannot modify utilities in bootstrap 4. But Bootstrap 5 gave us the freedom to


modify and also create our own utility.

 Bootstrap 4 doesn’t have its own SVG icons, we have to use font-awesome for
icons. Whereas Bootstrap 5 has its own SVG icons.

83. Why do we need to use Bootstrap?

 Faster and Easier Web Development.

 It creates Platform-independent web pages.

 It creates Responsive Web-pages.

 It is mobile web application.

By Aman Khan 16
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

84. Explain what is list group in Bootstrap and what is the use of it?

List Groups are used to display a series of content. We can modify them to support any
content as per our needs. The use of List-Groups is just to display a series or list of
content in an organized way.

85. What is an anchor tag in HTML?


The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This
hyperlink is used to link the webpage to other web pages.

86. How to change an inline element into a block-level element?


We can accomplish this task by using the display property having its value as “block”, to
change the element from inline to block-level element.

87. What are the media element tags introduced by HTML5?

HTML5 introduced 5 most popular media element tags that are supported by the
browsers, which are described below:

 <audio>: It is an inline element that is used to embed sound files into a web page.
 <video>: It is used to embed video files into a web page.
 <source>: It is used to attach multimedia files like audio, video, and pictures.
 <embed>: It is used for embedding external applications which are generally
multimedia content like audio or video into an HTML document.
 <track>: It specifies text tracks for media components audio and video.

88. What do you understand by the universal sector?

A universal selector is a selector that matches any element type's name instead of
selecting elements of a particular type.

Example:

*{

color: blue;

font-size: 10px;

By Aman Khan 17
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

89. What are the elements of the CSS Box Model?

The CSS box model defines the layout and design of CSS elements. The elements are
content (like text and images, padding (the area around content), border (the area
around padding), and margin (the area around the border).

90. Differentiate between CSS3 and CSS2.

The main difference between CSS3 and CSS2 is that CSS divides different sections into
modules and supports many browsers. It also contains new General Sibling Combinators
responsible for matching similar elements.

91. What is meant by RGB stream?

RGB represents colors in CSS. The three streams are namely Red, Green, and Blue. The
intensity of colors is represented using numbers 0 to 256. This allows CSS to have a
spectrum of visible colors.

92. What is the difference between a class and an ID?

Class is a way of using HTML elements for styling. They are not unique and have multiple
elements. Whereas ID is unique and it can be assigned to a single element.

93. Explain responsive web design.

Responsive Design is a web page creation approach that uses flexible images, flexible
layouts, and CSS media queries. This design approach aims to build web pages that
detect the orientation and screen size of the visitors so that the layout can be changed
accordingly.

94. What is cascading in CSS?

Cascading is defined as the process of style declaration and its weight that will help the
browser in selecting the styling rules with respect to time.

By Aman Khan 18
HTML, CSS & BOOTSTRAP INTERVIEW QUESTIONS WITH ANSWERS

95. What are the different ways to hide the element using CSS?

display: none, visibility: hidden, position: absolute

96. What is a marquee in HTML?

Marquee is used for scrolling text on a web page. It scrolls the image or text up, down,
left, or right automatically. To apply for a marquee, you have to use </marquee> tags.

97. How do we insert a comment in HTML?

We can insert a comment in HTML by beginning with a lesser than sign and ending with
a greater than sign. For example, “<!-“ and “->.”

98. What is the alt attribute in HTML?

The alt attribute is used for displaying a text in place of an image whenever the image
cannot be loaded due to any technical issue.

99. What is a form in HTML?

A form is a set of input fields and other elements to collect user data. Forms can be used
for various purposes, such as logging in, submitting feedback, or purchasing.

100. What is the role of the method attribute in HTML forms?

The method attribute is used to specify the HTTP method that will be used to submit the
form data. The two most common methods are GET and POST. GET is used to retrieve
data from the server, while POST is used to send data to the server

************** Best of Luck **************

By Aman Khan 19

You might also like