Plain boxes
This small page is built only from div elements. A div is a plain box: it groups content but says nothing about what that content is. The browser draws it fine, yet to a machine every part looks alike.
Besides drawing, the browser builds an accessibility tree: every part of the page with its role, what it is for. Screen readers read this tree. Every div has the role generic, so a listener hears no structure at all.
Naming the parts
Swap the first div for <header>, the page's introduction. On screen nothing changes: like div, header is drawn as a plain block. But in the tree its role turns from generic into banner.
<nav> marks a block of navigation links, such as the site menu. Its role is navigation. Not every group of links needs a nav: keep it for the main ways around the site.
<main> wraps the content this page is really about. It opens on line 3 and closes on line 5. Its role is main. A page must have only one visible main element.
<article> holds a self-contained piece, such as a blog post, a recipe or a comment, that would still make sense on its own. It sits inside main, so the tree nests it there. Its role is article.
<aside> holds content related to the page but not its main point: a tip, a sidebar, related links. Its role is complementary. The browser does not move it to the side; that is a job for CSS.
<footer> holds the closing details: contact, copyright, related links. At the top level of the page its role is contentinfo. A footer inside an article belongs to that article and is not a landmark.
Using the meaning
Five of these roles are landmarks: banner, navigation, main, complementary and contentinfo. A screen reader can list them and jump straight to one. In NVDA, the D key moves to the next landmark.
div is not wrong: it is the box of last resort, for grouping or styling when no element fits. Choose an element for what the content is, never for how it should look. Search engines and other tools can use the names too.
What happens
;; step 1/10 · div-soup file index.html (the body: 7 lines) 1 <div>Coffee Club</div> 2 <div><a href="/">Home</a></div> 3 <div> 4 <div><h1>Brew</h1></div> 5 </div> 6 <div>Tip: grind fresh</div> 7 <div>Contact us</div> div a generic box: no meaning of its own drawn five blocks, one under the other
By the browser's default styles, div, header, nav, main, article, aside and footer are all plain blocks: each starts on a new line and takes the full width. Swapping them changes no pixel. Real screen readers also read the heading and the link. The figure shows only the six boxes, so you can follow the roles.