Start with the page’s purpose
Before adding layout classes, write the regions your page actually needs. A portfolio usually has a site header, primary navigation, one main content area and a footer. A project detail may also have a related-work sidebar. This content map helps avoid a document filled with anonymous containers whose roles are only apparent visually.
Choose elements for meaning
Use header for introductory content, nav for a substantial navigation group and main for the page’s central subject. A footer can contain contact and copyright information. A section should represent a meaningful grouping, normally with a heading. An article should make sense as a self-contained entry, such as a journal post or project case study.
Label repeated navigation
Consider a project page with links across the top and a table of contents beside the article. Give the first navigation an accessible name such as Main navigation and the second a name such as On this page. These names describe their purpose without requiring a screen reader user to open each region and inspect its links.
Keep the content order honest
Write the DOM in the order people should read it: introduction, evidence, then next steps. Use CSS to arrange the regions without moving a visually prominent call to action far away from its logical context. A beautiful two-column arrangement still needs a sensible sequence when the columns stack or the stylesheet fails.
Avoid adding unnecessary roles
Native elements already provide many useful semantics. Adding a navigation role to nav is usually redundant; assigning button semantics to a noninteractive section is actively misleading. More landmarks do not automatically mean more clarity. If every small card becomes its own named region, the page’s navigation outline can become harder to scan.
Verify the resulting map
Inspect the accessibility tree and navigate by landmarks with a screen reader. Confirm that the central content has one clear main region, repeated navigations have distinct names, and a footer has not accidentally been placed inside the article. Finally, read the page without styles: its structure should remain understandable without relying on position, color or animation.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.