Thread by @lixeletto

Galera, bateu uma dúvida aqui que talvez vocês tenham também: Que marcação utilizar ao criar um card no HTML?

O HTML varia muito dependendo do tipo de card:
- Card só como estética de conteúdo
- Card contendo link pra artigo/ página externa
- Lista de cards

A diferença de HTML entre um card só pela estética de card e um card para um link externo tá na necessidade de definir um escopo de conteúdo via sectioning content, se você nunca ouviu falar sobre isso eu explico um pouco na minha outra thread:

https://twitter.com/lixeletto/status/1445214584151986176?s=20

- Card só como estética de conteúdo
É a utilização da estética de card apenas pra organizar conteúdo, não referencia e nem contém links pra conteúdos externos. Geralmente são cards que apresentam features ou competências.

Como esse tipo de card tem esse formato apenas por estética e seu conteúdo tá dentro do contexto do resto do conteúdo do site, podemos usar uma <div> como container. Se toda a informação da seção estiver contida no card e em mais nenhum lugar, use <section>

Como o conteúdo desse card está direto no body, se você usar uma div e um header, esse header irá pertencer ao contexto do body. Caso seu body já tiver um header isso é considerado uma má prática, é como você criar dois cabeçalhos pro mesmo texto em um artigo

Nesse caso podemos usar um <hgroup>, é um container que serve pra guardar um ou mais headers. O nível desse heading é o mesmo do maior heading dentro dele. Se você tiver um h2 e um h3, o seu hgroup será um header de nível 2.

Caso tenha usado <section> e não <div> +

Você pode usar o elemento <header> pois como a <section> cria uma nova seção, o header vai se referir apenas ao card e não a todo o body.

No corpo do card podemos usar uma div pois esse container só vai servir pra alinhar e espaçar o corpo dos textos e não pra definir outlines

- Card contendo link pra artigo/ página externa
São usados como links para artigos, outras páginas e sites externos. Caso forem usados como links que fazem referência pro conteúdo da mesma página que eles estão, use o exemplo anterior

Como esse tipo de card faz referência a conteúdos fora do contexto do site, o correto é usar um article. Como ele cria um outline (uma seção), é possível usar header e footer dentro do corpo do card. Quando o botão do card redireciona para uma outra página, é melhor utilizar um a

Se você precisa que o card inteiro seja clicável, talvez você queira colocar o card inteiro dentro de uma âncora. O Heydon Pickering escreveu um artigo sobre como fazer isso de forma acessível:

inclusive-components.design/cards/

- Lista de cards
Lista de cards, geralmente à partir de informações trazidas do backend. Um exemplo são as trilhas de recomendação da netflix

Nesse caso, pra cada card siga as regras descritas acima, a única diferença é que esses cards estarão dentro de um <li>. Caso a ordem dos cards seja importante pra entender o conteúdo, use um <ol>, caso o conteúdo puder ser lido em qualquer ordem, use um <ul>.

Essa pode não ser a única forma de construir cards e eu talvez não tenha coberto todos os casos de uso, mas é uma formula que eu considero segura e tento aos poucos aplicar no dia-a-dia. É mais complexo do que o que costumamos ver por ai, mas tal como o JS, o HTML sempre tem +

espaço pra melhoria contínua e demanda estudo constante apesar de não mudar tão constantemente.

No tweet abaixo vou deixar referências, qualquer pergunta pode fazer na thread pra galera que tem as mesmas dúvidas ver também!

Cards no MDN
developer.mozilla.org/en-US/docs/Web…

Acessibilidade pra cards
inclusive-components.design/cards/

Talk sobre cards acessíveis com a Rian Rietveld com vários casos de uso diferentes

Ah! Codepenzinho com o card do primeiro tweet
codepen.io/camilo-michele…

Galera a @Luxferia me deu a dica de que o hgroup tá descontinuado. Vcs só vão achar essa informação documentada no item 11.1 da W3C - itens obsoletos. Caso forem agrupar headings usem div ou header

Referência:
w3.org/TR/2014/REC-ht…

Outra referência aqui!

https://twitter.com/Luxferia/status/1445800727868321800?t=nOKyhO-2oGb-y9iBWKIA4w&s=19