\n\n\nHTML Interview\n\n\n\n\n\n"}},{"@type":"Question","name":"What is the alt attribute on tags and how should decorative vs informative images be handled?","acceptedAnswer":{"@type":"Answer","text":"The alt (Alternative Text) attribute provides a textual description of an image for screen reader users, search engine crawlers, and situations where image loading fails or network bandwidth is constrained.\n\nGolden Rules for alt Text (Accessibility WCAG 2.2):\n1. Informative Images:\n - Provide concise, meaningful context describing the function or information conveyed by the image.\n - Do NOT start with \"Image of...\" or \"Picture of...\"; screen readers already announce the element as an image.\n2. Decorative Images (Crucial Interview Detail!):\n - Images that are purely visual flourishes (background gradients, decorative borders, icons paired with adjacent text labels) MUST use an empty alt attribute: alt=\"\" (also called \"null alt\").\n - This explicitly signals screen readers to skip the image silently.\n - If you omit the alt attribute entirely (), screen readers fall back to reading the raw image filename (\"bg dot png\"), creating an annoying user experience.\n3. Functional Images (Icons inside buttons):\n - If an image is the sole child of a link or button, its alt text acts as the accessible name of the control (e.g. ).\nCode Example:\n\n\n\n\n
\n \n
Featured Developer
\n
\n\n\n\n \n"}},{"@type":"Question","name":"How does the HTML Table model work (, , ,
,
,
) and how do you ensure accessibility?","acceptedAnswer":{"@type":"Answer","text":"HTML tables are designed exclusively for tabular data (multi-dimensional data points with row and column relationships), NEVER for page layout or grid positioning.\n\nCore Anatomy of an Accessible Table:\n-
: Root table wrapper.\n-
: The title of the table, placed immediately after
. Provides an accessible heading for screen readers.\n- : Header section containing column titles.\n- : Body section containing the core data records.\n- : Summary or totals row displayed at the bottom.\n-
: Table row container.\n-
: Table header cell. By default, bold and centered.\n-
: Table data cell. Standard data entry.\n\nEnsuring Table Accessibility:\n1. Use scope=\"col\" on column headers and scope=\"row\" on row headers so screen readers announce the correct header when users navigate across individual data cells.\n2. Always provide a
element.\n3. For complex multi-tiered headers, use id on
and headers=\"id1 id2\" on
.\nCode Example:\n
\n
Quarterly Engineering Department Expenses (2026)
\n \n
\n
Department
\n
Q1 Budget
\n
Q2 Budget
\n
Status
\n
\n \n \n
\n
Cloud Infrastructure
\n
$120,000
\n
$135,000
\n
Approved
\n
\n
\n
Security & Compliance
\n
$45,000
\n
$50,000
\n
Under Review
\n
\n \n \n
\n
Total Expenditure
\n
$165,000
\n
$185,000
\n
Active
\n
\n \n
"}},{"@type":"Question","name":"What are colspan and rowspan attributes in HTML tables and how do they alter table grid layout?","acceptedAnswer":{"@type":"Answer","text":"In HTML tabular data, colspan and rowspan allow individual cells (
or
) to merge across multiple columns or rows, similar to cell merging in Microsoft Excel.\n\n1. colspan (Column Span):\n - Expands a cell horizontally across multiple columns to its right.\n - Example:
Project Timeline
causes that header to span 2 column widths.\n - The subsequent
in that row must omit one cell to account for the merged space, otherwise the table grid becomes uneven and distorted.\n\n2. rowspan (Row Span):\n - Expands a cell vertically down across multiple rows below it.\n - Example:
Frontend Team
merges the cell down into the next row.\n - In the next
, you must omit the corresponding cell position because it is already occupied by the row-spanning cell above.\n\nAccessibility Caution:\nExcessive or uneven use of colspan/rowspan can disorient screen reader users navigating using table navigation hotkeys. Always test merged tables with assistive tools or maintain simple grid structures.\nCode Example:\n
\n
Team Shift Roster
\n \n
\n
Team
\n
Member
\n
Working Hours (AM / PM)
\n
\n \n \n
\n \n
Frontend
\n
Alice Smith
\n
09:00 - 13:00
\n
14:00 - 18:00
\n
\n
\n \n
Bob Jones
\n
10:00 - 14:00
\n
15:00 - 19:00
\n
\n \n
"}},{"@type":"Question","name":"How do you properly associate
![\"\"](\"decorative-sparkle.svg\")
\n ![\"Architecture](\"../images/diagram.png\")
\n\n\n"}},{"@type":"Question","name":"What is the alt attribute on ![](\"bg.png\")
), screen readers fall back to reading the raw image filename (\"bg dot png\"), creating an annoying user experience.\n3. Functional Images (Icons inside buttons):\n - If an image is the sole child of a link or button, its alt text acts as the accessible name of the control (e.g. ).\nCode Example:\n\n![\"Bar](\"quarterly-revenue-chart.png\")
\n\n\n![\"\"](\"cart-icon.svg\"){kind=icon}
\n"}},{"@type":"Question","name":"How does the HTML Table model work (, , ,