Frontend With HTML & CSS_document

1. What is HTML?
Answer:
HTML stands for Hypertext Markup Language. It is the standard markup language for creating web
pages and web applications.
2. What are the main components of an HTML document?
Answer: The main components of an HTML document are:
i. HTML tags: These are the building blocks of HTML documents and are used to structure
content.
ii. Text content: This is the actual content that is displayed on the web page.
iii. Attributes: These provide additional information about HTML elements and are used within the
opening tag of an element.
iv. Hyperlinks: These are used to link one web page to another or to different sections within the
same page.
3. What is the purpose of HTML tags?
Answer:
HTML tags are used to define the structure and content of web pages. They indicate how elements on the
page should be displayed or behave.
4. Differentiate between block-level and inline elements in HTML.
Answer:
a. Block-level elements: These elements start on a new line and take up the full width available.
Examples include <div>, <p>, <h1> to <h6>.
b. Inline elements: These elements do not start on a new line and only take up as much width as
necessary. Examples include <span>, <a>, <strong>.
5. Explain the purpose of the <meta> tag in HTML.
Answer:
The <meta> tag is used to provide metadata about the HTML document, such as character encoding,
viewport settings, author information, and keywords for search engines.
6. What is the difference between HTML and XHTML?
Answer:
HTML (Hypertext Markup Language) is a markup language that defines the structure of content on web
pages. XHTML (Extensible Hypertext Markup Language) is a stricter and cleaner version of HTML,
conforming to XML syntax rules.
7. How can you embed an image in an HTML page?

Answer:
Images can be embedded in an HTML page using the <img> tag. For example: <img src="image.jpg"
alt="Description of image">.
8. What is the purpose of the alt attribute in the <img> tag?
Answer:
The alt attribute provides alternative text for an image, which is displayed if the image fails to load or if
the user is using a screen reader. It also improves accessibility and SEO (Search Engine Optimization).
9. What are empty elements?
Answer:
HTML elements with no content are called empty elements. For example: <br>, <hr> etc.
10. What is the use of the <a> tag in HTML?
Answer:
The <a> tag is used to create hyperlinks in HTML. It defines a clickable link to another web page, a file,
or a specific location within the same page.
11. Explain the difference between the <div> and <span> elements.
Answer:
<div> is a block-level element used to group and style content, while <span> is an inline element
typically used for styling or applying formatting to a specific portion of text within a block-level
element.
12. What is CSS?
Answer:
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a
document written in HTML or XML, including colors, layouts, and fonts.
13. Explain the difference between inline, internal, and external CSS.
Answer:
a) Inline CSS: Inline styles are applied directly to the HTML element using the style attribute. They
have the highest specificity.
b) Internal CSS: Internal styles are defined within the <style> element in the <head> section of an
HTML document. They apply to the entire document.
c) External CSS: External styles are defined in a separate CSS file and linked to the HTML
document using the <link> element. They can be reused across multiple HTML pages.
14. What is the box model in CSS?
Answer:
The CSS box model describes the layout and design of elements on a web page. It consists of content,
padding, border, and margin. These properties determine the space occupied by an element and its
relationship with other elements.
15. What is the difference between margin and padding in CSS?
Answer:
Margin is the space outside the border of an element, creating separation between elements.
Padding is the space between the content of an element and its border, creating internal space.
16. How do you apply multiple classes to an HTML element?
Answer:
We can apply multiple classes to an HTML element by separating class names with a space in the class
attribute. For example: <div class="class1 class2">.
17. How is Cell Padding different from Cell Spacing?
Answer:
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.
18. What is the use of a <iframe> tag?
Answer:
An <iframe> is used to display a web page within a web page.
19. What is the difference between HTML and CSS?
Answer:
HTML is used to create the structure and content of a web page, while CSS is used to define the
appearance and layout of the page.
20. What is semantic HTML?
Answer:
Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning
of the content.
21. What is the difference between the ‘id' and ‘class' attributes of HTML elements?\
Answer:
The ‘id' attribute defines a unique identifier for an HTML element, while the ‘class' attribute defines a
class for a group of elements. An ‘id' can only be used once on a page, while a ‘class' can be used
multiple times.
22. What is the difference between HTML and HTML5?

