DEV Community

Ragul
Ragul

Posted on

HTML & CSS Interview Questions

#html #css #career #webdev

HTML Interview Questions

1. What is HTML?

Answer:

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure content on web pages.

HTML is not a programming language because it does not contain programming logic such as loops, conditions, or functions. Instead, it uses elements and tags to tell the browser how content should be structured.

For example:

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

Here:

  • <html> defines the HTML document.
  • <head> contains information about the page.
  • <title> defines the browser tab title.
  • <body> contains visible content.
  • <h1> creates a heading.
  • <p> creates a paragraph.

HTML provides the structure of a website, while CSS provides the appearance and JavaScript provides behavior and interactivity.

2. What is the difference between HTML and HTML5?

Answer:

HTML5 is the modern version of HTML. It introduced many new features that make it easier to build modern websites and web applications.

Older versions of HTML often required additional plugins or technologies for multimedia and complex web applications. HTML5 introduced native support for many of these features.

For example:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

HTML5 also introduced semantic elements:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
Enter fullscreen mode Exit fullscreen mode

Other important HTML5 features include:

  • Audio and video support
  • Canvas
  • SVG support
  • Local storage
  • Improved forms
  • Semantic elements
  • Geolocation APIs
  • Better accessibility support

HTML5 also uses a simpler document declaration:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

Therefore, HTML5 provides better support for modern websites, multimedia, accessibility, and web applications.

3. What are HTML elements?

Answer:

HTML elements are the basic building blocks of an HTML document. They tell the browser how different pieces of content should be displayed or interpreted.

A typical HTML element contains an opening tag, content, and a closing tag.

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

Here:

  • <p> is the opening tag.
  • Hello World is the content.
  • </p> is the closing tag.
  • The complete structure is called an HTML element.

Some elements are void elements, meaning they do not have closing tags.

Examples:

<img src="image.jpg" alt="Example">
<br>
<hr>
<input type="text">
Enter fullscreen mode Exit fullscreen mode

HTML elements can also contain attributes.

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

Here, href is an attribute of the <a> element.

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

Answer:

Both <div> and <span> are generic HTML elements, but they are used differently.

<div> is generally a block-level element, while <span> is an inline element.

Example:

<div>Hello</div>
<div>World</div>
Enter fullscreen mode Exit fullscreen mode

The two <div> elements normally appear on separate lines.

With <span>:

<span>Hello</span>
<span>World</span>
Enter fullscreen mode Exit fullscreen mode

The text normally appears on the same line.

<div> is commonly used to group larger sections of a webpage:

<div class="card">
    <h2>Product</h2>
    <p>This is a product.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

<span> is useful for styling or targeting a small part of text:

<p>
    This is <span class="highlight">important</span>.
</p>
Enter fullscreen mode Exit fullscreen mode

In modern HTML, semantic elements such as <section>, <article>, and <header> should be preferred when they describe the meaning of the content.

5. What are semantic HTML elements?

Answer:

Semantic HTML elements are elements that clearly describe the meaning and purpose of their content.

For example:

<header>
    <h1>My Website</h1>
</header>

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

<main>
    <article>
        <h2>My Article</h2>
        <p>Article content...</p>
    </article>
</main>

<footer>
    <p>Copyright 2026</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

Instead of using multiple generic <div> elements, semantic elements communicate the structure of the page.

Common semantic elements include:

  • <header> – introductory content or page header
  • <nav> – navigation links
  • <main> – primary page content
  • <section> – thematic section
  • <article> – independent content
  • <aside> – related or secondary content
  • <footer> – footer information

Semantic HTML has several advantages:

  1. Improves code readability.
  2. Helps search engines understand page structure.
  3. Improves accessibility.
  4. Makes maintenance easier.
  5. Provides better document structure.

6. What is the purpose of the alt attribute in an image?

Answer:

The alt attribute provides alternative text for an image.

Example:

<img src="laptop.jpg" alt="A laptop on a desk">
Enter fullscreen mode Exit fullscreen mode

If the image cannot be loaded, the alternative text can be displayed instead.

The alt attribute is also important for accessibility. Screen readers can use the alternative text to describe images to users who cannot see them.

For example:

<img src="profile.jpg" alt="John's profile photo">
Enter fullscreen mode Exit fullscreen mode

is better than:

<img src="profile.jpg">
Enter fullscreen mode Exit fullscreen mode

For decorative images that do not provide meaningful information, an empty alt attribute can be used:

<img src="decoration.png" alt="">
Enter fullscreen mode Exit fullscreen mode

The alt attribute can also provide useful context for search engines.

7. What is the difference between id and class in HTML?

Answer:

Both id and class are attributes used to identify HTML elements, but they have different purposes.

An id is generally intended to uniquely identify one element:

<h1 id="main-title">My Website</h1>
Enter fullscreen mode Exit fullscreen mode

A class can be assigned to multiple elements:

<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>
<p class="text">Third paragraph</p>
Enter fullscreen mode Exit fullscreen mode

In CSS:

#main-title {
    color: blue;
}

.text {
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

The id selector uses #, while the class selector uses ..

A single HTML element can also have multiple classes:

<div class="card featured large">
    Product
</div>
Enter fullscreen mode Exit fullscreen mode

In general:

  • Use id when an element needs a unique identifier.
  • Use class for reusable styling or grouping.
  • Avoid unnecessarily using IDs for CSS when reusable classes are more appropriate.

8. What is the purpose of an HTML form?

Answer:

HTML forms are used to collect information from users.

Common examples include:

  • Login forms
  • Registration forms
  • Search forms
  • Contact forms
  • Payment forms
  • Feedback forms

Example:

<form action="/login" method="post">

    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <button type="submit">Login</button>

</form>
Enter fullscreen mode Exit fullscreen mode

Important form attributes include:

  • action – specifies where form data should be sent.
  • method – specifies how the data should be submitted.
  • name – identifies form fields when data is submitted.
  • required – makes a field mandatory.
  • placeholder – provides a hint to the user.

Common form controls include:

<input>
<textarea>
<select>
<option>
<button>
Enter fullscreen mode Exit fullscreen mode

Forms are an important part of interactive websites because they allow users to send data to a server.

CSS Interview Questions

9. What is CSS?

Answer:

CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of HTML documents.

HTML provides the structure:

<h1>Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

CSS controls how that structure looks:

h1 {
    color: blue;
    font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode

CSS can control:

  • Colors
  • Fonts
  • Text size
  • Margins
  • Padding
  • Borders
  • Layout
  • Backgrounds
  • Animations
  • Responsive design
  • Positioning

For example:

.card {
    width: 300px;
    padding: 20px;
    border: 1px solid black;
    border-radius: 10px;
}
Enter fullscreen mode Exit fullscreen mode

The main purpose of CSS is to separate presentation from structure, making websites easier to maintain and design.

10. What are the three ways to add CSS?

Answer:

There are three common ways to apply CSS to an HTML document.

1. Inline CSS

CSS is written directly inside the HTML element.

<p style="color: red;">Hello World</p>
Enter fullscreen mode Exit fullscreen mode

It is useful for quick testing but generally not recommended for large projects.

2. Internal CSS

CSS is written inside a <style> element in the HTML document.

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
Enter fullscreen mode Exit fullscreen mode

This is useful when styles are specific to a single HTML page.

3. External CSS

CSS is stored in a separate .css file.

HTML:

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

CSS:

p {
    color: green;
}
Enter fullscreen mode Exit fullscreen mode

External CSS is generally preferred for larger websites because the same stylesheet can be reused across multiple pages.

11. What is the CSS Box Model?

Answer:

The CSS Box Model describes how the browser calculates the size and spacing of an HTML element.

Every element can be thought of as a rectangular box containing four main areas:

+-----------------------------+
|           Margin            |
|  +-----------------------+  |
|  |        Border         |  |
|  |  +-----------------+  |  |
|  |  |     Padding     |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  |  Content  |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+
Enter fullscreen mode Exit fullscreen mode

The four parts are:

  1. Content – actual text, image, or other content.
  2. Padding – space between content and border.
  3. Border – line surrounding the padding and content.
  4. Margin – space outside the border.

Example:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}
Enter fullscreen mode Exit fullscreen mode

By default, the declared width applies to the content area.

Using:

box-sizing: border-box;
Enter fullscreen mode Exit fullscreen mode

makes width and height include the content, padding, and border, which is often easier for layout calculations.

12. What is the difference between margin and padding?

Answer:

The main difference is where the space is created.

Padding creates space inside the element, between the content and border.

Margin creates space outside the element, between the element and surrounding elements.

Example:

.card {
    padding: 20px;
    margin: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Here:

  • padding: 20px creates space around the content inside the card.
  • margin: 30px creates space around the outside of the card.

A simple way to remember it:

Padding = inside space
Margin = outside space

13. What is CSS Flexbox?

Answer:

Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange elements in a row or column.

To create a flex container:

.container {
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

For example:

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Important Flexbox properties include:

  • display: flex
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • gap
  • flex-grow
  • flex-shrink
  • align-self

justify-content controls alignment along the main axis.

align-items controls alignment along the cross axis.

Flexbox is especially useful for navigation bars, cards, buttons, centering elements, and one-dimensional layouts.

14. What is CSS Grid?

Answer:

CSS Grid is a two-dimensional layout system. It allows developers to arrange elements using rows and columns.

Example:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

This creates three columns.

Example HTML:

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Grid provides properties such as:

grid-template-columns
grid-template-rows
gap
grid-column
grid-row
Enter fullscreen mode Exit fullscreen mode

Grid is useful for:

  • Website layouts
  • Dashboards
  • Photo galleries
  • Product grids
  • Complex two-dimensional designs

15. What is the difference between Flexbox and Grid?

Answer:

Both Flexbox and Grid are modern CSS layout systems, but they are designed for different purposes.

Flexbox is primarily a one-dimensional layout system. It works mainly along a row or column.

Example:

.nav {
    display: flex;
    gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Grid is a two-dimensional layout system. It can control rows and columns at the same time.

Example:

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
}
Enter fullscreen mode Exit fullscreen mode

A simple way to remember:

Flexbox → One dimension
Grid → Two dimensions

However, they can also be used together. For example, Grid can create the overall page layout while Flexbox can arrange elements inside individual components.

16. What is CSS specificity?

Answer:

CSS specificity determines which CSS rule takes priority when multiple rules apply to the same element.

For example:

<p id="title" class="text">Hello</p>
Enter fullscreen mode Exit fullscreen mode 
p {
    color: black;
}

.text {
    color: blue;
}

#title {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

The text will be red because the ID selector has higher specificity than the class and element selectors.

A simplified specificity order is:

Inline style
    ↓
ID selector
    ↓
Class / Attribute / Pseudo-class
    ↓
Element / Pseudo-element
Enter fullscreen mode Exit fullscreen mode

For example:

#title {
    color: red;
}

.text {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

The ID selector wins.

The !important declaration can override normal declarations, but it should be used carefully because excessive use makes CSS difficult to maintain.

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

Answer:

Both properties can make an element invisible, but they behave differently.

display: none

The element is removed from the layout.

.box {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

The browser does not reserve space for it.

visibility: hidden

The element becomes invisible, but its original space remains.

.box {
    visibility: hidden;
}
Enter fullscreen mode Exit fullscreen mode

For example, if you have three boxes:

Box 1    Box 2    Box 3
Enter fullscreen mode Exit fullscreen mode

If Box 2 uses display: none:

Box 1    Box 3
Enter fullscreen mode Exit fullscreen mode

If Box 2 uses visibility: hidden:

Box 1    [space]    Box 3
Enter fullscreen mode Exit fullscreen mode

Therefore:

  • display: none → hidden and removed from layout.
  • visibility: hidden → hidden but space remains.

18. What are CSS pseudo-classes?

Answer:

Pseudo-classes are keywords used to select elements based on their state, position, or user interaction.

They start with a colon (:).

For example:

button:hover {
    background-color: blue;
}
Enter fullscreen mode Exit fullscreen mode

This applies when the user moves the mouse over the button.

Another example:

input:focus {
    border-color: green;
}
Enter fullscreen mode Exit fullscreen mode

This applies when the input receives focus.

Common pseudo-classes include:

:hover
:focus
:active
:visited
:first-child
:last-child
:nth-child()
:checked
:disabled
Enter fullscreen mode Exit fullscreen mode

Example:

li:first-child {
    font-weight: bold;
}

li:nth-child(2) {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-classes are very useful for interactive interfaces and selecting elements based on their state or position.

19. What are media queries in CSS?

Answer:

Media queries are used to apply different CSS styles depending on the characteristics of the device or viewport.

They are especially important for responsive web design.

Example:

.container {
    width: 80%;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}
Enter fullscreen mode Exit fullscreen mode

Here, the .container normally has a width of 80%. When the viewport is 768 pixels or smaller, its width becomes 100%.

Media queries can be used for:

  • Mobile phones
  • Tablets
  • Laptops
  • Desktop screens
  • Printing

Example:

@media (max-width: 600px) {
    .nav {
        flex-direction: column;
    }
}
Enter fullscreen mode Exit fullscreen mode

This allows a website to adapt to smaller screens.

Responsive design is important because users access websites from many different screen sizes.

20. What is the difference between relative, absolute, fixed, and sticky positioning?

Answer:

CSS provides several positioning methods.

position: relative

The element remains in the normal document flow but can be moved relative to its original position.

.box {
    position: relative;
    top: 20px;
    left: 10px;
}
Enter fullscreen mode Exit fullscreen mode

The original space occupied by the element is still preserved.

position: absolute

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
}
Enter fullscreen mode Exit fullscreen mode

This is commonly used for badges, icons, overlays, and elements positioned inside containers.

position: fixed

The element is positioned relative to the viewport and generally stays in the same place when the page is scrolled.

.button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
Enter fullscreen mode Exit fullscreen mode

This can be used for floating buttons or fixed navigation elements.

position: sticky

Sticky positioning behaves like a relatively positioned element until a specified scrolling threshold is reached.

.header {
    position: sticky;
    top: 0;
}
Enter fullscreen mode Exit fullscreen mode

When the user scrolls and the element reaches top: 0, it can remain stuck there while its containing area allows it.

Quick comparison

Position Main Purpose
relative Move an element relative to its normal position
absolute Position an element relative to a positioned ancestor
fixed Keep an element positioned relative to the viewport
sticky Make an element stick during scrolling

Understanding these positioning methods is important because they are frequently used when creating modern web layouts.

Top comments (1)

Collapse
 
payilagam_135383b867ea296 profile image
Payilagam •

Good selection of Interview Questions. Keep up the good work!