4

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.

Resultado

4
  • Uma pergunta importante que não foi comentado: o que significa esse bloco? Seriam depoimentos de clientes? Comentários em uma publicação? Resposta a um questionário?
    – Woss
    Commented 13/08/2019 às 16:18
  • Como é algo fictício não sei dizer exatamente o que seria, em minha interpretação imaginei que fossem apenas relatos de pessoas que trabalham em empresas imaginárias que utilizam o serviço da Fylo. Assim como aqueles sites que colocam os relatos das pessoas que fizeram uma avaliação no Facebook.
    – Alexandre
    Commented 13/08/2019 às 17:42
  • 1
    Então discordo com uso de <blockquote>, pois você não estaria citando uma fonte externa. Está apenas apresentando depoimentos e isso não é uma citação.
    – Woss
    Commented 13/08/2019 às 17:44
  • @Alexandre Alguma das respostas resolveu sua dúvida? Acha que pode aceitar uma delas? Veja o tour como fazer isso, se ainda não o fez. Você ajudaria a comunidade identificando qual foi a melhor solução para você. Pode aceitar apenas uma delas. Mas pode votar em qualquer pergunta ou resposta que achar útil no site todo
    – Maniero
    Commented 17/08/2019 às 0:16

2 Respostas 2

2

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.

1
  • 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.
    – Alexandre
    Commented 22/08/2019 às 19:13
1

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>

1
  • Interessante, parece-me que tem mais haver com o que eu preciso. Muito obrigado
    – Alexandre
    Commented 13/08/2019 às 15:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .