Interview Questions on HTML and CSS

Prepare for web development roles with top HTML and CSS Interview Questions. Master layout, styling, responsiveness, and key coding concepts for success.

Q1. What is HTML?

Answer:
HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure of a webpage using elements like <p>, <h1>, <div>, etc.

Q2. What are tags and attributes in HTML?

Answer:

• Tags: HTML elements enclosed in angle brackets (< >). Example: <p>, <h1>, <img>.
• Attributes: Provide additional information about elements. Used to define the properties of tags. Example: src for image tag, height, and width for paragraph tag.

<img src=”img.jpg” />

<p style=”height:200px;width:300px;”>This is paragraph 1</p>

Q3. What is HTML5? How is it different from HTML 4?

Answer:
HTML5 is the latest version of Hypertext Markup Language, designed to improve the structure, flexibility, and functionality of web pages. It introduces new elements, attributes, making it easier to develop modern web applications.
 

Key differences from HTML 4:

• New semantic elements: <header>, <footer>, <article>, <section>, etc.
• New form input types: email, date, number, range, etc.
• Support for multimedia with <audio> and <video> tags.
• Improved storage: Web Storage (localStorage, sessionStorage) replaces cookies.
• Better support for mobile and responsive design.

Q4. What are HTML forms, and how are they used?

Answer:
Forms collect user input using <input>, <textarea>, <select>, and <button>.

<form action="submit.php" method="post">

  Name: <input type="text" name="name"><br>

  Email: <input type="email" name="email"><br>

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

</form>

action: URL where data is sent.

method: HTTP method (GET or POST).

Q5. How does HTML5 handle multimedia content?

Answer:
HTML5 introduces the <audio> and <video> tags to embed multimedia content without third-party plugins like Flash.
Example:

<video controls>

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

  Your browser does not support the video tag.

</video>

Features:

• Native playback support for different formats.
• The controls attribute provides play, pause, and volume options.
• Multiple <source> elements can be used to support different formats.

Q6. What is the difference between localStorage and sessionStorage?

Answer:
Both are part of the Web Storage API used for storing key-value pairs in the browser.

• localStorage: Data persists even after the browser is closed.
• sessionStorage: Data is stored temporarily and removed when the session ends (browser is closed).
  Example:

Q7. What are the new input types introduced in HTML5?

Answer:
HTML5 introduces several new <input> types to enhance form validation and user experience:

• email - Validates email format.
• date - Provides a date picker.
• number - Allows numeric input.
• range - Creates a slider.
• tel - For telephone number input.
• color - Provides a color picker.

Q8. What is the difference between <b> and <strong>, and between <i> and <em>?

Answer:

• <b> (bold) vs. <strong> (strong importance):
  • <b> applies only visual styling (bold).
  • <strong> conveys meaning and is important for SEO and screen readers.
• <i> (italic) vs. <em> (emphasis):
  • <i> is for styling purposes (italic text).
  • <em> gives emphasis, making it more meaningful in screen readers.

Q9. What is the difference between cookies, localStorage, and sessionStorage? 

Q10. How does HTML5 improve form validation?

Answer:
HTML5 introduces built-in form validation without JavaScript using:

• Required fields: required attribute.
• Pattern validation: pattern attribute with regex.
• Number range: min and max attributes.
• Email and URL validation: type="email" and type="url".

Example:

     <input type="email" required>

    <input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

    <input type="number" min="1" max="10">

 

Q11. What is the difference between block, inline, and inline-block elements?

Answer:

• Block elements: Take up the full width (e.g., <div>, <p>, <h1>).
• Inline elements: Take up only as much width as needed (e.g., <span>, <a>, <strong>).
• Inline-block elements: Behave like inline elements but allow width and height (e.g., <button>, <input>).

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

Answer:

• <div> is a block-level element that takes the full width and is used to group content.
• <span> is an inline element used to apply styles to a part of text or an inline block.

Q13. How does HTML5 improve SEO?

Answer:

• Semantic elements (<article>, <nav>, <header>, <footer>) help search engines understand page structure.
• Faster loading times with <async> and <defer> improve rankings.
• Mobile-friendly elements enhance user experience.

Q14. What is the difference between the GET and POST methods used with the form tag?

Answer:

The GET and POST methods are two HTTP request methods used with the <form> tag in HTML. Here’s the key difference between them:

1. GET Method

• Data is sent in the URL as query parameters (e.g., ?name=John&age=30).
• Visible in the browser's address bar, making it less secure.
• Limited to 2048 characters (varies by browser).
• Suitable for retrieving data (e.g., search forms).
• Can be bookmarked and cached.

1. POST Method

