Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Elementos DFN – CODE – SAMP – KBD

Publicado em: 2006-04-13 — 17.852 visualizacoes

Esta página integra o Compêndio sobre o uso dos elementos HTML e descreve os elementos:
DFN  CODE  SAMP  KBD

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

[ « anterior ]   [ index ]    [ próximo » ]

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-04-13 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/04/13/el-dfnkbd/trackback no seu site.

5 comentários na matéria: “Elementos DFN – CODE – SAMP – KBD”

  1. Carlos EduardoNo Gravatar disse:

    Muito bom!

    O SAMP e o KBD eu nunca havia visto… Vou prestar mais atenção neles =)

  2. MaujorNo Gravatar disse:

    Para entrar código nos comentários além de usar o elemento CODE você tem que codificar o caracter   <   que abre as TAGs no código digitado.
    A codificação do caracter   <   se faz assim: &  lt;   ou   assim: &  #60;   mas sem o espaço que eu coloquei entre o 1o. e o 2o. caracter. Tudo junto!.

    Exemplo:
    Digite isto:
    & l t;code>
    & l t;h1>Título de nível 1& l t; /h1>
    & l t;p>Parágrafo& l t; /p>
    & l t;samp>exemplo& l t; /samp>
    & l t;/code>

    Para obter isto:

    <h1>Título de nível 1</h1>
    <p>Parágrafo</p>
    <samp>exemplo</samp>

  3. farleyNo Gravatar disse:

    Olá Mauricio. Tentei diversas vezes usar no WordPress pra mostrar um código e ele acaba sendo executado. Não deu certo em nenhum caso e ainda não descobri o que há.
    Mais uma vez admiro sua organização 😉

  4. JoaresNo Gravatar disse:

    Muito bom artigo, como escrevi no e-mail… vc sempre muito simples, claro e específico!

    Mais um ótimo artigo!

  5. Leonardo A. SouzaNo Gravatar disse:

    Boa! muito bom! Eu sempre tive estes elementos (excerto o CODE) como “os elementos inuteis do HTML”… aogora eu tô participando de um projeto e já ví que vou usalos bastante… Muito obrigado!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo