HTML - Tags de frase

As tags de frase foram dessicolgnizadas para fins específicos, embora sejam exibidas de maneira semelhante a outras tags básicas, como <b>, <i>, <pre>e <tt>, você viu no capítulo anterior. Este capítulo irá guiá-lo por 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 <em>...</em> elemento é exibido como texto enfatizado.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Texto Marcado

Qualquer coisa que apareça dentro <mark>...</mark> elemento, é exibido marcado com tinta amarela.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Texto Forte

Qualquer coisa que apareça dentro <strong>...</strong> elemento é exibido como texto importante.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Abreviatura do Texto

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

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Elemento Acrônimo

o <acronym> O elemento 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>.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Direção do texto

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

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

Isso produzirá o seguinte resultado -

Termos especiais

o <dfn>...</dfn>elemento (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.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Texto de citação

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

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.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Citações curtas

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

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Citações de Texto

Se você está citando um texto, você pode indicar a fonte colocando-o entre uma abertura <cite> marcar e fechar </cite> etiqueta

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

Exemplo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Código de Computador

Qualquer código de programação que apareça em uma página da Web deve ser colocado dentro <code>...</code>Tag. 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.

Exemplo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Texto do teclado

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

Exemplo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Variáveis ​​de Programação

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

Exemplo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Resultado do programa

o <samp>...</samp> elemento 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.

Exemplo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Endereço de Texto

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

Exemplo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

Isso produzirá o seguinte resultado -