Outros elementos de texto inline

Abordamos a maioria, mas não todos, os elementos HTML. Uma área que não abordamos são os elementos de texto inline. Ao contrário do que se acredita, o HTML foi originalmente criado para compartilhar documentos, e não vídeos de gatos. Há muitos elementos que fornecem semântica de texto para documentação.

Há um módulo que aborda links e o elemento <a>. O restante desses elementos é discutido brevemente aqui.

Exemplos de código e escrita técnica

Ao documentar exemplos de código, use o elemento <code>. Por padrão, o conteúdo de texto é mostrado em fonte monoespaçada. Ao incluir várias linhas de código, aninhe o <code> em um elemento <pre>, que representa texto pré-formatado.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

O elemento <data> vincula um determinado conteúdo a uma tradução legível por máquina. O atributo value do elemento fornece a tradução legível por máquina do conteúdo do elemento. Se o conteúdo <data> estiver relacionado a data ou hora, use o elemento <time>, que representa um período específico.

O elemento <time> pode incluir o atributo datetime para fornecer horários e datas legíveis para humanos em formato legível por máquina. O atributo datetime é legível por máquina, o que fornece informações úteis para aplicativos, como agendas e mecanismos de pesquisa.

Ao fornecer uma saída de amostra de um programa, use o elemento <samp> para incluir o texto. O navegador geralmente renderiza essa amostra ou saída entre aspas em fonte monoespaçada também.

Ao fornecer instruções com interação do teclado, o elemento <kbd> pode ser usado. Ele representa a entrada de texto do usuário por um teclado, entrada de voz ou qualquer outro dispositivo de entrada de texto.

O elemento <var> pode ser usado para expressões matemáticas ou variáveis de programação. A maioria dos navegadores apresenta o conteúdo de texto em uma versão em itálico da fonte ao redor. Se você estiver escrevendo muita matemática, use MathML, a linguagem de marcação matemática baseada em XML para descrever notações matemáticas.

A potência de dois no teorema de Pitágoras usou o elemento de <sup> sobrescrito. Há um elemento de subscrito <sub> semelhante que especifica o texto inline que deve ser mostrado como subscrito por motivos tipográficos. Sobrescritos e subscritos são números, figuras, símbolos ou outras anotações menores que a linha normal de texto e definidos ligeiramente acima ou abaixo da linha, respectivamente.

Use <del> para indicar texto que foi removido ou "excluído". Se quiser, inclua o cite definido como o recurso que explica a mudança e o atributo datetime com a data ou data e hora em formato legível por máquina. O elemento tachado, <s>, pode ser usado para indicar que o conteúdo não é mais relevante, mas não foi removido do documento.

O <ins> é o oposto do elemento <del>. Esse elemento é usado para indicar texto que foi adicionado ou "inserido", incluindo opcionalmente os atributos cite ou datetime.

Definições e suporte a idiomas

Ao incluir abreviações ou acrônimos, sempre forneça a versão completa do termo em texto simples no primeiro uso. Em seguida, apresente a representação abreviada do termo entre as tags de abertura e fechamento <abbr>. Apenas na primeira ocorrência, quando a abreviação ou o acrônimo está sendo definido, é necessário usar <abbr>. O atributo title não é necessário nem útil.

A exceção a essa regra é se o termo for conhecido pelo leitor, como HTML e CSS nesta série.

Ao definir um termo que não seja uma abreviação ou um acrônimo, use o elemento de definição <dfn> para identificar o termo que está sendo definido no conteúdo ao redor.

Se o termo definido não estiver no mesmo idioma do texto ao redor, inclua o atributo lang para identificar o idioma.

Ao escrever idiomas de direções diferentes, o HTML fornece o elemento <bdi> para tratar textos potencialmente bidirecionais isolados do texto ao redor. Esse elemento de internacionalização é especialmente útil quando o conteúdo de direcionalidade desconhecida é inserido dinamicamente na página. O elemento <bdo> substitui a direcionalidade atual do texto, renderizando o texto em uma direção diferente. O W3C oferece uma introdução aos algoritmos bidirecionais.

Alguns conjuntos de caracteres incluem pequenas anotações colocadas acima ou à direita dos caracteres para fornecer informações sobre a pronúncia. O elemento <ruby> é o contêiner usado para conter essas anotações que facilitam a leitura de idiomas escritos como coreano, chinês e japonês. O ruby também pode ser usado para hebraico, árabe e vietnamita.

O parêntese ruby (<rp>) foi incluído na especificação para conter parênteses de abertura e fechamento em navegadores que não oferecem suporte à exibição de <ruby>. Quando os navegadores são compatíveis com <ruby>, o que acontece com todos os navegadores permanentes, o conteúdo de qualquer elemento <rp> não é mostrado. O elemento de texto ruby (<rt>) contém as anotações reais. Ambos estão aninhados em <ruby>.

