Pergunta

Eu costumava usar apenas p e span elementos para isso ... mas estou sempre empurrando para usar os direito elementos, e isso é algo que eu realmente não tenho pensado antes no que diz respeito para depoimentos.

Isto é o que eu tinha em mente ...

<div class="testimonial">
 <blockquote>I love your products!</blockquote>
 <span>Jim Testimonial-giver</span>
</div>

O que se parecem a melhor maneira de fazer isso? Existe uma melhor prática?

Eu olhei para a forma como a W3C marcação depoimentos em seu site e eles usaram ...

<blockquote>
 <p>
  <a id="aptest" name="aptest">Applied Testin.....</a>
  <br />
  <span class="QuoteAttr">-- Shane P. M...</span>
 </p>
</blockquote>

Eu deveria copiar a forma como o W3C fez isso, depois de tudo não deveriam ser correta ?

Foi útil?

Solução

Use a citar tag :

<div class="testimonial">
 <blockquote>i love your products</blockquote>
 <cite>Jim Testimonial-giver</cite>
</div>

Também eu provavelmente iria fazê-lo como este:

<blockquote class="testimonial">
  i love your products
  <cite>Jim Testimonial-giver</cite>
</blockquote>

Apenas para torná-lo um pouco mais semântica e gravata claramente a citação com a citação. Divs só deve ser necessário para que as coisas estruturais.

Outras dicas

O Mozilla.org guia de estilo parece preferir usar q para a cotação e <cite> para o autor, envolto em um <blockquote> ou um <div> com uma classe apropriada. HTML 5 parece fortemente carranca sobre o uso <cite> para os nomes das pessoas; ele diz que ele só deve ser usado para os títulos de obras.

A seguir esse modelo, talvez algo como isto:

<blockquote class="testimonial">
  <q>I love your products!</q>
  <cite>Jim Testimonial-giver</cite>
</blockquote>

Ou se você não quiser usar <cite>, então:

<blockquote class="testimonial">
  <q>I love your products!</q>
  <span class="quote-attribution">Jim Testimonial-giver</span>
</blockquote>

Durante muito tempo eu costumava Tantek de Çelik slides como uma referência quando se tratava de citações.

Mas, vendo os comentários de Alex e Rex M, eu estou pensando sobre essa implementação para depoimentos:

<ul id="testimonials">
  <li>
    <blockquote>
      i love your products
    </blockquote>
    <cite>&mdash;Jim Testimonial-giver</cite>
  </li>
  <li>
    <blockquote>
      i love your products even more
    </blockquote>
    <cite>&mdash;Joe Testimonial-giver</cite>
  </li>
  [...]
</ul>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top