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
Joao14mo ago
A similar question was just posted here as well: https://discord.com/channels/436251713830125568/1150676689102323733
snxxwyy
snxxwyy14mo 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
Joao14mo 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.
Want results from more Discord servers?
Add your server