Hacker News new | ask | show | jobs
by troupo 34 days ago
True! And Mozilla is one of the good guys.

What I should've said in my hastily written comment should have been: "and other implementations of the same (or other) functionality isn't divs and spans?"

I think my only true criticisms for Tailwind example would be:

- should've probably used h2/h3 for card titles. Though this is dependent on where and how the card is used

- should've done more with the meta (number / date). But in a real world these would probably still be spans (for example, to mark them in different colors etc.)

HTML doesn't have a card element. So when you create one, you... use whatever's available. And divs and spans in HTML+CSS literally exist to manipulate layout and text.

BTW, my favorite accessible card is this one: https://inclusive-components.design/cards/ And it's probably even more weird. Demo: https://heydon.github.io/Inclusive-Components/cards-redundan... (check the CSS also)
1 comments
xigoi 34 days ago
> HTML doesn't have a card element.

I feel like this is a bad example because “card” is a presentation thing, not a content thing. On a social media site, you can have cards with submissions, in which case <article> is the proper tag – and “card” is just a way to style the submission, so it deserves to be a class.

link
troupo 34 days ago
> I feel like this is a bad example because “card” is a presentation thing, not a content thing.

It is both, and herein lies the problem with HTML and the quest for purity. The content you display in a card differs from the content you display in a different context.

The world is filled with "bad examples".

> so it deserves to be a class.

I guess I haven't looked at <article> docs since it was introduced many years ago [1]. Talk about "semantic" lol. The entire definition has been twisted and turned to be nearly indistinguishable from a <div> element. TIL that "product card" is an "article" [2].

I guess the reason why people use divs is that they may look for a corresponding semantic element, but don't see it in the list, and don't look into technical details, so reach for a generic div.

Interestingly enough, best practice is (or was a couple of years ago) to actually use a card as a list element in a list, see: https://wpaccessibility.day/2024/sessions/how-to-design-and-...

[1] Originally, of course, they were always meant for texts that "could be published or syndicated separately if needed" https://www.w3.org/WAI/GL/wiki/Using_HTML5_article_element

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... while the spec still talks about mostly actual articles and text content: https://html.spec.whatwg.org/multipage/sections.html#the-art... HTML as text-only and text-centric markup is uniquely unsuited for... well, almost anything (even for most text use cases).

link