Tutorial Avançado de HTML: Dominando Texto

4 07 2008

image

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 rightesquerda 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

Referência

Anúncios

Ações

Information

4 responses

5 07 2008
Tutorial Avançado de HTML: Dominando Tabelas « Codando

[…] Página Anterior: Dominando Texto […]

8 07 2008
Tutorial Avançado de HTML: Links Acessíveis « Codando

[…] Próxima Página: Dominando Texto […]

28 10 2008
drigofera

3 02 2009
Juailson

Meus parabéns por colocar TAGS que não são encontradas nos manuais disponíveis na internet. Valeu.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: