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

Você está no BLOG do Maujor. IR PARA O SITE

Elementos DFN – CODE – SAMP – KBD

Publicado em: 2006-04-13 — 13.140 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 » ]

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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 http://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