• Data is sent in the request body, not visible in the URL.
• More secure (suitable for sensitive data like passwords).
• No size limit for data.
• Used for submitting or modifying data (e.g., login, registration).
• Cannot be bookmarked or cached.

Q 15. When to use what?

• Use GET when retrieving data (e.g., search queries, filters).
• Use POST when sending sensitive or large data (e.g., login, file upload).

Q16. What are semantic tags and non-semantic tags in HTML5?

Answer:

1. Semantic Tags

Definition:
Semantic tags in HTML5 clearly describe their meaning both to the browser and developers. These tags improve readability, SEO, and accessibility.

Example: 

<header>- defines a page or section header

<nav>- represents the navigation links

<section>- Groups the related content together

<article> - Represents an independent article

2. Non-Semantic Tags

Definition:
Non-semantic tags do not clearly define their content. They are generic containers used for styling and layout purposes.

Example: 

<div> - A generic block-level container

<span>A generic inline container

When to Use Which?

• Use Semantic Tags whenever possible to make the structure clear and SEO-friendly.
• Use Non-Semantic Tags (div and span) only when no appropriate semantic tag is available (e.g., for styling or layout purposes).

CSS Interview Questions and Answers

Q1. What is CSS?

1. Answer: Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and overall design of web pages.

Q2. What are the different types of CSS?

1. Answer:
2. Inline CSS: Applied directly within the HTML element using the style attribute.
3. Internal CSS: Written inside a <style> tag in the <head> section of an HTML document.
4. External CSS: Defined in a separate .css file and linked to the HTML using the <link> tag.

Q3. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

Answer:

Relative: Positioned relative to its normal position.

Absolute: Positioned relative to the nearest positioned ancestor (non-static).

Fixed: Positioned relative to the viewport, and it doesn't move when scrolling.

Sticky: Toggles between relative and fixed depending on the scroll position.

Q4. What is the difference between ID and class in CSS?

Answer:

id: A unique identifier for an HTML element, used with # in CSS.

class: A reusable identifier for multiple elements, used with . in CSS.

Q5. What is the Box Model in CSS?

Answer:

1. The CSS Box Model includes the following layers for every HTML element:
2. Content: The actual content of the box.
3. Padding: Clears space around the content.
4. Border: Wraps the padding and content.
5. Margin: Clears space outside the border, separating it from other elements.

Q6. How is em different from rem in CSS?

Answer:

em: Relative to the font size of its parent element.

rem: Relative to the root element's font size.

Q7. What is the difference between inline, block, and inline-block elements in CSS?

Answer:

1. Inline: Does not start on a new line and only takes as much width as necessary (e.g., <span>).
2. Block: Starts on a new line and takes up the full width available (e.g., <div>).
3. Inline-block: Behaves like an inline element but allows for the application of block-level properties like width and height.

Q8. What are pseudo-classes in CSS?

Answer:

Pseudo-classes define the special state of an element. Examples:

:hover - When the mouse is over an element.

:nth-child() - Matches elements based on their position in a parent element.

Q9. What is a media query in CSS?

Answer:

Media queries are used to apply styles based on the device's characteristics, like screen size or resolution. Example:

1. @media (max-width: 768px) {
2. body {
3. background-color: lightblue;
4. }
5. }

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

Answer:

1. visibility: hidden: The element is invisible but still takes up space in the layout.
2. display: none: The element is removed from the layout and doesn’t take up any space.

Q11. What are CSS Grid and Flexbox, and when should you use them?

Answer:

1. Flexbox: A one-dimensional layout model for arranging items in a row or column. Useful for aligning and distributing space among items.
2. Grid: A two-dimensional layout model that can handle both rows and columns. Best for creating grid-based layouts.

Q12. What is the z-index in CSS?

Answer:

The z-index property determines the stack order of elements. Higher z-values are placed in front of elements with lower values.

Q13. What are keyframe animations in CSS?

Answer:

Keyframe animations allow you to create animations by defining styles at specific keyframes using @keyframes. Example:

@keyframes slideIn {

from { transform: translateX(-100%);

}  

to { transform: translateX(0); }

}

div {

animation: slideIn 1s ease-in-out;

}

Q14. Explain the difference between min-width, max-width, and width.

Answer:

width: Sets the fixed width of an element.

min-width: Ensures the element is not smaller than the specified width.

max-width: Ensures the element does not exceed the specified width.

Q15. How do you optimize CSS for performance?

Answer:

Minimize and combine CSS files.

Use shorthand properties.

Avoid large numbers of CSS rules.

Remove unused CSS.

Do visit our channel to know more: SevenMentor 

Author:-

Shital Chauhan