Webpages should be formed as semantic documents and HTML 5 provides several tags to help us organise our document.
Examples of these tags are: Header, Nav, Main, Aside, Section, Article, Form, Footer.
Using these landmarks will describe the structure and content of our webpages and they will also help assistive technology like screen readers greatly improve the experience for users. Screen reader users can jump directly to these landmarks from a list for example.
You could use no landmark tags at all, and instead use only div tags and the webpage would look great with no visual difference. But, for SEO and accessibility this would be very bad as there would be no semantic html to structure and describe our webpages. There for you should use landmark tags where appropriate instead of relying on div or span tags which have no semantic meaning and do not describe the document.
When building components, you should look at where this component is going to sit in the overall document and choose the appropriate landmark tags so your component uses the correct semantic markup to fit in to the document.
You should try to use these landmarks judiciously as the more landmarks added to a document the more users will have to search through them all to find what they are looking for.
Therefor you should test with a screen reader how the overall page works and not build and test your component in isolation.
NVDA Screenreader showing landmarks
The image above is a screenshot of the screenreader NVDA and it's elements list.
Users of screen readers do not sit and listen to every single word to be read on a webpage. That would take a long time. Just like sighted users who skim over a webpage, taking in all the headings, links, paragraphs, images etc, assistive technology users will use a screen reader to skim over the content using NVDA's elements list to find what they are looking for and jump straight to it.
Notice how the BBC website has done a good job of structuring their HTML so that banners, navigation and the main content of the website is clearly defined and nested.
Header
When used as a child of the <body> tag, this will be seen as a 'banner' and typically has things like the company branding, search bar and other user features. There should only be one header in the <body> tag.
The header tag can also be a child of an article, aside, main, nav or section to further organise those landmarks.
Nav
This tag is identified as 'navigation' and describes an area that usually contains links.
There can be multiple nav tags in the document, but you should use an aria-label to describe the intention of that tag. For example, the main navigation would have an aria-label of "Primary", which helps users understand which navigation this is when there are multiple.
Main
This should contain the main body of the content for the document. There should be only one of these tags per page.
Aside
This is often called a 'complementary' landmark. It is a part of the document that supports the main content, but remains meaningful when separated from the main content.
An example of this would be the sticky product information that appears on a PDP.
When there are multiple aside tags in a document, they need to have a unique aria-label to describe them.
Section
This tag represents a stand alone part of the document. It's a very generic way to separate parts of a document. A good example of sections would be on the homepage where we have the Boss your bathroom links, Shop by category, Shop by Style, Newly added, Ideas and Inspiration, Shop by Brand.
Sections should always have a heading to describe it.
A section tag would not be used to wrap around say a nav tag, as the nav tag has the semantics to describe what it already is. Adding a section around it would only add more noise and confusion for the user.
Article
An article is a stand alone element on a page that can be reused and is independent in it's own right.
Good examples of articles are a blog post, a product card, a users review.
Form
A form tag will group together related form fields to submit information.
It is good practice to add a aria-label or aria-described by attribute to further help identify what this form is for.
Footer
This tag can be used as a child of the body or as a child of other tags like article.
This landmark usually helps describe company information, lists of links or information about the author of an article.
Links with further information:
https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html
https://developer.chrome.com/docs/lighthouse/accessibility/use-landmarks/