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 -