Answer:
HTML5 is the latest version of HTML and includes new features and improvements over previous
versions. Some key differences between HTML and HTML5 include support for multimedia elements
(such as video and audio), improved semantics, and better support for mobile devices.
23. What is the difference between an absolute and relative URL?
Answer:
An absolute URL includes the full web address, the protocol (such as http or https) and the domain name
(such as www.example.com). A relative URL, on the other hand, specifies the location of a resource
relative to the current web page.
24. What is the role of the action attribute in HTML forms?
Answer:
The action attribute is used to specify the URL of the script or program that will process the data
submitted by the form. When the user clicks the submit button, the form data is sent to the specified URL
for processing.
25. Explain a few advantages of CSS?
Answer:
With CSS, different documents can be controlled using a single site, styles can be grouped in complex
situations using selectors and grouping methods, and multiple HTML elements can have classes.
26. What is meant by RGB stream?
Answer:
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.
27. What do you understand by the universal sector?
Answer:
A universal selector is a selector that matches any element type's name instead of selecting elements of a
particular type.
Example:
<style>
*{
color: blue;
font-size: 10px;
}
</style>
28. What is the syntax of CSS?
Answer:
selector{
Property:value;
}
29. Name some CSS frameworks.
Answer:
· Foundation,
· Bootstrap,
· Gumby,
· Ukit,
· Semantic UI, etc.
30. What is the DOCTYPE declaration in HTML?
Answer:
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.
31. What are pseudo-classes and pseudo-elements in CSS?
Answer:
a. Pseudo-classes are keywords added to selectors that specify a special state of the selected
elements. Common examples include :hover, :active, and :focus.
b. Pseudo-elements are keywords added to selectors that allow styling of a specific part of an
element's content. Examples include ::before, ::after, and ::first-line.
32. How can you center an element horizontally and vertically in CSS?
Answer:
To center an element horizontally, you can set its margin property to auto and specify a width.To center
vertically, you can use flexbox (display: flex; align-items: center; justify-content: center;) or CSS
Grid.
33. What are void elements in HTML?
Answer:
HTML elements which do not have closing tags or do not need to be closed are Void elements. For
Example, <br />, <img />, <hr />, etc.
34. What are HTML Entities?
Answer:
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 EntityName
< <
> >
35. How can we include audio or video in a webpage
Answer:
HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly
in the webpage.
36. What are some of the advantages of HTML5 over its previous versions?
Answer:
· 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, and triangles, Including new
Semantic tags and form control tag.
37. Explain the concept of web storage in HTML5.
Answer:
Local Storage - This helps in storing data that will be retained even though the user reopens the browser.
It is stored for each web app on different browsers.
Session Storage - This is used for one session only. After the user closes the browser this gets deleted.
38. How does this CSS rule function?
Answer:
#header {width: 100%; height: 50px; background?color: #333; }
It creates a header with a fixed size and dark background
39. What is the primary purpose of responsive web design?
Answer:
To make websites work well on different devices
40. In responsive design, what is the purpose of the viewport <meta> tag?
Answer:
To set the width of the viewport to match the device-width
41. Which HTML5 element is particularly useful for structuring a responsive web design?
Answer:
<div> tag
42. In responsive design, what is the "mobile?first" approach?
Answer:
Designing a website for mobile devices before desktops
43. How does this HTML and CSS code function?AnswerAnswer <div class="responsive"></div> in
HTML and .responsive { width: 100%; max?width: 500px; } in CSS
Answer:
It makes div element responsive to screen size with max width of –500px
44. What is the purpose of the HTML5 Canvas API?
Answer:
To draw graphics via scripting
45. How does the <canvas> element differ from <svg> in HTML5?
Answer:
<canvas> draw graphics with JavaScript, while <svg> uses XML.
46. What is the primary purpose of using alt text in HTML images?
Answer:
To provide a text description for screen readers

47. What role does the lang attribute in the <html> tag play in web accessibility?
Answer:
Specifies the primary language of the document’s content
48. Identify the accessibility issue in this HTML code: <img src="photo.jpg">
Answer:
There is no alt attribute
49. What is! DOCTYPE?
Answer:
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.
50. What is the difference between the POST method and the GET method?
Answer:
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and
servers. HTTP works as a request-response protocol between a client and server. There are 2 HTTP request
methods ie., GET & POST
GET: It requests data from a specified resource.
POST: This method is used to submit data to be processed to a specified

