Question 1

What does semantic HTML mean, and why do interviewers care?

Accepted Answer

Using elements for meaning (header, nav, main, article) rather than only divs for layout. Semantic tags communicate document structure to browsers, assistive tech, and crawlers. They improve accessibility tree quality, default keyboard behavior, and SEO signals. Layout still uses CSS; semantics describe role. Prefer button over clickable divs, and lists for list content.

Question 2

When should you use

vs

?

Accepted Answer

is self-contained content;

is a thematic grouping;

is a meaningless styling/scripting hook. Use article for posts, cards, or widgets that make sense alone. Use section when a heading groups related content. Use div when you need a box with no semantic meaning. Overusing section without headings is an anti-pattern.

Question 3

What is the difference between

, , and heading elements?

Accepted Answer

is metadata;

is introductory page/section chrome; h1–h6 define outline hierarchy. head lives in the document head and holds title, meta, links. header can appear in body for branding/nav or section intros. Heading levels should form a logical outline — don't skip levels for styling.

Question 4

Why is a single <main> landmark important?

Accepted Answer

It marks the primary content once per page so AT users can skip chrome. Screen readers expose landmarks. Multiple mains confuse navigation. Hide repeated chrome outside main. Pair with skip links for keyboard users.

Question 5

How do you structure a blog post with semantic HTML?

Accepted Answer

article containing header (title/meta), optional nav for TOC, sections with headings, footer for author/related. Keep one h1 for the page title. Nest sections under article. Use time with datetime for publish dates. Avoid wrapping the entire site in article.

Question 6

What is the HTML outline and how do browsers treat heading levels?

Accepted Answer

Authors should use heading levels for hierarchy; the historic outline algorithm is not reliably used by browsers/AT. In practice, use visual and accessibility-friendly heading order. Don't rely on sectioning roots to reset heading ranks. Tools and AT mostly follow explicit h1–h6.

Question 7

When is <aside> appropriate?

Accepted Answer

For tangentially related content — sidebars, pull quotes, related links — not primary flow. If removing aside breaks the main story, it probably shouldn't be aside. Site-global sidebars may be better as complementary landmarks with care.

Question 8

Explain <nav> usage — one or many?

Accepted Answer

Use nav for major navigation blocks; multiple navs are fine if labeled. Primary site nav, TOC, and pagination can each be nav. Distinguish with aria-label. Don't wrap every link list in nav.

Question 9

What are phrasing vs flow content, and why does it matter?

Accepted Answer

Content categories constrain valid nesting — e.g. p cannot contain block-level flow like div. Invalid nesting causes browsers to fix the DOM unexpectedly. Knowing categories prevents mysterious layout bugs and hydration mismatches.

Question 10

How would you mark up a FAQ for accessibility and SEO?

Accepted Answer

Use headings + content, or details/summary; consider FAQ schema in JSON-LD carefully. Ensure keyboard access and visible focus. Don't fake accordions with non-button controls. Prefer progressive enhancement.

Question 11

What is the role of

and

?

Accepted Answer

Associate media with a caption as a single unit. Useful for images, diagrams, code samples. Caption can be before/after media. Improves semantics vs orphaned text under an image.

Question 12

When should you use <address>?

Accepted Answer

For contact information for the nearest article or body author — not every postal address on the page. Misusing address for arbitrary locations is common. It's specifically contact info for the document/section author.

Question 13

Design a semantic layout for a dashboard with app chrome and widgets.

Accepted Answer

banner/header + nav + main containing complementary widgets as sections/articles; avoid landmark spam. Name regions. Keep one main. Self-contained widgets can be articles. Prefer headings inside widgets for AT navigation.

Question 14

What makes an accessible name for a control?

Accepted Answer

Visible label, aria-label, aria-labelledby, or native labeling associations. Prefer visible label for. aria-label overrides and can hurt i18n if not translated. Decorative icons need careful naming so buttons aren't silent.

Question 15

Why are clickable

s an accessibility problem?

Accepted Answer

They lack button semantics, keyboard activation, and often focus styles. Use button or a href. If unavoidable, add role, tabindex, key handlers, and focus styles — still inferior to native.

HTML Interview Questions & Answers

HTML interview topics

All HTML interview questions

Semantics interview questions

Accessibility interview questions

Forms interview questions

Media interview questions

SEO interview questions

APIs interview questions

Performance interview questions

Security interview questions