What tag should be used for grid children? <li/>?
Usually I just nest divs and spans like this:
but I was wondering if there's some more semantic and accessible way of doing this. I think
<ol/> and <li/> would be a better approach.22 Replies
what exactly are you trying to do?
I have a list of product cards that I'm displaying in a 3xN grid. The cards have buttons, price, description, name and all the other stuff that you'd usually see on a product listing on an eCommerce website.
https://youtu.be/PGvgdZuQu6w <-- you might want to check this video
Kevin Powell
YouTube
Is HTML the hardest language?
✅ Join the Discord: https://css.community
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with conf...
it's not specifically about this, it's about a challenge, but kevin goes through concepts that should help you
will do.
thanks
In my opinion just use divs by default. Spans for inline-esque elements of text. And use semantic elements only when needed. Since I only use web for games and desktop tools where screenreader support is just not a thing we do, i may be a bit more reluctant / never consider accessibility like that. But I believe bad usage of sematic elements could be worse than not using them at all
In the end the css doesn't care what the element is. The only style difference between a div and a span is their default
display value so you can use that to your advantage to write one line less css
I wouldn't use ul and li for product cards. There's probably text, images and buttons / links on that card. I'd only use li for traditional bullet point style lists like
- item 1
- item 2the thing about semantic elements is that you should always try to use them whenever they're appropriate, but it's better to default to using div and span if you're unsure and can't figure it out
we should be trying to be semantic, but it's better to not be semantic than wrong
that said, it is important to try your best.
I saw the entire 36 min but it still doesn't really answer my question.
I have a grid of cards. Each card has info on a product.
My reasoning for wrapping them in
<li/> was that they are technically a list.
First time I'm hearing of this. Admittedly, I do force myself to be semantic even if I know I'm wrong, like using section and article tags instead of divs.
But I believe bad usage of sematic elements could be worse than not using them at allHonestly i don't think I've ever felt confident in my choice of tags. I do force it a lot.
note that the response to this should be to gain more knowledge so you're more confident, not to stop using them
yes, of course. I do watch kevin a lot but accessibility is still a hit or miss. I did generally believe i was doing better than most my peer devs because they don't use them at all, at least I was using them even if I was wrong a lot of times... guess I was wrong.
Is there any good resouce that can help with knowing what tag should be used in what situation? MDN isn't all that verbose tbh and I usually just look at the top articles that come up on googling these things.
if you want more verbose, just the html spec, which ... don't
those things are very cryptic. I'm not sure I have what it takes to decipher them.
something in between?
just mdn
it is already the in between
Erick has a couple of #resources posts with links to a11y stuff, though that's much broader than just semantic tag use (and potentially even more important):
https://discord.com/channels/436251713830125568/1090726078164779019
https://discord.com/channels/436251713830125568/1071085522690261103
And there's another post by kira linking to an article about semantic tags, though I haven't read it myself https://discord.com/channels/436251713830125568/1076221164030009465
I'll rather just stick with divs and spans in that case. MDN hasn't been a good resouse on this subject. I've relied on it for a very long time and it hasn't taken me very far.
Lemme take a look real quick
I do have to say as well, semantic HTML gets a lot more complicated the second you're not making something that could vaguely be described as a blog
like, if you're building a web application, the choice of elements is a lot more complicated
Yes, I can see that. I randomly clicked on a11y project and what it had for lists fits with what I was trying to do
grid-like layoutNo wonder even big websites like amazon and google stay away from semantic tags.
honestly, those sites are too large to care about catering for seo
google is the "se" in "seo"
and amazon is just too big
imagine what would happen if google stopped showing amazon
everybody would blame google for it
I mean, even my websites with decent-at-best accessibility rank high or first on results so I am not sure it has all that big of an impact.
I try to do accessibility cause it's the right thing and not because I want the SEO benefit from it.
well I still don know if I should or shouldn't use list so I'ma go with divs as suggested.
i can see why you want it to be a list
personally, i wouldn't, if it is for cards
for something like tags, i would use lists