Texto

Tags strong e b

Embora os dois façam com que o texto fique em negrito, por padrão, eles tem propósitos diferentes. O <strong> é usado para destacar o conteúdo marcado porque ele tem uma importância maior em relação ao resto do conteúdo. O <b> é usado para destacar um conteúdo que tem a mesma ou quase a mesma importância do resto do texto. Inclusive, textos marcados com <strong> são pronunciados com entonação diferente por leitores de tela, diferentemente daqueles marcados com a tag <b>.

Outra diferença é que, pelo próprio nome da tag, não há nenhum problema em fazer com que o <strong> realce a importância do texto para o conteúdo de outra forma, como por exemplo, sublinhando o texto. O mesmo não vale para a tag <b>. Ela é uma abreviação para bold, que quer dizer negrito. Por isso, fazer com que ela deixe de colocar o texto em negrito ou faça coisas extras destrói a semântica da tag. É uma péssima prática, apesar de ser possível.

Veja alguns exemplos de aplicação dos dois:

<p>O <strong>processador</strong> e a <strong>memória</strong> são componentes fundamentais do hardware de um computador.</p>
<p>Texto em <b>negrito</b> que não tem uma relevância maior para o conteúdo deve usar a tag &lt;b&gt;.</p>

Tags em e i

A relação entre elas é parecida com a relação entre as tags <strong> e <b>. As tags <em> e <i> deixam um texto em itálico, por padrão. A tag <em> pode alterar esse comportamento sem perder seu sentido, diferentemente da tag <i>, porque ela é uma abreviação para italic.

O <em> é usado para enfatizar um texto de maneira falada e escrita, para que o usuário preste atenção naquele texto por um determinado motivo. Por isso, esse texto é falado de forma diferente pelos leitores de tela. Sozinho, o texto geralmente não tem relação direta com o conteúdo. Exemplos:

<p>Para desenvolvedores frontend, é <em>fundamental</em> aprender HTML.</p>
<p>Você <i>nunca</i> deve engolir uma moeda.</p>

Pra não deixar dúvidas entre a utilização de <strong> e <em>, o primeiro é usado quando se quer destacar texto que tem alta relevância para o conteúdo, e o segundo é usado quando se quer chamar a atenção do usuário para alguma coisa, marcando um texto que não tem relevância para o conteúdo.

O elemento <i> é usado principalmente para marcar textos de línguas estrangeiras:

<p>Não recebemos ainda o <i>briefing</i> do projeto.</p>

Tags ins e del

A tag <ins> é usada para marcar texto inserido, enquanto a tag <del> é usada para marcar texto excluído. Ela é muito usada para dar um toque de humor ao texto.

O <ins> pode ter o atributo datetime para indicar a data e, opcionalmente, o horário da alteração. A data deve estar completa. O formato do tempo e da data são os mesmos usados no tutorial Marcando tempos e datas. Esse dado não é exibido para o usuário, sendo usado apenas por motores de busca e para outros propósitos.

O elemento <ins> também pode ter o atributo cite, linkando para uma URI com explicações sobre a atualização feita.

Exemplos de uso dos elementos <ins> e <del>:

<p><ins datetime="2019-04-10">Atualização</ins></p>
<p>Ele joga <del>pior que a minha vó</del> mal</p>

Tag mark

A tag <mark> é usada para marcar ou destacar texto em um documento que é relevante em outro contexto. O exemplo mais comum é nos resultados de uma busca onde o usuário fez uma busca e os resultados realçam os termos pesquisados:

<p>Você pesquisou o termo <mark>palavra-chave</mark>. Há 250000 resultados para esse termo.</p>

Tag s

É usada para riscar texto:

<s>texto riscado</s>

Tags sup e sub

Para superscript, use <sup>. Para subscript, use <sub>:

<p>Boa! Você terminou em 2<sup>o</sup> lugar.</p>
<p>Minha garganta está seca, preciso de H<sub>2</sub>O agora.</p>

Tag abbr

Essa tag é usada tanto para abreviações, quanto para acrônimos. O atributo title pode ser usado para apresentar a descrição completa da abreviação ou acrônimo. Exemplos:

<p>Ninguém aguenta o <abbr title="Professor">Prof.</abbr> Osvaldo.</p>
<p>Seu <abbr title="Código de Pessoa Física">CPF<abbr> é inválido.</p>