Estou fazendo uma landing page como challenge do Frontend Mentor e gostaria de saber quais as melhores tags semânticas para fazer esse bloco abaixo. Utilizei o <blockquote>
para a citação, porém não sei qual tag usar para o autor da frase.
2 Respostas
Estou me baseando nessa resposta no SO.
<blockquote>"Money is the real cause of poverty,"
<footer>
<cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
</footer>
</blockquote>
Isto está de acordo com o exemplo da especificação. Mas não tem nada na específica que só assim é certo.
E que antes se fazia assim, o que particularmente achei mais bonito:
<figure>
<blockquote>
"This is what I think"
</blockquote>
<footer>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</footer>
</figure>
Coloquei no GitHub para referência futura.
Tem uma outra resposta que usou esta forma:
<blockquote cite="http://a.uri.com/">
<p>This is a really insightful sentence.</p>
<cite>Darko Z</cite>
</blockquote>
E nela cita que em HTML5 a citação não deve usar o nome do autor, então é um pouco confuso.
A MDN que é meio que uma documentação "oficial" que as pessoas usam dá este exemplo:
<blockquote>
<p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
<footer>
First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html"><i>Nineteen Eighty-Four</i></a></cite> by George Orwell (Part 1, Chapter 1).
</footer>
</blockquote>
Mas já vi coisas erradas na MDN.
Um trecho importante da específica:
User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g: by server-side scripts collecting statistics about a site's edits), not for readers
Está dizendo que o uso disto não é para o leitor e sim para algo interno, privado, para uso de ferramentas.
Seu uso parece mais interessante para os indexadores que podem usá-lo como quiserem, não tem um padrão estabelecido.
Tem outra perguntas que tem respostas, mas não achei elas tão fundamentas.
Procurei e não achei um jeito certo de fazer, tem a ver com gosto, principalmente se a citação não envolve um aspecto científico, mas é bom usar o cite
de uma forma ou outra para dar semântica e pelo menos os buscadores indexarem de forma adequada. Provavelmente ajudará na acessibilidade, e algumas ferramentas pode ter seu trabalho melhor.
Obviamente o visual é algo que você dará com CSS e outras formas do HTML que nada tem a ver com a citação em si.
-
Fantástico já me trouxe uma luz muito grande, reparei que ainda não há um certo consenso e dando uma olhada em outras fontes percebi esse mesmo problema, mas esses seus exemplos me pareceram muito bons, verei o que melhor se enquadra para a minha intenção. Muito obrigado. Commented 22/08/2019 às 19:13
Numa blockquote
podes usar tag footer
para mencionar a origem da mesma, exemplo:
<blockquote cite="http://www.imdb.com/character/ch0000672/quotes">
<p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
<footer>— <a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy in Aladdin</a></footer>
</blockquote>
-
Interessante, parece-me que tem mais haver com o que eu preciso. Muito obrigado Commented 13/08/2019 às 15:52
<blockquote>
, pois você não estaria citando uma fonte externa. Está apenas apresentando depoimentos e isso não é uma citação.