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 de frase – 1a. Parte

Publicado em: 2006-03-24 — 10.492 visualizacoes

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á!

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-03-24 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/03/24/phrase-el/trackback no seu site.

4 comentários na matéria: “Elementos de frase – 1a. Parte”

  1. Felipe RanieriNo Gravatar disse:

    Ótima matéria. Quero me especializar no padrões e nada melhor que obter informações corretas sobre eles.

    Abraços!!

  2. CaioNo Gravatar disse:

    Boa, Maujor! Para um código perfeitamente semântico, nada melhor que usar sempre os elementos certos.

    Gostei do artigo!

  3. •ØNo Gravatar disse:

    muito interessante. dá mais trabalho, mas esteremos marcando corretamente cada elemento. É como regras gramaticais que dificilmente usamos. Fazem parte de nosso idioma, mas muitos ignoram.
    Parabéns pelo artigo.

    Abraço.

  4. farley rangelNo Gravatar disse:

    Ótimo Maurício. Tava precisando desses detalhes!

Comentário:





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

Subscribe without commenting

topo