HTML Semantic Tags and Accessibility Quiz

List the concrete benefits of using semantic HTML elements (like <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) instead of wrapping everything in <div>s. Name at least three.

Build an HTML document outline for a blog post page using sectioning elements (<header>, <main>, <article>, <section>, <footer>). Each level of the outline should have exactly one heading; do not skip heading levels.

Use <figure> and <figcaption> to mark up a captioned image. The caption should describe the image content, and the markup should remain accessible if the image fails to load.

Rewrite the div-heavy layout below so that each region is exposed as an ARIA landmark. Prefer the implicit role of semantic elements (<header>, <nav>, <main>, <aside>, <footer>) over explicit role attributes, and only add explicit roles where the semantic element cannot carry the right landmark.