How to organise HTML structure for SPAs

Organising HTML Structure for Single Page Applications (SPAs)

In Single Page Applications (SPAs), the HTML file usually serves as the main container for your app. Unlike traditional multi-page sites, SPAs rely on JavaScript to dynamically load and replace content without reloading the entire page. This means the HTML structure should be minimal, clean, and optimized for dynamic updates.

Basic HTML Structure for an SPA

Best Practices for HTML in SPAs

1
Keep the root HTML (index.html) minimal — usually just a <div id="app"> as the mounting point.
2
Load JavaScript bundles (from frameworks like React, Angular, or Vue) to handle routing and rendering.
3
Use semantic HTML inside your SPA components for accessibility and SEO.
4
Place global styles or meta tags in <head>, but let JavaScript handle most UI updates.
5
Include a <noscript> message for users with JavaScript disabled.

Difficulty: 5/10

Topics: semantic hierarchy, routing containers, performance optimization

Scenario Questions

0-2 years experience

1
You need to add a new view to our single-page app. How would you structure the HTML for that view to keep it consistent with the rest of the app?
2
If you placed a <div id='app'> inside another container that already has its own layout, what could go wrong with CSS and routing?

2-5 years experience

1
We noticed that after a navigation event, some elements from the previous page linger in the DOM. What could be wrong with how the HTML is organized, and how would you fix it?
2
When deciding where to put a global navigation bar versus view-specific content, what trade‑offs do you consider in the HTML hierarchy of an SPA?

5-8 years experience

1
Our SPA is growing to dozens of routes and we’re seeing performance degradation during initial load. How would you reorganize the HTML (e.g., lazy‑load containers, split templates) to improve load time and maintainability?
2
If we need to support server‑side rendering for SEO while keeping client‑side navigation, how would you design the root HTML structure to accommodate both?

8+ years experience

1
We are migrating a legacy multi‑page site to a SPA that will be shared across several product teams. What high‑level HTML architecture would you propose to enable independent development, theming, and future micro‑frontend integration?
2
How would you establish a convention for HTML structure across dozens of repositories to ensure consistency, accessibility, and easy onboarding for new engineers?

Follow-up Questions

❓Can you walk me through how you’d clean up stale elements after navigation?
❓What impact does your HTML hierarchy have on CSS specificity and theming?
❓How would you test that the structure works across different browsers and assistive technologies?