## 📝 HTML Interview Questions & Answers

Certainly! Here's a comprehensive guide to HTML and CSS interview questions and answers, curated from top resources to help you prepare effectively.

📝 HTML Interview Questions & Answers

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design web pages. It structures content on the web using elements like headings, paragraphs, links, and images.

2. What are semantic HTML elements?

Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include <article>, <section>, <header>, <footer>, and <nav>. They improve accessibility and SEO.

3. What is the difference between `<div>` and `<span>`?

<div>: A block-level element used to group content and structure layouts.
<span>: An inline element used to style a portion of text or group inline elements.

4. What are data attributes in HTML?

Data attributes allow you to store extra information on HTML elements. They are prefixed with data- and can be accessed via JavaScript.

<div data-user-id="12345" data-role="admin">User Info</div>

5. Explain the `<canvas>` element in HTML5.

The <canvas> element provides a drawable region in the document that can be used to render graphics, such as charts or games, on the fly via JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>

🎨 CSS Interview Questions & Answers

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML documents. It allows developers to style elements, control layout, and apply visual effects to create visually appealing web pages.

2. What is the CSS box model?

The CSS box model describes how elements are structured on a web page. It consists of:

Content: The actual content inside the element.
Padding: Space between the content and the border.
Border: Surrounds the padding.
Margin: Space outside the border.

3. Explain the difference between `display: none` and `visibility: hidden`.

display: none: Removes the element from the document flow, meaning it doesn't take up any space.
visibility: hidden: Hides the element, but it still occupies space in the layout.

4. What is Flexbox in CSS?

Flexbox is a layout model in CSS that allows for the creation of flexible and efficient layouts. It simplifies the distribution and alignment of items within a container.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Pseudo-classes: Keywords added to selectors that specify a special state of the selected elements. Examples include :hover, :focus, and :nth-child.
Pseudo-elements: Allow you to style specific parts of an element. Examples include ::before, ::after, and ::first-line.