resource.
51. What are void elements?
Answer:
The elements that only have start tags and do not contain any content within it, these elements are called
Void Elements. It can only have attributes but does not contain any kind of content. Example of such
elements are <br>, <hr>, <img>, <input>,
52. How to change an inline element into a block-level element?
Answer:
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.
53. What is the difference between <html lang=”en’> and <html lang=”en-US’>?
Answer:
<html lang=”en’>: The <html lang=”en’> only specifies the language code of the page meaning en or
English is used for all the text on the page.
<html lang=”en-US’>: The <html lang=”en-US’> specifies the language code of the page followed by
the country code which means the US style of English language is used for all the text on the page.
54. How to create scrolling text or images on a webpage?
Answer:
This task can be achieved through <marquee> tag in HTML that helps to create scrolling text or image
on a webpage.
55. How to open a hyperlink in another window or tab in HTML?
Answer:
In order to open a hyperlink in another window or tab, use the target attribute and provide it value
_blank in the anchor tab.
56. What is the z-index property in CSS used for?
Answer:
The z-index property in CSS controls the stacking order of positioned elements. Elements with a higher
z-index value will be displayed on top of elements with lower z-index values.
57. How can you center an element horizontally and vertically in CSS?
Answer:
You can center an element horizontally by setting its margin-left and margin-right to auto and center it
vertically by using the flexbox or grid layout and applying appropriate alignment properties like align-
items or justify-content.
58. How do you embed a video in HTML5?
Answer:
<video src=”Video.mp4” controls> </video>
59. What are the different CSS link states?
Answer:
There are four states of links given below:
i. a:link: This is a normal, unvisited link.

ii. a:visited: This is a link visited by a user at least once
iii. a:hover: This is a link when the mouse hovers over it
iv. a:active: This is a link that is just clicked.
60. How can we hide an element in CSS?
Answer:
display: "none";
61. What are the new features introduced in HTML5?
Answer:
HTML5 introduced several new features including semantic elements (<header>,footer>, <nav>, etc.),
audio and video elements (<audio>, <video>), canvas for drawing graphics, local storage (localStorage),
web workers, and more.
62. Differentiate between cookies, sessionStorage, and localStorage.
Answer:
Cookies are small pieces of data stored on the client-side that can be accessed by both the server and the
client. sessionStorage and localStorage are both part of the Web Storage API introduced by HTML5.
sessionStorage stores data for the duration of a session, while localStorage stores data persistently across
sessions.
63. Explain the purpose of the defer attribute in the <script> tag.
Answer:
The defer attribute in the <script> tag is used to indicate that the script should be executed after the
document has been parsed. It allows the HTML parsing and rendering to continue without waiting for the
script to be downloaded and executed.
64. How can you achieve responsive web design in HTML?
Answer:
Responsive web design can be achieved in HTML using CSS media queries to adjust the layout and
styles based on the screen size and device capabilities. Additionally, using flexible layouts, relative units
like percentages or em values, and viewport meta tag can also contribute to responsive design.
65. Explain the purpose of the async attribute in the <script> tag.
Answer:
The async attribute in the <script> tag is used to indicate that the script should be downloaded
asynchronously and executed as soon as it's available, without blocking the HTML parsing and rendering.
66. What is the purpose of the role attribute in HTML elements?
Answer:
The role attribute is used to define the purpose or function of an element, especially for elements that do
not have semantic meaning or when additional clarification is needed for accessibility purposes.
67. What is the purpose of the <iframe> element in HTML?
Answer:
The <iframe> element is used to embed another HTML document within the current document. It is
commonly used for embedding maps, videos, advertisements, or other external content.
68. Explain the difference between HTML and XHTML.
Answer:
XHTML is a stricter and more XML-like version of HTML. XHTML documents must be well-formed
XML documents, which means they must adhere to strict syntax rules such as proper nesting, lowercase
element names, and closing all tags. HTML, on the other hand, is more forgiving in terms of syntax.
69. How can you include comments in HTML?
Answer:
Comments in HTML can be included using the  syntax. Anything between  will be
treated as a comment and will not be displayed in the browser.
70. What is the purpose of the <details> and <summary> elements in HTML5?
Answer:
The <details> element is used to create a disclosure widget that can be toggled open and closed to reveal
additional content. The optional <summary> element provides a summary or heading for the details.
71. How can you embed SVG (Scalable Vector Graphics) in HTML?AnswerAnswer
SVG can be embedded in HTML using the <svg> element directly in the HTML code, or by
referencing an external SVG file using the <img> element, or by using CSS
background-image property.
72. What are the benefits of using semantic HTML elements?
Answer:
Semantic HTML elements provide a more meaningful structure to the document, making it easier for
developers to understand and maintain, improving accessibility for users of assistive technologies, and
potentially improving search engine optimization (SEO) as search engines can better understand the
content.
73. Explain the purpose of the autocomplete attribute in HTML form inputs.
Answer:
The autocomplete attribute is used to control whether the browser should automatically complete the
input values based on the user's previous input or not. It can have values such as on (enable
autocomplete) or off (disable autocomplete).
74. What are HTML data attributes?
Answer:
HTML data attributes allow developers to store custom data directly in the HTML markup, which can
then be accessed and manipulated using JavaScript. These attributes start with the prefix data-, followed
by a custom name.
75. How can you create a custom form control in HTML?
Answer:
Custom form controls can be created using JavaScript and CSS. You can start with a standard HTML
element (like a <div>) and use event listeners to capture user interactions, manipulate the element's
appearance and behavior with CSS, and handle form submission events programmatically.
76. What is the CSS Box Model?
Answer:
The CSS Box Model is a fundamental concept that describes the design and layout of elements on a web
page. It consists of content, padding, border, and margin. The width and height of an element are
calculated as the sum of these components.
77. Explain the difference between display: none;, visibility: hidden;, and opacity: 0;.
Answer:
i. display: none;: Removes the element from the document flow, causing it to be completely
hidden and not take up any space.
ii. visibility: hidden;: Hides the element while still preserving its space in the document flow.
iii. opacity: 0;: Makes the element transparent, but it still occupies its original space on the page.
78. What is the CSS specificity and how does it work?
Answer:
CSS specificity determines which CSS rule takes precedence when multiple conflicting rules target the
same element. Specificity is calculated based on the combination of selectors used in a rule. Generally,
the more specific a selector is, the higher its specificity.
79. Explain the purpose of the z-index property.
Answer:
The z-index property controls the stacking order of positioned elements along the z-axis (depth) of the
page. Elements with a higher z-index value are stacked above elements with lower values. It only applies
to positioned elements (i.e., those with a position value other than static).
80. What are CSS pseudo-elements and pseudo-classes?
Answer:
i. Pseudo-elements: Pseudo-elements allow you to style specific parts of an element's content.

Examples include ::before, ::after, ::first-line, and ::first-letter.
ii. Pseudo-classes: Pseudo-classes are used to define the special state of an element. Examples
include :hover, :active, :focus, :nth-child(), etc.
81. What is the difference between margin and padding?
Answer:
Margin is the space outside the border of an element, which creates space between elements. Padding is
the space between the content of an element and its border.
82. Explain the concept of CSS Grid Layout.
Answer:
CSS Grid Layout is a two-dimensional grid-based layout system that allows you to create complex grid
structures for arranging content in rows and columns. It provides precise control over the placement and
sizing of grid items within a container.
83. How can you vertically center an element in CSS?
Answer:
Vertical centering can be achieved using various techniques, such as setting display: flex; on the
container with align-items: center;, using position: absolute; with top: 50%; and transform:
translateY(-50%);, or using CSS Grid Layout.
84. Explain the purpose of the transition property in CSS.
Answer:
The transition property allows you to smoothly animate changes to CSS properties over a specified
duration. It defines the transition effect, timing function, duration, and delay for the animation.
85. What is the difference between inline and inline-block display properties?
Answer:
i. inline: Elements with display: inline; behave like inline elements, flowing along with the
surrounding content and ignoring width and height properties.
ii. inline-block: Elements with display: inline-block; behave like inline elements in terms of flow,
but they can have block-level properties like width and height, allowing them to be sized and
positioned like block-level elements.
86. What are vendor prefixes in CSS and why are they used?
Answer:
Vendor prefixes are prefixes added to CSS properties to implement experimental or non-standardized
features in different browsers. They are used to provide compatibility with different browser versions
during the development phase. Common vendor prefixes include -webkit-, -moz-, -ms-, and -o-.
87. Explain the purpose of the box-shadow property in CSS.
Answer:
The box-shadow property adds a shadow effect to an element's box. It allows you to specify the
horizontal and vertical offset, blur radius, spread radius, and color of the shadow.
88. How can you create a responsive website using CSS?
Answer:
To create a responsive website, you can use CSS techniques such as media queries, flexible layouts (e.g.,
using percentages or CSS Grid Layout), fluid images (using max-width: 100%;), and relative units (e.g.,
em, rem, vw, vh) to ensure that the layout adapts to different screen sizes and devices.
89. What is the purpose of the clearfix hack in CSS?
Answer:
The clearfix hack is used to clear floated elements within a container to prevent layout issues caused by
the container collapsing. It typically involves adding an empty element with the clear: both; property or
using the :after pseudo-element with clear: both; to force the container to expand to the height of its
floated children.
90. Explain the concept of CSS preprocessors and give examples.
Answer: CSS preprocessors are tools that extend the functionality of CSS by adding features like
variables, mixins, nesting, and functions. They allow you to write more maintainable and scalable CSS
code. Examples of CSS preprocessors include Sass, Less, and Stylus.

