Palavras individuais ou passagens inteiras podem ser facilmente destacadas em itálico e em negrito. Primeiramente, a variante em negrito. Para isso, há dois elementos HTML disponíveis: b e strong.
Bem-vindo ao <b>PSD-Tutorials.de</b>! <br /> Bem-vindo ao <strong>PSD-Tutorials.de</strong>!
Uma olhada no resultado no navegador apresenta a seguinte imagem:
Evidentemente, ambos os elementos fornecem a mesma exibição. Por que então existem dois elementos diferentes? Na verdade, existem outras formas de apresentação para sites além das dos navegadores padrão conhecidos. Pense, por exemplo, em leitores para deficientes visuais ou em dispositivos móveis. Com os elementos HTML oferecidos pelo W3C, a semântica deve ser suportada. Assim, o elemento b não significa mais que algo deve ser exibido em negrito. Ao invés disso, b representa um texto destacado visualmente que não possui uma importância elevada. Isso poderia ser, por exemplo, nomes de produtos ou palavras-chave em documentos.
O elemento strong era usado anteriormente para uma ênfase mais forte. Já o em era usado para texto enfatizado e importante (ênfase). Anteriormente, o strong era a intensificação do em nas versões anteriores do HTML. No HTML5, ambos os elementos são atribuídos com um significado diferente.
Primeiramente, um texto com ênfase normal.
<p> Gatos são animais fofos. </p>
Agora, o mesmo texto novamente, mas com ênfase na primeira palavra.
<p> <em>Gatos</em> são animais fofos. </p>
A ênfase é colocada na palavra Gatos ao usar o em. Isso poderia ser útil em uma discussão sobre qual animal é mais fofo, se os cães ou os gatos.
Agora, no exemplo apresentado, o elemento em poderia ser aplicado também à palavra são.
<p> Gatos <em> são </em> animais fofos. </p>
Isso poderia ser uma resposta em uma discussão na qual alguém afirmasse que gatos não são fofos. De fato, trechos destacados com em são exibidos em itálico no navegador. O mesmo efeito visual é alcançado com o elemento i. Conforme o Rascunho de Trabalho do HTML5, o elemento i agora não representa mais o itálico.
<p> Seja bem-vindo ao <i>PSD-Tutorials.de</i> </p>
Em vez disso, a partir de agora este elemento representa a intenção de transmitir uma outra atmosfera. O elemento i é interessante, por exemplo, para marcar termos técnicos ou nomeações taxonômicas.
Tudo isso é terrivelmente teórico, eu sei. Em princípio, vocês devem tentar seguir as diretrizes do HTML5. No entanto, ninguém vai arrancar suas cabeças se vocês utilizarem strong em vez de b.
<p> <em>Linha com em</em><br /> <i>Linha com i</i><br /> <strong>Linha com strong</strong><br /> <b>Linha com b</b> </p>
No final das contas, os fabricantes de navegadores precisam agir.
Para a verdadeira estilização dos textos marcados com esses elementos, o CSS é, de qualquer forma, responsável.
Acrônimos com abbr
Para destacar um acrônimo, o mesmo elemento que era usado até agora para abreviações é utilizado, ou seja, o abbr.
O escritório alemão-austríaco da <abbr title="World Wide Web Consortium">W3C</abbr> tem sua sede desde abril de 2009 na Fachhochschule Potsdam.
Navegadores que interpretam corretamente o elemento abbr exibem o texto contido nele sublinhado.
Além disso, o abbr deve receber um atributo title. Nele, normalmente se escreve a expressão completa do acrônimo. Quando o visitante passa o mouse sobre o acrônimo, a expressão é exibida em uma janela de dica de ferramenta.
Endereços com address
O elemento address é usado para marcar informações de endereço.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Os navegadores costumam exibir o conteúdo do elemento address em itálico.
Destacar código com code
O elemento code é usado para destacar código de programação. Nesse sentido, em comparação às versões anteriores do HTML, nada mudou. Ainda se utiliza code para esse propósito.
<pre>
Isso é um cabeçalho HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Geralmente, combina-se o código com o elemento pre para preservar as indentações utilizadas no código do programa.
A especificação do HTML5 recomenda o uso do atributo de classe em relação ao elemento code. Por meio desse atributo, é possível atribuir a linguagem usada dentro do elemento code. Aqui estão alguns exemplos típicos de como esses destaques podem parecer:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Se e como os navegadores implementam essas instruções não é especificado pelo W3C.
<pre>
Isso é um cabeçalho HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
No momento, o atributo de classe não tem efeitos visíveis no navegador. No entanto, os observadores humanos podem identificar a linguagem subjacente ao código do programa ao analisar o código-fonte da página.
Minúsculas com small
O elemento small originalmente era usado para exibir texto em tamanho menor que o normal. No HTML5, o small é explicitamente destinado a textos em menor destaque. Esse texto em menor destaque pode ser, por exemplo:
• Informações de direitos autorais
• Isenções de responsabilidade
• Termos de licença
• Termos e condições
O W3C enfatiza que o small não deve ser usado para passagens de texto longas.
<small> Direitos autorais por PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Sublinhar textos
Vocês podem sublinhar palavras com o elemento u. Aqui está um exemplo:
<p>Bem-vindo ao <u>PSD-Tutorials.de</u></p>
O resultado é exibido no navegador da seguinte maneira:
Ao ver o resultado, o efeito desejado é realmente alcançado. No entanto, há uma ressalva. Na Internet, textos sublinhados são comumente associados a hiperlinks. Portanto, se você sublinhar um texto ou palavra, os visitantes podem pensar que se trata de um hiperlink. Tentar clicar nele resultará em fracasso. Portanto, é recomendável evitar o sublinhado.
