`), links to stylesheets (`<link>`), and character encoding. This information is not visibly displayed. The `<body>` tag contains all the visible content of the web page, such as text, images, and links. **Points a strong answer covers:** - <html>: root; <head>: metadata (title, links, meta) - <body>: rendered content - Head content is not displayed **Common mistakes:** - Putting visible content in head **Likely follow-ups:** - What belongs in <head> for performance (preload)? **What the interviewer is assessing:** - Document-structure basics. ### 3. What is the 'alt' attribute on an <img> tag used for, and why is it crucial for accessibility? The `alt` (alternative text) attribute provides a textual description of an image. It is crucial for accessibility because it's what screen readers announce to visually impaired users, allowing them to understand the image's content. It also serves as a placeholder if the image fails to load and helps with SEO by providing context to search engines. **Points a strong answer covers:** - alt = textual description of image - Screen readers announce it; shows on load failure; SEO - Decorative images: empty alt to skip **Common mistakes:** - Stuffing keywords into alt **Likely follow-ups:** - alt for a purely decorative divider -- what value? **What the interviewer is assessing:** - Accessibility-reflex check. ### 4. Explain the difference between block-level elements and inline-level elements in HTML, providing an example of each. **Block-level elements** (like `<div>`, `<p>`, `<h1>`) always start on a new line and take up the full width available to them. They can contain other block or inline elements. **Inline-level elements** (like `<span>`, `<a>`, `<img>`) do not start on a new line and only take up as much width as their content requires. They typically exist *within* block-level elements. **Points a strong answer covers:** - Block: new line, full width (div, p, h1) - Inline: flows with text, content width (span, a, img) - Inline elements ignore width/height (until inline-block) **Common mistakes:** - Not knowing inline sizing limits **Likely follow-ups:** - What does inline-block add? **What the interviewer is assessing:** - Layout-model fundamentals. ### 5. What are the main differences between the <ol> (ordered list) and <ul> (unordered list) HTML elements? Both elements are used to group a list of items using `<li>` tags. The key difference is presentation and meaning. An `<ol>` (ordered list) is used when the *order* of the items is important, and it displays them with numbers by default (e.g., step-by-step instructions). An `<ul>` (unordered list) is used when the order does not matter, and it displays them with bullet points by default (e.g., a list of features). **Points a strong answer covers:** - <ol>: numbered, order matters (steps) - <ul>: bullets, order irrelevant - Both contain <li>; semantics affect a11y **Common mistakes:** - Choosing by appearance not semantics **Likely follow-ups:** - Nested lists -- valid markup? **What the interviewer is assessing:** - Semantic-choice detail. ### 6. Can you explain the four components of the CSS box model and how they interact with each other? The CSS box model describes the rectangular boxes that are generated for elements. The four components, from the inside out, are: **1. Content:** The text, image, or other content. **2. Padding:** The transparent space *around* the content, inside the border. **3. Border:** The line that goes *around* the padding and content. **4. Margin:** The transparent space *outside* the border, which separates the element from other elements. **Points a strong answer covers:** - Content -> padding -> border -> margin - Padding inside background; margin outside, transparent - Margins collapse vertically; total size math **Common mistakes:** - Forgetting margin collapse **Likely follow-ups:** - Two stacked divs with 20px margins -- gap size and why? **What the interviewer is assessing:** - Box-model precision -- the classic CSS filter. ### 7. What is CSS specificity, and how does the browser decide which CSS rule to apply when there are conflicts? CSS Specificity is the set of rules a browser uses to determine which CSS style declaration is the most 'specific' and therefore should be applied to an element. It's a weighted system. From most specific to least: **Inline Styles** (highest), **IDs**, **Classes/Attributes/Pseudo-classes**, and finally **Elements/Pseudo-elements** (lowest). A more specific selector will always override a less specific one. **Points a strong answer covers:** - Specificity: inline > id > class/attr/pseudo-class > element - Later rules win at equal specificity; !important overrides (avoid) - Calculated per selector as a tuple **Common mistakes:** - Random !important spam to force styles **Likely follow-ups:** - Compare .nav a vs a.link -- which wins? - Why is !important a maintenance trap? **What the interviewer is assessing:** - Cascade-mastery check. ### 8. What is the difference between 'padding' and 'margin' in CSS, and when would you use one over the other? Both create space, but their location differs based on the CSS box model. **Padding** is the space *inside* an element's border, between the border and the content. You use it to give the content 'room to breathe' within its box. **Margin** is the space *outside* an element's border. You use it to create space *between* that element and other elements on the page. **Points a strong answer covers:** - Padding: space inside border (bigger clickable area, background included) - Margin: space between elements - Margin collapse; negative margins exist **Common mistakes:** - Using them interchangeably until it breaks **Likely follow-ups:** - Clickable area of a button -- which one grows it? **What the interviewer is assessing:** - Spacing-model clarity. ### 9. Explain the three main ways to add CSS to an HTML page (inline, internal, and external stylesheets). **1. Inline:** The CSS is written directly inside an HTML tag using the `style` attribute (e.g., `<p style="color: red;">`). This is bad practice. **2. Internal:** The CSS is written inside a `<style>` tag within the HTML's `<head>` section. **3. External:** The CSS is written in a separate `.css` file and linked from the HTML's `<head>` section using a `<link>` tag. This is the best practice for maintainability and caching. **Points a strong answer covers:** - Inline style attr; internal <style>; external .css file - External: caching, reuse, separation -- production default - Inline highest specificity, worst maintainability **Common mistakes:** - No trade-off reasoning **Likely follow-ups:** - When is inline CSS legitimate (emails, critical CSS)? **What the interviewer is assessing:** - Practical-organization basics. ### 10. Describe the difference between 'class' selectors and 'id' selectors in CSS. When should you use each? Both are used to select HTML elements. An **ID selector** (e.g., `#header`) is used to select *one unique element* on the page. An ID must be unique. A **Class selector** (e.g., `.button`) is used to select *one or more elements* that share a common style. You can apply the same class to many elements. You should use classes for reusable styles and IDs for unique page landmarks. **Points a strong answer covers:** - class: reusable, many per element - id: unique per page, high specificity - Classes for styling; ids for anchors/JS hooks **Common mistakes:** - Styling everything with ids **Likely follow-ups:** - Why do CSS methodologies avoid id selectors? **What the interviewer is assessing:** - Selector-strategy judgment. ### 11. What is the 'z-index' property in CSS, and how does it affect the stacking order of elements? The `z-index` property controls the vertical stacking order (which element is 'in front' or 'behind' another) of elements that have a 'position' value other than 'static' (e.g., 'relative', 'absolute', or 'fixed'). An element with a higher `z-index` value will be displayed in front of an element with a lower `z-index` value. **Points a strong answer covers:** - z-index: stacking order among positioned elements - Only works on positioned/flex/grid items - Stacking contexts trap children (transform, opacity create them) **Common mistakes:** - Not knowing stacking contexts exist **Likely follow-ups:** - z-index 9999 not working -- why (stacking context)? **What the interviewer is assessing:** - Debugging-depth probe -- everyone hits this bug. ### 12. What is the difference between 'visibility: hidden' and 'display: none' in CSS? Both properties make an element invisible. **`display: none`** completely removes the element from the document flow. It takes up no space, and other elements will 'reflow' to fill its spot. **`visibility: hidden`** simply makes the element invisible, but it *still occupies its original space* in the layout. The page layout does not change. **Points a strong answer covers:** - visibility:hidden -- invisible but keeps space, in DOM - display:none -- removed from layout entirely - Both stay in DOM (vs removal); transitions differ **Common mistakes:** - No layout-space distinction **Likely follow-ups:** - Which can you animate? - Impact on screen readers? **What the interviewer is assessing:** - Rendering-detail check. Full topic: https://useastra.in/interview-questions/topic/frontend

`, and `