HTML5 landmark elements are used to improve navigation
Typically, a web page is divided up into areas. This can be done visually:
The problem is that these areas are all just div blocks. There is no meaning behind them. For that we need some semantic HTML. Semantic means "meaning". We need to think about the meaningful HTML of each area, and give it a name. Then, if you can't physically see these areas, your screen reader will announce them to you.
Let's look at ways to name the areas in Webflow to help all our users.
So let's say I have this layout:
You understand that the top area is for the company logo and navigation, the footer is for the company address and links to legal, privacy and accessibility policies. The area on the left is the main content of the page and the area on the right could be for additional content or links to related content. Each of these areas now has a semantic meaning and assistive technology can tell the user what part of the page they are on.
In Webflow you use the Element settings > Tag to define the page areas. These are very useful for assistive technology to announce where the user is on the page, and gives a good idea of whether this is what they are looking for.
Note that in the Webflow Designer, this tag does NOT change the name of the Section on the page or in the Navigator. It only appears in the HTML of the published website.
Google Lighthouse says
HTML5 elements such as main, nav, and aside act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology.