HTML Interview10 Q&A

HTML Layout Interview

Layout interview Q&A on landmarks, structural planning, and robust page composition.

1What is a page layout in HTML?easy

Answer: It is the structured arrangement of major page regions like header, nav, main, aside, footer.

2Why avoid table-based layout?medium

Answer: Tables are for tabular data; layout tables hurt semantics and accessibility.

3How does main help layout?easy

Answer: It identifies the core content area for users and assistive technologies.

4header and footer usage?easy

Answer: Header introduces page/section context; footer provides closing or supporting info.

5When to use aside?medium

Answer: For tangential content like side notes, related links, or callouts.

6Can sectioning elements repeat?medium

Answer: Yes, section/article/aside/header/footer can repeat contextually; main is typically single.

7How to balance semantics and styling?medium

Answer: Use semantic HTML for structure, then CSS (Flexbox/Grid) for visual layout.

8What layout decisions improve maintainability?medium

Answer: Clear landmarks, shallow nesting, reusable section patterns, and naming consistency.

9Mobile-first layout meaning?medium

Answer: Design for smaller screens first, then progressively enhance for larger screens.

10Interview best-practice summary?medium

Answer: Semantic landmarks + responsive CSS + accessibility-aware hierarchy.

Tricky Q&A (10 Questions)

11How many main elements should a page have?tricky

Answer: Correct answer: One. One main landmark per page is recommended.

12aside is best for:tricky

Answer: Correct answer: Tangential sidebar content. aside holds related but non-essential content.

13header inside article typically contains:tricky

Answer: Correct answer: Introductory heading/meta for that article. header can introduce a section or article.

14footer inside article may include:tricky

Answer: Correct answer: Author/byline or related links for that article. footer suits meta info about its section.

15nav should wrap:tricky

Answer: Correct answer: Major navigation blocks. Use nav for primary navigation regions.

16section requires:tricky

Answer: Correct answer: Always a heading for accessibility. Sections should generally have a heading.

17Correct order inside body often includes:tricky

Answer: Correct answer: header, main, footer landmarks. Typical page flow uses header, main content, footer.

18div vs semantic tags:tricky

Answer: Correct answer: semantic tags convey meaning. Semantic tags describe purpose, not just layout.

19figure element is for:tricky

Answer: Correct answer: Self-contained media with optional caption. figure groups media + figcaption.

20Layout-only styling should use:tricky

Answer: Correct answer: CSS on semantic structure. Separate structure (HTML) from presentation (CSS).