Os parênteses não ficam visíveis se o navegador for compatível com <ruby>.

Enfatizar texto

Há vários elementos que podem ser usados para enfatizar o texto com base no motivo semântico (e não por motivos de apresentação, já que essa é uma tarefa para o CSS).

• Use o elemento <em> para enfatizar ou destacar um trecho de conteúdo. O elemento <em> pode ser aninhado, e cada nível de aninhamento indica um grau maior de ênfase. Esse elemento tem significado semântico e pode ser usado para informar agentes de usuários auditivos, como leitores de tela, Alexa e Siri, para dar ênfase.
• Use o elemento <mark> para identificar ou destacar texto que seja relevante de alguma forma, como destacar (ou "marcar") a ocorrência de termos de pesquisa nos resultados. Isso permite que o conteúdo marcado seja identificado rapidamente sem adicionar ênfase ou importância.
• O elemento <strong> identifica o texto como de grande importância. Os navegadores geralmente renderizam o conteúdo com um peso de fonte maior.
• O elemento <cite>, abordado em noções básicas de texto, é usado para marcar títulos de livros, artigos ou outros trabalhos criativos, ou uma referência abreviada ou metadados de citação para eles, como o número ISBN de um livro.

Há três elementos que foram temporariamente descontinuados, mas foram adicionados novamente ao HTML. Eles devem ser usados com moderação, se for o caso, porque oferecem pouco ou nenhum valor semântico, e o CSS sempre deve ser usado para estilizar elementos HTML.

<i>

Os elementos <i> podem ser usados para termos técnicos, palavras estrangeiras (com o atributo lang identificando o idioma), pensamentos ou nomes de navios. O elemento é usado para diferenciar o conteúdo inline do texto ao redor por um motivo específico, como texto idiomático, termos técnicos e designações taxonômicas.

Esse elemento não deve ser usado para colocar texto em itálico.

O MLW usa um elemento <span> para o texto estranho na parte de baixo da avaliação da oficina do Toasty McToastface. O elemento <span> fornece um contêiner inline genérico sem semântica e não representa nada. Essa também seria uma forma adequada de usar <i>.

O estilo padrão do elemento <i> é renderizar o elemento em fonte itálica. Neste exemplo, definimos font-style: normal porque os caracteres usados não estão disponíveis em itálico.

<u>

O elemento <u> é para conteúdo com anotação não textual. Por exemplo, você pode querer anotar palavras que sabe que estão escritas incorretamente. Por padrão, o conteúdo é sublinhado, mas isso pode ser controlado com CSS, como a adição de um sublinhado ondulado vermelho para imitar os indicadores de erro gramatical do processador de texto.

<p>I always spell <u>licence</u> wrong</p>

<b>

O elemento <b> pode ser usado para chamar a atenção para um texto que não é importante. Esse elemento não transmite nenhuma informação semântica especial e só deve ser usado quando nenhum dos outros elementos desta seção se encaixa na finalidade. Nenhum exemplo é fornecido porque não consegui criar um caso de uso válido. É assim que esse elemento é de "último recurso".

Espaço em branco

Quando você quer quebras de linha, como ao escrever poesia ou um endereço físico, o elemento de quebra de linha de fechamento automático, <br>, é usado para adicionar um retorno de carro.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Para fornecer um separador ou uma quebra temática entre seções de conteúdo tangencial, como entre capítulos de um livro ou entre o monólogo de 5.000 palavras e a receita que os usuários estão procurando, inclua um elemento <hr>. HR significa "horizontal rule" (regra horizontal). Embora os navegadores geralmente renderizem uma linha horizontal, esse elemento tem um significado semântico. A função padrão é separator.

O HTML também tem um elemento que permite quebrar palavras. O elemento de fechamento automático <wbr> sugere ao navegador que, se uma palavra transbordar do contêiner, esse é um ponto em que o navegador pode quebrar a linha opcionalmente. Isso é usado com frequência para quebrar palavras em URLs longos, sem adicionar um hífen.

Por exemplo, na biografia de Hal, há texto escrito em bytecode, com cada byte separado por um espaço. O código de bytes não tem espaços. Para permitir que uma longa string de bytecode seja quebrada apenas entre bytes se a linha precisar ser ajustada, incluímos o elemento <wbr> em cada oportunidade de quebra:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Os elementos <br>, <hr> e <wbr> são todos elementos vazios, ou seja, não podem ter nós filhos, nem elementos aninhados nem texto. Como nenhum deles tem "interior" onde o conteúdo pode ser armazenado, eles não têm uma tag de fechamento.

Teste seu conhecimento

Teste seu conhecimento sobre texto inline.