HTML & CSS Interview Questions and Answers

HTML tag is just opening or closing entity. For example <p> and </p> are called HTML tags. <br />
HTML element consists of opening tag, closing tag and content(optional for content-less tags). For example: <p> This is the content </p>, this complete thing is called HTML element.

HTML5 Web Storage is a mechanism in modern web browsers that allows web applications to store data locally within the user's browser. It provides two storage options: Local Storage and Session Storage.

The target attribute on <a>, <form>, or <area> tags specifies where to display the linked document or form submission response:

### Permitted Keywords:

• _self (Default): Opens the document in the current browsing context (same tab/window).
• _blank: Opens the document in a new browser tab or secondary window.
• _parent: Opens the linked document in the parent browsing context (useful when breaking out of an <iframe>).
• _top: Opens the linked document in the topmost browsing context, dismissing all nested frames.
• frameName: Opens the document inside a specifically named iframe: <iframe name="preview">.

*Security Best Practice:* Always combine target="_blank" with rel="noopener noreferrer" to protect against window.opener exploits.

The "em" tag is a semantic tag which is used to apply emphasis to a word or phrase within a paragraph. <br />
Example: The sentence "I really enjoyed cycling" could be written using the "em" tag to emphasize the word "really": "I <em>really </em> enjoyed the concert last night."

The <header> tag is used to defined the header section of a webpage which includes site logo, navigation menu, and other introductory content.

The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to external pages:

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="/categories">All Categories</a></li>
    <li><a href="/mock-interview">Mock Practice</a></li>
    <li><a href="/pricing">Pro Access</a></li>
  </ul>
</nav>

### Semantic Importance:

1. Screen Readers & Assistive Tech: Screen readers identify <nav> as a landmark region, enabling users with visual impairments to bypass header banners and jump directly to site navigation using landmark shortcut keys.
2. SEO: Search engine crawlers (like Googlebot) prioritize <nav> links to map site hierarchy and identify primary internal link graphs.
3. *Usage note:* Not all links belong in <nav>. It should be reserved for major navigational blocks, not footer legal disclaimers.

The <main> element represents the dominant, central content unique to the document.

### Rules of Usage:

• Content inside <main> should be unique to that specific page and exclude content repeated across multiple pages (such as global navigation links, copyright footers, sidebars, and logo banners).
• A document must not have more than one non-hidden <main> element.
• It must not be nested inside <header>, <footer>, <nav>, or <article>.

### Accessibility Role:
Exposes an explicit ARIA landmark (role="main"), enabling keyboard and screen reader users to skip repeated navigation bars and jump straight to the primary topic.

The <article> element represents a complete, self-contained composition in a document that is independently distributable or reusable (e.g. in syndication, RSS feeds, or news aggregators):

### Typical Use Cases:

• A technical interview question and solution entry
• A blog post or news article
• A forum post or user comment
• An interactive product card

### Structure Example:

<article class="interview-question">
  <header>
    <h2>What is the event loop in JavaScript?</h2>
    <span class="difficulty-badge">Hard</span>
  </header>
  <div class="solution-body">
    <p>Detailed architectural explanation...</p>
  </div>
  <footer>
    <time datetime="2026-09-20">Updated Sept 2026</time>
  </footer>
</article>

The <section> element represents a standalone thematic grouping of content, typically with a heading (<h2>-<h6>):

### How <section> Differs from <div> and <article>:

• <div>: Has no semantic meaning; purely used as a styling wrapper or flex/grid layout container.
• <section>: Represents a logical chapter or thematic block (e.g. "Introduction", "Code Example", "Common Pitfalls", "Interviewer Evaluation Rubric").
• <article>: Represents an independently distributable piece of content that could stand completely alone outside the page context.

### Semantic Rule of Thumb:
If the content represents a logical outline heading in the document's table of contents, wrap it in a <section>.

The <aside> tag is used to define content that is related to the main content of a webpage, but is not directly part of it. It is often used to provide additional information to the main content.

The <footer> tag is used to define the footer section of a webpage which contains copyright information, contact details, and other legal content.

The <figure> element represents self-contained content, optionally accompanied by a caption (<figcaption>), that is referenced as a single unit from the main text flow:

<figure>
  <img src="/diagrams/event-loop.webp" alt="JavaScript Call Stack and Event Queue Diagram">
  <figcaption>Figure 1: Visual representation of the Microtask vs Macrotask Queue.</figcaption>
