DEV Community

Renuka Patil
Renuka Patil

Posted on

HTML and CSS Interview questions and Answers

#webdev #css #html

1. What is <!DOCTYPE html> in HTML5?

The <!DOCTYPE html> declaration defines the document type and version of HTML. In HTML5, it ensures that the browser renders the page in standards mode.

Example:

<!DOCTYPE html> <html> <head> <title>HTML5 Page</title> </head> <body> <h1>Welcome to HTML5</h1> </body> </html>
Enter fullscreen mode Exit fullscreen mode

2. Difference between <div> and <span> in HTML

  • ``: A block-level element used for grouping elements.
  • ``: An inline element used for styling part of text or grouping inline elements.

Example:

<div style="background-color: lightblue;">This is a div</div> <p>This is a <span style="color: red;">span inside a paragraph</span></p>
Enter fullscreen mode Exit fullscreen mode

3. What are semantic and non-semantic tags in HTML?

  • Semantic Tags: These tags have meaningful names, like <header>, <article>, <footer>.
  • Non-Semantic Tags: Generic containers like <div> and <span>.

Example of Semantic Tags:

<header>Website Header</header> <nav>Navigation Links</nav> <article>Main Content</article> <footer>Footer Section</footer>
Enter fullscreen mode Exit fullscreen mode

4. Difference between HTML and HTML5

Feature HTML HTML5
Doctype Complex Simple <!DOCTYPE html>
Multimedia Support Limited Supports <audio> and <video>
Canvas Support No Yes
Semantic Elements No Yes

5. What is the <iframe> tag in HTML5?

An <iframe> (Inline Frame) is used to embed another webpage inside the current page.

Example:

<iframe src="https://www.example.com" width="600" height="400"></iframe>
Enter fullscreen mode Exit fullscreen mode

6. What are formatting tags in HTML?

Tags like <b>, <i>, <u>, <strong>, <em>, <mark>, <small> format text.

7. Difference between <b> and <strong>

  • <b>: Bold text for styling.
  • <strong>: Indicates strong importance (SEO-friendly).

Example:

<p>This is <b>bold</b> text and this is <strong>important</strong> text.</p>
Enter fullscreen mode Exit fullscreen mode

8. What is viewport attribute in HTML?

Defines how a webpage is displayed on mobile devices.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

9. What is an attribute in HTML?

An attribute provides additional information about an element.

Example:

<a href="https://example.com" target="_blank">Visit</a>
Enter fullscreen mode Exit fullscreen mode

10. Block-level vs Inline elements

  • Block-level: Takes full width (<div>, <p>, <h1>)
  • Inline: Takes only necessary width (<span>, <a>, <img>)

CSS Interview Questions & Answers

1. Difference between CSS and CSS3

  • CSS3 introduced new features like animations, transitions, flexbox, and grid.

2. What are selectors in CSS?

  • Simple Selectors: element, id, class
  • Combinators: descendant, child, adjacent
  • Pseudo-selectors: hover, focus

3. What is media query in CSS?

Used for responsive design.

Example:

@media (max-width: 600px) { body { background-color: lightgray; } }
Enter fullscreen mode Exit fullscreen mode

4. Different position values in CSS

  • static, relative, absolute, fixed, sticky

5. What is BOM in CSS?

BOM (Box Model) includes margin, border, padding, content.

6. Difference between PX, EM, REM in CSS

  • px: Fixed size
  • em: Relative to parent
  • rem: Relative to root

7. What is flexbox in CSS?

A layout module for flexible alignment.

Example:

display: flex; justify-content: center; align-items: center;
Enter fullscreen mode Exit fullscreen mode

8. What are pseudo-selectors in CSS?

  • :hover, :focus, :nth-child(n)

9. How to make a website responsive?

Using media queries, fluid layouts, flexbox, and responsive images.

10. What are breakpoints for responsive design?

  • 320px, 768px, 1024px, 1200px

11. Why use box-sizing in CSS?

To ensure width includes padding and border.

Example:

* { box-sizing: border-box; }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)