HTML Tutorial

As marcas de frase foram desicolgnadas para propósitos específicos, embora sejam exibidas de maneira semelhante a outras marcas básicas como <b>, <i>, <pre> e <tt>, que você viu no capítulo anterior. Este capítulo irá guiá-lo através de todas as tags de frase importantes, então vamos começar a vê-las uma por uma.

Texto Enfatizado:

Qualquer coisa que apareça dentro do elemento <em> … </em> é exibida como texto enfatizado.

See the Pen
HTML – Texto Enfatizado by John Pires (@johnpiresBR)
on CodePen.

Texto Marcado:

Tudo o que aparece dentro do elemento <mark> … </mark>, é exibido como marcado com tinta amarela.

See the Pen
HTML – Texto Macado by John Pires (@johnpiresBR)
on CodePen.

Texto com tag Strong:

Tudo o que aparece dentro do elemento <strong> … </strong> é exibido como texto importante.

See the Pen
HTML – Texto com tag Strong by John Pires (@johnpiresBR)
on CodePen.

Abreviatura de Texto:



Você pode abreviar um texto colocando-o dentro das marcas de abertura <abbr> e de fechamento </abbr>. Se estiver presente, o atributo title deve conter esta descrição completa e nada mais.

See the Pen
HTML – Abreviatura de texto by John Pires (@johnpiresBR)
on CodePen.

Elemento Acrônimo:



O elemento <acronym> permite que você indique que o texto entre as tags <acronym> e </acronym> é um acrônimo.

Atualmente, os principais navegadores não alteram a aparência do conteúdo do elemento <acronym>.

See the Pen
HTML – Elemento acronimo by John Pires (@johnpiresBR)
on CodePen.

Direção do texto:

O elemento <bdo> … </bdo> significa Substituição bidirecional e é usado para substituir a direção do texto atual.

See the Pen
HTML – Direção do texto by John Pires (@johnpiresBR)
on CodePen.

Termos especiais:



O elemento <dfn> … </dfn> (ou Elemento de definição HTML) permite que você especifique que está introduzindo um termo especial. Seu uso é semelhante a palavras em itálico no meio de um parágrafo.

Normalmente, você usaria o elemento <dfn> na primeira vez que introduzir um termo-chave. Os navegadores mais recentes exibem o conteúdo de um elemento <dfn> em uma fonte itálica.

See the Pen
HTML – Termos especiais by John Pires (@johnpiresBR)
on CodePen.

Texto de citação:



Quando você quiser citar uma passagem de outra fonte, você deve colocá-la entre as tags <blockquote> … </blockquote>.

O texto dentro de um elemento <blockquote> geralmente é recuado nas bordas esquerda e direita do texto ao redor e, às vezes, usa uma fonte em itálico.

See the Pen
HTML – Exemplo de Blockquote by John Pires (@johnpiresBR)
on CodePen.

Citações duplas:

O elemento <q> … </q> é usado quando você deseja adicionar uma aspa dupla dentro de uma frase.

See the Pen
HTML – Citação dupla by John Pires (@johnpiresBR)
on CodePen.

Citações de Texto:



Se estiver citando um texto, você pode indicar a fonte colocando-o entre uma tag de abertura <cite> e uma tag de fechamento </cite>

Como você esperaria em uma publicação impressa, o conteúdo do elemento <cite> é renderizado em texto em itálico por padrão.

See the Pen
HTML – Exemplo de citações by John Pires (@johnpiresBR)
on CodePen.

Código de Computador:



Qualquer código de programação que apareça em uma página da Web deve ser colocado dentro das tags <code> … </code>. Normalmente, o conteúdo do elemento <code> é apresentado em uma fonte monoespaçada, assim como o código na maioria dos livros de programação.

See the Pen
HTML – Código de Computador by John Pires (@johnpiresBR)
on CodePen.

Texto Keyboard:

Quando você está falando sobre computadores, se quiser dizer ao leitor para inserir algum texto, você pode usar o elemento <kbd> … </kbd> para indicar o que deve ser digitado, como neste exemplo.

See the Pen
HTML – Texto Keyboard by John Pires (@johnpiresBR)
on CodePen.

Variáveis de Programação:



Este elemento é geralmente usado em conjunto com os elementos <pre> e <code> para indicar que o conteúdo desse elemento é uma variável.

See the Pen
HTML – Variáveis de Programação by John Pires (@johnpiresBR)
on CodePen.

Resultado do programa:

O elemento <samp> … </samp> indica a saída de amostra de um programa e script, etc. Novamente, ele é usado principalmente ao documentar conceitos de programação ou codificação.

See the Pen
HTML – Resultado do programa by John Pires (@johnpiresBR)
on CodePen.

Tag de Endereço:



O elemento <address> … </address> é usado para conter qualquer endereço.

See the Pen
HTML – Tag de Endereço by John Pires (@johnpiresBR)
on CodePen.