Tutorial Avançado de HTML: Dominando Texto

A tag br ainda é usada demais em lugares onde a tag p deveria ser usada, mas no geral já se aceita que a tag p deve ser usada pra representar parágrafos. Existem ainda diversas outras tags que devem ser usadas para definir certos elementos textuais como citações, abreviações e código de computador.

Você deve manter em mente que, mesmo que os navegadores mostrem esses elementos em formatos diferentes, o importante não é o que eles parecem, mas sim o significado que eles aplicam ao texto.

Abreviações e Acrônimos

abbr e acronym são usadas para abreviações e acrônimos respectivamente.

Uma abreaviação é uma forma mais curta de uma frase. Muito abrangente. Um acrônimo é uma abreviação composta pelas letras iniciais (ou partes das palavras) da frase que ele está representando. Por isso, CSS é um acrônimo válido, mas HTML e XHTML não são (se ‘Hypertext Markup Language’ – ‘Linguagem de Marcação de Hipertexto’ em inglês – fosse um acrônimo, seria ‘HML’. Do mesmo modo, XHTML seria EHML).

Para uma melhor acessibilidade, a frase que o acrônimo ou abreviação está representando deve ser usada no atributo title.

<p>Esse site é sobre <abbr title="HyperText Markup Language -Linguagem de Marcação de Hipertexto">HTML</abbr> e <acronym title="Cascading Style Sheets - Folhas de Estilo Encadeadas">CSS</acronym>.</p>

Por algum motivo frustante, Internet Explorer, o navegador mais comum, não suporta a tag abbr. Por sorte, um cara chamado Marek Prokop desenvolveu uma solução bem legal com javascript pra isso. O Revolução também fez um texto em português sobre essa solução.

Existe muita discussão sobre o uso de elementos de abreviação e acrônimo. Maujor fez uma análise bem completa sobre eles.

Citações

blockquote, q e cite são usados para citações. blockquote é um elemento de bloco usado para citações grandes, enquanto q é um elemento in-line usado para frases menores. cite também é um elemento in-line e preferível a q pela sua natureza semântica e porque o elemento q provavelmente vai se tornar obsoleto.

Novamente, o atributo title pode ser usado pra mostrar de onde a citação veio.

Nota: q geralmente não muda a aparência do texto – você precisa usar CSS se quiser aplicar um estilo.

<p>Então eu perguntei ao Bob e ele disse
<cite>Eu sei tanto sobre citações quanto sobre leitura de pensamento de pombos</cite>.
Por sorte, eu encontrei HTML Dog e ele disse:</p>
<blockquote title="De HTML Dog, http://www.htmldog.com/">
 <p>blockquote, q e cite são usados para citações.  blockquote é um elemento de bloco usado para grandes citações, e q é um elemento in-line usado para frases menores.  cite também é in-line e é preferível a q por causa de sua natureza semântica e pela possibilidade de q se tornar obsoleto.
 </p>
</blockquote>

Código

Existem algumas tags usadas principalmente para código, como code e var que são específicas pra código de computador além de pre e samp.

code é usada para código de computador.

var é usada para variáveis dentro de um código.

<code><var>ocopoepequeno</var> = true;</code>

samp é similar a código, mas deve ser usado pra pedaços de código de saída.

pre é texto pré-formatado e o que ele tem de especial é que ele preserva os espaços em branco dentro dele. Geralmente é usado para blocos de código.

<pre>
   <div id="intro">
   <h1>Algum Cabeçalho</h1>
   <p>Algum parágrafo parágrafo legal legal.</p>
   </div>
</pre>

Termo de Definição

dfn é um termo de definição e é usado para destacar o primeiro uso de um termo. Como abbr e acronym, o atributo title pode ser usado para descrever o termo.

<p>A mãe <dfn title="Cadela">canina</dfn> de Bob e seu pai <dfn title="Cavalo">equino</dfn> pediram pra ele se sentar e carinhosamente explicaram que ele era um organismo <dfn title="Uma mutação que combina dois ou mais conjuntos de cromossomos de diferentes espécies">poliploide</dfn>.</p>

Endereços

address deve ser usado para um endereço.

<address>
Casa do HMTL Dog<br /> Rua HTML<br /> Dogópolis<br / > nº 77
</address>

Raridades Obscuras

Existem algumas tags que devem ser lembradas, mas que raramente são usadas por causa de sua natureza super específica.

bdo serve pra inverter a direção do texto, e pode ser usada para mostrar linguagens onde se lê da direita pra esquerda. O valor do atributo obrigatório dir pode ser ltr (left to right – esquerda pra direita) ou rtl (right to left – direita pra esquerda).

<bdo dir="rtl">odnadoC</bdo>

kbd é usado pra indicar texto que dese ser digitado pelo usuário.

<p>Agora digite <kbd>woo hoo</kbd></p>

ins e del são usados para indicar trechos que você inseriu ou deletou do conteúdo da página. Essas tags podem ter os atributos datetime (no formato AAAAMMDD, indicando quando o trecho foi inserido ou deletado) e cite (uma URL que descreva porque a inserção ou deleção foi feita).

O elemento ins geralmente é mostrado sublinhado e o elemento del cortado por um traço.

<p>Esse é o conteúdo
<del datetime="20030522">nonsense</del><ins cite="http://www.htmldog.com">muito informativo</ins>
que eu escrevi.</p>

Elementos de Apresentação

b, i, tt, sub, sup, big e small são todos elementos usados para modificar a apresentação e como tais, por sua definição, não devem ser usados se você está tentando separar conteúdo da apresentação. b, por exemplo, define um elemento em negrito e não tem significado algum. Essas tags definem características apenas visuais, e isso é trabalho do CSS. Mesmo que essas tags sejam válidas, existem outras (como strong e em) que adicionam significado, e por isso são preferíveis. Se você quer apenas replicar estilos específicos dessas tags, sem dar nenhum significado especial, você deve usar tags span e modificar o estilo com CSS.

Páginas Relacionadas

• Próxima Página: Dominando Tabelas
• Página Anterior: Links Acessíveis
• Parágrafos
• Cabeçalhos

Referência

• abbr
• acronym
• blockquote
• q
• cite
• code
• var
• pre
• samp
• dfn
• address
• bdo
• kbd
• Tags de Apresentação