Element for a card/card-container in HTML5?

Question

The specification for the article element says:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

So, if I'm building a website where, in its home page, I have cards that are clickable and leads you to the article page, would be better - in semantic - if this card would be a section or an article element?

Answer 1

It can be appropriate to use the article element for post teasers. It depends on what content you show. For example:

• Yes: If you show the title, a description, an image, the author name, and the publication date, you should definitely use the article element.
• No: If you only show the title, an article element wouldn’t be warranted, because each teaser would become an entry in the document outline (as article is a sectioning content element), but there isn’t much point for an outline entry if it doesn’t contain any additional content.
• Maybe: Something inbetween. Title and date? Probably not. Title and description? Probably yes.

If you decide to use article (and only then!), you can use the bookmark link type for the link to the full article page. This can be a hint that your article isn’t the "full thing".

If you decide not to use article, don’t use section. If choosing between article and section, article is the correct choice for a teaser. But if article isn’t appropriate, you shouldn’t use another sectioning content element, but something like p and/or ul (and no heading elements).