Complete dashboard page — sidebar + KPIs + charts + table
The full HTML structure of a data-science dashboard. Semantic tags: header, aside, main, section, article.
Semantic HTML uses tags that describe MEANING, not just appearance: <aside> — sidebar content, tangential to the main content. <main> — the main content of the page (only one per page). <header> — introductory content (page title + action button). <section> — a thematic grouping (KPI row, charts, table). <article> — a self-contained piece (one KPI card, one chart card). <nav> — navigation links. Why use semantic tags instead of div? 1. Screen readers use them to navigate (accessibility). 2. Search engines understand the page structure (SEO). 3. CSS targeting is clearer: .sidebar vs #sidebar vs aside. The structure: dashboard > [sidebar (aside), main > (header, sections)] — clean hierarchy.
-
Add a 4th KPI <article> inside .kpi-row→ 4-column KPI row -
Add a new <section> below the table with a form→ form section appears -
Change <aside class="sidebar"> to just <div class="sidebar">→ loses semantic meaning (still works visually) -
Add <footer> at the bottom of <main>→ footer appears at the bottom of the main content