Questions about Semantic HTML elements

Community resources General
1

Hi! I’m trying to understand how to use semantic tags to make my websites more accessible, and a few questions are emerging—could someone help me gain some clarity?

For one, how would I assign a “main” tag to just one element? In my Navigator, I might have several sections making up the “main” section?

Also, what is the difference between “header” and “nav” exactly? I’m not sure what to tag as “header.” I’m using a navigation component (which I understand automatically gets tagged as “nav.”) and within this are some header things like my logo and a site search. Perhaps I should nest the nav, logo, and search bar together in a div tagged as “header”?

Thirdly, I’m not sure how to tag the parts of a homepage like this: https://www.hilarybrewerdesign.de/
A blog or text page would be more straightforward— Likely there would be an “article” and “sections” nested within. But on the homepage, there are different kinds of information, like a hero section, some features with short descriptions, a form… how would I tag a page like that?

Thanks in advance…
Hilary

2

Hello @hilary, so the way you do it for the main tag is putting a div block that contains all your main content, and under that div’s settings you assign the main tag.
Screen Shot 2022-01-11 at 7.56.33 PM
You will have to do it for all your sections too, webflow doesn’t assign the Section tag to sections, they are just div tags.
So you can omit the header tag if you prefer or have it under your nav tag. I normally assign it to the container inside my nav tag that contains logo and nav links.
So if you are trying to build anything that has semantic html tags, or are looking for an example, you should follow the model that Finsweet uses on their ClientFirst cloneables https://webflow.com/website/fs-template-8. I hope this helps.

3

Pablo, wow this is so helpful!! Thanks so much for your response here!

1 Like