semantic tag uses

Hey, I’m wondering what sort of designs or sections of a website require certain tags semantically. For example, cards tend to use <article>, would anyone be able to give any insight or even a link to a a guide perhaps? Which leads me to another question, should span only be used for styling portions of text or are there more use cases for it? Thanks in advance!
3 Replies
Joao
Joao10mo ago
A similar question was just posted here as well: https://discord.com/channels/436251713830125568/1150676689102323733
snxxwyy
snxxwyy10mo ago
Oh awesome, thanks a lot! Two quick questions, should a header tag be wrapped around a navbar? For example-
<header class=“navbar”>
Logo
Navbar
Nav buttons
</header>
<header class=“navbar”>
Logo
Navbar
Nav buttons
</header>
Should we use the <menu> tag?
Joao
Joao10mo ago
You can use it in different ways, and one typical use is to wrap the navbar (not the other way around):
The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header#usage_notes The <menu> I don't use it much to be honest but I think it should be used for things like dropdown menus for example. Anywhere where you need some sort of list of elements that are meant to be interactive.