Frontend With HTML & CSS_document

Uploaded by

Frontend With HTML & CSS_document

Uploaded by

1. What is HTML?

2. What are the main components of an HTML document?

Answer: The main components of an HTML document are:

3. What is the purpose of HTML tags?

4. Differentiate between block-level and inline elements in HTML.

5. Explain the purpose of the <meta> tag in HTML.

6. What is the difference between HTML and XHTML?

7. How can you embed an image in an HTML page?

8. What is the purpose of the alt attribute in the <img> tag?

9. What are empty elements?

10. What is the use of the <a> tag in HTML?

12. What is CSS?

14. What is the box model in CSS?

15. What is the difference between margin and padding in CSS?

16. How do you apply multiple classes to an HTML element?

17. How is Cell Padding different from Cell Spacing?

18. What is the use of a <iframe> tag?

An <iframe> is used to display a web page within a web page.

19. What is the difference between HTML and CSS?

20. What is semantic HTML?

22. What is the difference between HTML and HTML5?

23. What is the difference between an absolute and relative URL?

24. What is the role of the action attribute in HTML forms?

25. Explain a few advantages of CSS?

26. What is meant by RGB stream?

27. What do you understand by the universal sector?

28. What is the syntax of CSS?

29. Name some CSS frameworks.

· Semantic UI, etc.

30. What is the DOCTYPE declaration in HTML?

31. What are pseudo-classes and pseudo-elements in CSS?

34. What are HTML Entities?

35. How can we include audio or video in a webpage

· It has Multimedia Support.

JavaScript can be run in the background.

37. Explain the concept of web storage in HTML5.

#header {width: 100%; height: 50px; background?color: #333; }

It creates a header with a fixed size and dark background

39. What is the primary purpose of responsive web design?

To make websites work well on different devices

To set the width of the viewport to match the device-width

42. In responsive design, what is the "mobile?first" approach?

Designing a website for mobile devices before desktops

44. What is the purpose of the HTML5 Canvas API?

To draw graphics via scripting

<canvas> draw graphics with JavaScript, while <svg> uses XML.

To provide a text description for screen readers

Specifies the primary language of the document’s content

There is no alt attribute

49. What is! DOCTYPE?

GET: It requests data from a specified resource.

POST: This method is used to submit data to be processed to a specified

51. What are void elements?

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

54. How to create scrolling text or images on a webpage?

55. How to open a hyperlink in another window or tab in HTML?

56. What is the z-index property in CSS used for?

58. How do you embed a video in HTML5?

<video src=”Video.mp4” controls> </video>

59. What are the different CSS link states?

There are four states of links given below:

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

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

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

60. How can we hide an element in CSS?

61. What are the new features introduced in HTML5?

62. Differentiate between cookies, sessionStorage, and localStorage.

64. How can you achieve responsive web design in HTML?

66. What is the purpose of the role attribute in HTML elements?

67. What is the purpose of the <iframe> element in HTML?

68. Explain the difference between HTML and XHTML.

69. How can you include comments in HTML?

72. What are the benefits of using semantic HTML elements?

74. What are HTML data attributes?

75. How can you create a custom form control in HTML?

76. What is the CSS Box Model?