DEV Community

ABISHEK M
ABISHEK M

Posted on

HTML & CSS Interview Questions

#interview #html #css #webdev

HTML QUESTIONS

1. What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create the structure and content of web pages. It's not a programming language — it just tells the browser what content to show and how to organize it (headings, paragraphs, images, links, etc.). CSS is used to style it, and JavaScript adds interactivity.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. What are HTML tags, and what's the difference between a tag and an element?

A tag is the keyword written inside angle brackets, like <p> or </p>. An element is the complete package — the opening tag, the content inside it, and the closing tag together. Some tags like <img> are self-closing and don't need a closing tag.

<p>This is an element</p>
<!-- <p> and </p> are tags; "This is an element" is the content -->
Enter fullscreen mode Exit fullscreen mode

3. What's the basic structure of an HTML document?

Every HTML page follows a standard setup: <!DOCTYPE html> tells the browser it's HTML5, <html> is the root container, <head> holds metadata (title, links to CSS/JS), and <body> holds all the visible content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. What's the difference between <div>, <span>, <section>, and <article>?

<div> is a generic block-level container with no meaning, used for layout/styling. <span> is a generic inline container. <section> groups thematically related content (usually with a heading). <article> is for independent, self-contained content like a blog post or news item.

<article>
  <h2>Blog Post Title</h2>
  <section>
    <h3>Introduction</h3>
    <p>Some text with a <span>highlighted</span> word.</p>
  </section>
</article>
Enter fullscreen mode Exit fullscreen mode

5. What's the difference between block-level and inline elements?

Block-level elements take up the full width available and start on a new line (like <div>, <p>, <h1>). Inline elements only take up as much width as their content needs and stay in the same line (like <span>, <a>, <img>).

<div>This starts a new line</div>
<span>This</span> <span>stays inline</span>
Enter fullscreen mode Exit fullscreen mode

6. What is the alt attribute in <img>, and why does it matter?

alt gives alternate text for an image. It shows up if the image fails to load, gets read aloud by screen readers (accessibility), and helps search engines understand the image content (SEO).

<img src="cat.jpg" alt="A cute cat sitting on a couch">
Enter fullscreen mode Exit fullscreen mode

7. What's the difference between id and class attributes?

id is a unique identifier — only one element on the page should have a particular id. class can be applied to multiple elements and reused. In CSS, id is targeted with # and class with ..

<h1 id="main-title">Welcome</h1>
<p class="text-gray">Para 1</p>
<p class="text-gray">Para 2</p>
Enter fullscreen mode Exit fullscreen mode

8. What's the difference between absolute and relative URLs in a hyperlink?

An absolute URL has the full address including protocol and domain — it works no matter where it's placed. A relative URL points to a file relative to the current page's location, used for linking within the same website.

<a href="https://example.com/about.html">About (absolute)</a>
<a href="/about.html">About (relative)</a>
Enter fullscreen mode Exit fullscreen mode

9. What does the <form> tag do, and what do action and method control?

<form> collects user input like text, checkboxes, and buttons. action specifies the URL where the form data is sent on submit. method specifies how it's sent — GET appends data to the URL (visible, for non-sensitive data), POST sends it in the request body (hidden, for sensitive/large data).

<form action="/submit" method="POST">
  <input type="text" name="username">
  <input type="submit" value="Send">
</form>
Enter fullscreen mode Exit fullscreen mode

10. What are semantic HTML elements, and why use them over <div>?

Semantic elements clearly describe their purpose to the browser and developer — like <header>, <nav>, <footer>, <article> — instead of a generic <div> for everything. They improve accessibility for screen readers, help search engines understand page structure (SEO), and make code easier to read.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>Blog content here</article>
</main>
<footer>Copyright 2026</footer>
Enter fullscreen mode Exit fullscreen mode

CSS QUESTIONS

11. What is CSS?

CSS (Cascading Style Sheets) is the standard stylesheet language used to style and design the visual appearance of web pages — colors, fonts, spacing, layout, and more. It works together with HTML (structure) and JavaScript (behavior) to build a complete website.

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

12. What are the different ways to apply CSS, and which one wins?

There are three ways: Inline (style attribute directly on an element), Internal (<style> tag inside <head>), and External (a separate .css file linked via <link>). If styles conflict, Inline CSS has the highest priority, then Internal, then External has the least.

<p style="color: red;">Inline wins over other styles for this paragraph</p>
Enter fullscreen mode Exit fullscreen mode

13. What's the difference between id selector and class selector?

The id selector (#) targets a single unique element on the page. The class selector (.) can be applied to and target multiple elements. id should only be used once per page, class can repeat.

#header { background: black; }
.card { border: 1px solid gray; }
Enter fullscreen mode Exit fullscreen mode

14. What's the difference between display: none and visibility: hidden?

display: none completely removes the element from the page — it takes up no space, as if it never existed. visibility: hidden hides the element visually, but it still occupies its space in the layout.

.gone { display: none; }        /* no space taken */
.invisible { visibility: hidden; } /* space still reserved */
Enter fullscreen mode Exit fullscreen mode

15. What are the different CSS positioning values?

  • static: default, normal flow of the page.
  • relative: positioned relative to its own normal position.
  • absolute: positioned relative to the nearest positioned ancestor.
  • fixed: positioned relative to the browser window, stays fixed on scroll.
  • sticky: acts relative until a scroll point, then sticks like fixed. 
.navbar { position: sticky; top: 0; }
.popup { position: fixed; bottom: 20px; right: 20px; }
Enter fullscreen mode Exit fullscreen mode

16. What's the difference between Flexbox and CSS Grid?

Flexbox is one-dimensional — it arranges items in a single row or column, great for navbars and simple alignment. Grid is two-dimensional — it arranges items in rows and columns together, better for full page layouts.

.flex-container { display: flex; justify-content: space-between; }
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
Enter fullscreen mode Exit fullscreen mode

17. What is specificity in CSS?

Specificity decides which CSS rule wins when multiple rules target the same element. Priority order (low to high): element selector → class selector → id selector → inline style → !important.

p { color: black; }        /* specificity: low */
.text { color: blue; }     /* specificity: medium */
#main { color: red; }      /* specificity: high — this wins */
Enter fullscreen mode Exit fullscreen mode

18. What's the difference between margin and padding?

margin creates space outside an element's border, separating it from other elements. padding creates space inside the border, between the border and the content. Margin can be negative or auto; padding cannot be negative.

.box {
  padding: 20px;  /* space inside, between border and content */
  margin: 30px;   /* space outside, between this box and others */
  border: 2px solid black;
}
Enter fullscreen mode Exit fullscreen mode

19. What are pseudo-classes and pseudo-elements?

A pseudo-class targets an element's state, like :hover or :focus. A pseudo-element targets a specific part of an element, like ::before or ::first-letter. Pseudo-classes use one colon, pseudo-elements use two.

button:hover { background: green; }     /* state-based */
p::first-letter { font-size: 2em; }     /* part of element */
Enter fullscreen mode Exit fullscreen mode

20. What does box-sizing: border-box do?

By default (content-box), width only applies to the content — padding and border add extra size on top of it. With box-sizing: border-box, the specified width includes padding and border, so the total rendered size stays exactly what you set — much easier to manage layouts.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  /* total width stays 200px, not 250px */
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)