</figure>

### Advantages:

• The content can be moved away from the primary text flow (e.g. into an appendix or sidebar) without affecting the document's flow.
• Accommodates not only images, but also code blocks, diagrams, data tables, audio clips, or quotes.

The <figcaption> element provides a semantic caption or legend for its parent <figure> element:

### Usage Rules:

• Must be nested as either the first child or the last child of a <figure> element.
• Automatically associates the caption text with the media element for assistive technologies, allowing screen readers to announce the caption as the official description of the figure.

The <blockquote> tag is used to indicate that a section of text is being quoted from another source. It is used to highlight a particularly important quote.

The <datalist> tag is new addition to HTML5, and it is used to provide a list of pre-defined options for an input field. It allows us to create dropdown list of options.

The <option> tag is used to define an option in a dropdown list. The 'value' attribute in <option> tag is specifies the value of the option that will be submitted when the form is submitted.

The data=\* attribute allows us to store additional information about an HTML element that is not otherwise displayed on the page, but may be useful to scripts that interact with the page.

The <legend> tag provides semantic caption or title for a <fieldset> element. It is optional but better for better to have for accessibility.

The <picture> element in HTML5 is used to provide multiple versions of an image at different resolutions or sizes, and allows the browser to choose the best version to display based on the user's device and viewport size.

CSS stands for Cascading Style Sheets. CSS is used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes.

The universal selector is a css selector that can be used to apply styles to all elements on a page or to reset styles for all elements to their default values

Margin is the space between the border of an element and the surrounding elements, while padding is the space between the content of an element and its border.

The CSS position property controls how an element is positioned on a page. The possible values are static, relative, absolute, fixed, and sticky

Relative positioning moves an element relative to its current position without affecting the position of other elements, while absolute positioning positions an element relative to its closest parent element, potentially affecting the position of other elements.

The CSS clear property controls whether an element is allowed to float next to another element or not. The possible values include left, right, both, and none. When an element is cleared, it will be moved below any floated elements.

The CSS z-index property controls the stacking order of elements on a page. Elements with a higher z-index value are displayed on top of elements with a lower z-index value. The default value of z-index is auto.

A CSS animation allows elements to transition smoothly between different style configurations over time using keyframes, without writing custom JavaScript animation loops:

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.badge-live {
  animation: pulse 2s infinite ease-in-out;
}

### Core Animation Properties:

• animation-name: The @keyframes identifier.
• animation-duration: Total time for one complete cycle (e.g. 300ms, 2s).
• animation-timing-function: Acceleration curve (ease, linear, cubic-bezier()).
• animation-iteration-count: 1, 3, or infinite.
• animation-fill-mode: forwards retains the styles of the final keyframe after completion.

A transition in CSS is a way to create animation effects when a property of an HTML element changes, allowing developers to smoothly animate changes to an element's style over a specified duration.

A linear gradient creates a smooth transition between two or more colors in a straight line while the radial gradient creates a smooth transition between two or more colors in a circular shape.

Flexbox is a CSS3 layout module which provides more flexible and efficient way to align arrange and align the elements within the container. It is widely supported by the modern web browser.

flex-grow is a property in Flexbox that specifies how much a flex item should grow relative to the other items in the container, while flex-shrink specifies how much a flex item should shrink relative to the other items when there is not enough space available in the container.

flex-wrap: nowrap prevents flex items from wrapping to the next line when they overflow the container, while overflow: hidden hides any content that overflows the container's boundaries.

The gap property in Flexbox sets the spacing between flex items, both horizontally and vertically. It is a shorthand for row-gap and column-gap.

CSS Grid Layout is a powerful two-dimensional layout system designed for simultaneously controlling both rows and columns:

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

### Grid vs Flexbox:

• Flexbox: One-dimensional (handles items along either a row OR a column).
• CSS Grid: Two-dimensional (positions items across intersecting horizontal and vertical tracks).

### Key Terminology:

• Grid Container: Element with display: grid.
• Grid Tracks: Columns and rows defined via grid-template-columns and grid-template-rows.
• Fractional Unit (fr): Represents a fraction of the available free space in the grid container.
• Grid Template Areas: Named layout regions ("header header" "sidebar main" "footer footer").

grid-row is used to position an item within a row, while grid-column is used to position an item within a column. Both properties can take a value of either a number or a named grid line.

A CSS transition enables you to create gradual, interpolated animations between two visual states of an element when a CSS property value changes (such as on :hover, :focus, or dynamic class toggling):

.cta-button {
  background-color: #2563eb;
  color: #ffffff;
  transition: background-color 0.25s ease-in-out;
}

.cta-button:hover {
  background-color: #1d4ed8;
}

### The 4 Transition Sub-Properties:

1. transition-property: Names which properties to animate (background-color, transform, opacity).
2. transition-duration: Duration of animation (200ms, 0.5s).
3. transition-timing-function: Mathematical easing curve (ease, linear, cubic-bezier).
4. transition-delay: Delay before animation starts.

The transition-property CSS property specifies the exact names of the CSS properties that should animate when their values change:

/* Recommended: Explicitly named properties */
.box {
  transition-property: transform, opacity;
  transition-duration: 300ms;
}

### Why You Should Avoid transition-property: all:

• Performance Overhead: Specifying all forces the browser to monitor and interpolate every single animatable property on every DOM reflow, degrading rendering performance.
• Unintended Side Effects: Accompanying properties (such as width or margins) might animate unexpectedly during screen resizing, resulting in jittery UI layouts.

The transition-timing-function property specifies the rate of change of the transition over time. This can be used to control the speed of the transition and how it accelerates and decelerates. Example: ease-in, ease, ease-out.

The translate() function is used to move an element along the x-axis and/or y-axis, while the rotate() function is used to rotate an element clockwise or counterclockwise around a given point.

RGBA is similar to RGB, but it includes an additional alpha value that represents the opacity of the color. The alpha value is a number between 0 and 1, with 0 being completely transparent and 1 being completely opaque.

CSS filters are a set of visual effects that can be applied to HTML elements using CSS. Filters can be used to adjust the appearance of an element in various ways, such as changing its color, blurring or sharpening it, adjusting its brightness or contrast, and more.

A CSS sprite is a technique used to combine multiple images into a single image file, reducing the number of HTTP requests required to load the page and improving loading times.

The :not() functional pseudo-class (known as the negation pseudo-class) matches elements that do not match the selector argument provided inside its parentheses:

/* Style all buttons except disabled ones */
button:not(:disabled) {
  cursor: pointer;
  background-color: #2563eb;
}

/* Style list items except the last one with a divider */
li:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}

/* CSS Selectors Level 4: Supports comma-separated selector lists */
p:not(.lead, .disclaimer) {
  font-size: 1rem;
}

*Note:* The specificity of :not() is determined by the highest specificity selector inside its argument list.

The :visited pseudo-class styles anchor links (<a>) that the user has already navigated to in their browser history:

a:visited {
  color: #7c3aed; /* Purple indicator for visited links */
}

### Strict Browser Privacy Restrictions:
To prevent malicious websites from sniffing a user's browsing history by styling links and reading back computed styles with JavaScript, modern browsers enforce strict security restrictions on :visited:

• Only color-related properties are permitted: color, background-color, border-color, outline-color, and SVG fill/stroke.
• Alpha transparency components are ignored.
• JavaScript methods like getComputedStyle() will always lie and report the unvisited color.

The :active pseudo-class represents an element in the process of being activated by the user.

### When Is It Triggered?

• The moment a user presses and holds the primary mouse button down on an element, lasting until the mouse button is released.
• During physical touch tap on mobile touchscreen displays.

### Classic Button Press Animation:

.btn {
  transform: scale(1);
  transition: transform 0.1s ease;
}

.btn:active {
  transform: scale(0.96); /* Provides physical tactile click sensation */
}

### The LVHA Ordering Rule:
When styling links, define pseudo-classes in this exact order to prevent cascade overriding:

1. :link
2. :visited
3. :hover
4. :active (LoVe HAte mnemonic)

The lang() pseudo-class is used to target elements based on the language attribute of the HTML document. For example, you can use :lang(en) to target all elements in English, or :lang(fr) to target all elements in French.

The :checked pseudo-class is used to target form elements that have been selected by the user, such as checkboxes or radio buttons. This can be used to change the appearance or behavior of the selected element.

The @media rule in CSS allows developers to apply styles to a web page based on the size of the device or screen being used to view it, making it more responsive.

A fluid layout in CSS adjusts its width and height based on the size of the screen, while a fixed layout has a set width and height. Fluid layouts use percentages to set their dimensions, while fixed layouts use pixels.

