Structured Data, Accessible Data Tables, Lists, and Native Interactivity
Structure complex data architectures: accessible tables with header scoping, description lists, native disclosures (<details>/<summary>), and modal dialogs (<dialog>).
Semantic HTML and form foundations.
Structure tabular datasets using <caption>, <thead>, and <th scope>, and implement native disclosures and modal dialogs.
Read in order, or jump to what you need.
Every lesson builds on the one before it. Open any lesson to read the explanation, run the examples, and try the practice challenges.
- 04.01Accessible Data Tables: <caption>, <thead>, <tbody>, and <th scope>4 min
Master accessible tabular data presentation: <caption> summaries, structural table partition sections (thead, tbody, tfoot), and explicit header cell associations via scope and id/headers.
- 04.02Lists Architecture: Ordered (<ol>), Unordered (<ul>), and Description (<dl>)4 min
Master list semantics: ordered sequential workflows (<ol>), unordered sets (<ul>), key-value metadata glossaries (<dl>, <dt>, <dd>), and multi-level nested list trees.
- 04.03Native Interactive Disclosures: <details> and <summary>4 min
Build zero-JavaScript interactive accordions and disclosures: <details>, <summary>, open attribute state synchronization, toggle events, and accessible disclosure patterns.
- 04.04Native Modals & Overlays: <dialog> Element and the Popover API4 min
Engineer modern modal dialogs and non-modal popovers: HTML5 <dialog> (showModal vs show, ::backdrop pseudo-element, focus trapping) and the declarative Popover API.
Ready to move on?
Create an accessible data table with column/row scoping and a native modal confirmation dialog.
Open the module self-check