Elementos de frase – 1a. Parte

Em uma matéria publicada neste blog falei sobre phrase elements (ou “elementos de frase” ou ainda, “elementos de expressão”).
Ali, tratamos especificamente dos elementos STRONG e EM .

Além destes dois, os demais elementos HTML classificados como phrase elements são: DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM.

Vamos descrever a finalidade (onde e como usar) de cada um destes elementos:

O elemento DFN

Destina-se a marcar um termo cuja definição foi dada no documento.

Exemplo:
<p><dfn>Ceviana</dfn> é um segmento de reta que liga um vértice de um triângulo a um ponto qualquer do lado oposto.</p>
Na frase acima o autor define o significado do termo "ceviana" em sua página web e marcou corretamente o termo com o elemento DFN.

Convém notar que deve-se definir um termo a ser usado várias vezes em um documento, na primeira vez que ele aparece no fluxo do texto e somente aí usa-se o elemento DFN. Não é correto sair marcando <dfn>ceviana</dfn> toda vez que aparecer o termo no documento.

Nota: Porções de textos marcados com DFN são renderizados em itálico.
Somente para efeito de visualização, marquei estas três palavras (devem estar em itálico) com DFN

O elemento CODE

Destina-se a marcar trechos de código.

Exemplo:
<p>A regra CSS que faz todos os cabeçalhos de nível 2 na cor vermelha é: <code>h2 { color:#f00;}</code></p>

Nota: Porções de código marcados com code são em geral renderizados em fonte monoespaçada.
Somente para efeito de visualização, marquei estas três palavras (devem estar em fonte diferenciada) com CODE

O elemento SAMP

Destina-se a marcar textos que são mostrados como exemplo de saída de um programa.

Exemplo:
<p>Ao clicar no botão denominado "executar" você verá uma caixa de texto com a mensagem: <samp>Alô mundo!</samp></p>

Nota: Porções de código marcados com samp são em geral renderizados em fonte monoespaçada.
Somente para efeito de visualização, marquei estas três palavras (devem estar em fonte diferenciada) com samp

O elemento KBD

Destina-se a marcar textos que definem uma ação do usuário no teclado.

Exemplo:
<p>Se você não sabe qual é o número do CNPJ digite: <kbd>desconhecido</kbd></p>

Nota: Porções de código marcados com kbd são em geral renderizados em fonte monoespaçada.
Somente para efeito de visualização, marquei estas três palavras (devem estar em fonte diferenciada) com kbd

Na 2a. Parte desta matéria tratarei dos elementos VAR, CITE, ABBR, ACRONYM. Até lá!