In CSS media queries, min-width sets the minimum screen width at which a set of styles will be applied, while max-width sets the maximum screen width at which a set of styles will be applied. For example, if you use min-width: 768px, the styles will only be applied to screens that are 768 pixels wide or larger, while if you use max-width: 768px, the styles will only be applied to screens that are 768 pixels wide or smaller.

Responsive design in CSS adapts to different screen sizes and devices by using flexible grids, fluid images, and media queries to adjust the layout and content of the website. Adaptive design in CSS, on the other hand, uses predefined layout sizes and breakpoints to adjust the layout and content based on the screen size and device being used.

The overflow property specifies what should happen if content overflows an element’s box. It's possible values are: auto, none, scroll, visible.

visibility:hidden means the tag is not visible, but the space is allocated for it on the page. display:none means the tag will not appear at all and there will be no space allocated for it between the other tags.

The content property is used exclusively in conjunction with the ::before and ::after pseudo-elements to generate decorative or supplementary visual content without adding extra HTML DOM elements:

/* Generating an icon or badge indicator */
.required-field::after {
  content: " *";
  color: #ef4444;
  font-weight: bold;
}

/* Clearing floats (Micro clearfix) */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

*Accessibility Note:* Content generated via CSS content was historically invisible to screen readers; today, screen readers may read it. Never insert critical textual information solely via content.

The line-height property defines the height of an inline line box, determining the vertical distance between baselines of consecutive lines of text:

### Value Formats:

1. Unitless Number (Best Practice):

   body { line-height: 1.5; }
   

A unitless number acts as a proportional multiplier of the element's current font-size. Child elements inherit the multiplier rather than a fixed computed pixel size, preventing text overlapping if children declare larger font sizes.

1. Lengths (px, rem): line-height: 24px; (Rigid, breaks on dynamic font scaling).
2. Percentages (150%): Can cause inheritance calculation issues in nested headers.

Specificity in CSS is a way of determining which CSS rule applies to an element. It is based on the number of selectors and their types in a CSS rule. Specificity is calculated using a formula: inline styles have the highest specificity, followed by IDs, classes, and then elements.

The word-wrap property (renamed in modern CSS specifications to overflow-wrap) specifies whether the browser may break long unbreakable character sequences (such as lengthy URLs, hash strings, or file paths) onto a new line to prevent horizontal layout overflow:

.card-content {
  /* overflow-wrap is the standard; word-wrap is legacy alias */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

### Difference from word-break: break-all:

• overflow-wrap: break-word only breaks a word if the entire word cannot fit onto a line by itself.
• word-break: break-all aggressively breaks words at the exact right margin boundary regardless of whether the word could fit unbroken on the next line.

TailwindCSS is a utility-first CSS framework that provides pre-defined CSS classes that can be used to rapidly build custom user interfaces.

A CSS preprocessor is a tooling program that extends standard CSS syntax with programmatic capabilities (such as variables, functions, mixins, and nested rules), compiling the code into standard, browser-compatible CSS before runtime:

### Popular Preprocessors:

• Sass / SCSS: The industry standard preprocessor.
• Less: JavaScript-based preprocessor.
• Stylus: Expressive, Python-inspired syntax.

### Key Preprocessor Features:

• Nesting: Structuring selectors to mirror HTML hierarchy.
• Mixins: Reusable blocks of styles passed with arguments.
• Partials & Modules: Splitting styles into files (_variables.scss, _buttons.scss) and importing via @use.
• *Modern Context:* Many native CSS features (CSS variables, native CSS nesting @scope, color functions) have adopted ideas originally introduced by preprocessors.

A CSS preprocessor generates CSS code from source code written in a higher-level scripting language, whereas a post-processor takes existing CSS code and applies transformations or optimizations to it. In other words, a preprocessor is used during development, while a post-processor is used after development to optimize performance.

Sass is a CSS preprocessor that adds functionality to CSS, such as variables, nesting, and more. It allows us to write more efficient code and simplifies task like browser compatibility.

Sass and SCSS are both CSS pre-processors and are very similar, but they have different syntax. Sass has a more concise and less verbose syntax, with no curly braces and no semicolon whereas SCSS has a syntax that is almost identical to standard CSS, with curly braces and semicolons

Sass nesting is a feature that allows us to write CSS selectors that are nested within one another which makes our code easier to read and understand.