Quotations – Citações

Algumas vezes precisamos destacar parte do texto, principalmente quando  estes trechos pertencem, ou foram retirados, de outras fontes que precisam ser indicadas. Destes, o primeiro elemento que temos são as “Quotation inline“, sou simplesmente “<q>“, estas tags podem ser utilizadas para marcar pequenas citações inline. 

<section class="exemplo">
<b> Exemplo </b>
<p>
    WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>
</p>
</section>

Visualmente não notamos mudança no texto, a não ser pelas aspas.

Bloquete

O elemento <bloquete> define uma seção que cita um conteúdo de outra fonte, o atributo “cite” pode ser utilizando para indicar a URL da fonte; geralmente os navegadores indentam o conteúdo do texto, marcado por este elemento. Observe o  código a seguir:

<section class="exemplo">
    <b class="exemplo">Exemplo</b>

    <p>Here is a quote from WWF's website:</p>
    <blockquote cite="http://www.worldwildlife.org/who/index.html">
    For 50 years, WWF has been protecting the future of nature.
    The world's leading conservation organization,
    WWF works in 100 countries and is supported by
    1.2 million members in the United States and
    close to 5 million globally.
    </blockquote>
</section>

A imagem a seguir mostra como o nosso código de exemplo pode ser interpretado por um navegador

Abbreviations

O elemento <abbr> é utilizado para descrever o significado de uma de um “acronym” (abreviação). O uso deste elemento é útil para fornecer informações ao navegador, aos sistemas de tradução e as ferramentas de busca.

<section class="exemplo">
    <b>Exemplo</b>
    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</section>

Quando posicionamos o mouse sobre o termo envolvido pela tag “abbr” o navegador apresentará o valor da propriedade “title”

Address

O elemento <address> pode ser utilizado para marcar as informações de contato, fornecendo as informações sobre o autor de um determinado documento ou artigo.

<section class="exemplo">
    <b>Exemplo</b>
    <address>
    Written by John Doe.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
    </address>
</section>

Quando carregamos o código acima em um navegador devemos obter um resultado semelhante à imagem a seguir:

Cite 

O elemento <cite> pode ser utilizado para marcar a citação do título de um trabalho; os navegadores geralmente exibem o conteúdo marcado por esta tag utilizando “itálico”

<section class="exemplo">
    <b>Exemplo</b>
    <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</section>

A seguir podemos observar como o código anterior é interpretado pelo navegador

dbo

O elemento <dbo> é utilizado para alterar a direção como o texto é apresentado. No próximo exemplo, temos dois parágrafos, o primeiro flui no sentido normal, no qual estamos acostumador, já o segundo o texto (letras) fluem em sentido oposto.

<section class="exemplo">
    <b>Exemplo</b>
    <p>
        This text will be written from right to left
    </p>

    <p>
        <bdo dir="rtl">This text will be written from right to left</bdo>
    </p>

</section>

Observem como o o código seria interpretado pelo navegador: