Rebuild a page of <div>s using semantic elements. Which elements, and what do you gain?
Whether you pick elements by the role of the content, not just for styling hooks.
Semantic elements name the ROLE of content instead of using generic <div>/<span>: <header>, <nav>, <main> (one per page), <article> (self-contained, syndicatable), <section> (thematic group that needs a heading), <aside> (tangential), <footer>, plus <figure>/<figcaption>, <time>, <mark>. Payoffs: (1) Accessibility — screen readers expose these as landmarks so users jump straight to nav or main; a <div> announces nothing. (2) SEO — crawlers weight <main>/<article> content. (3) Maintainability — the markup documents its own intent. Rule of thumb: reach for a <div> only when no semantic element fits (a pure styling wrapper). Keep the heading hierarchy (<h1>…<h6>) logical and never skip levels. Interactive controls must be real <button>/<a> — a clickable <div> forces you to re-implement focusability, keyboard activation and the ARIA role you would have gotten for free.
Every layout: choose the element that describes the content's role; fall back to <div> only for styling.