Outros elementos de texto inline

Abordamos a maioria, mas não todos, os elementos HTML. Uma área que não discutimos são os elementos de texto inline. Ao contrário da crença popular, o HTML foi originalmente destinado ao compartilhamento de documentos, e não de 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 redação técnica

Ao documentar exemplos de código, use o <code> elemento. Por padrão, o conteúdo de texto é exibido na fonte monoespaçada. Ao incluir várias linhas de código, aninhe o <code> em um <pre> elemento, 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 <data> elemento 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 tempo ou data, o <time> elemento, que representa um período específico, precisará ser usado.

O elemento <time> pode incluir o atributo datetime para fornecer hora e datas legíveis por 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 <samp> elemento para incluir o texto. O navegador geralmente renderiza essa amostra ou saída citada também em fonte monoespaçada.

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

O <var> elemento 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 muitas fórmulas matemáticas, considere usar MathML, a linguagem de marcação matemática baseada em XML para descrever a notação matemática.

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

Use <del> para indicar o texto que foi removido ou "excluído". Opcionalmente, inclua o cite definido como o recurso que explica a mudança e o atributo datetime com a data ou data e hora no formato de data e hora 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 o 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 <abbr> de abertura e fechamento. Somente nessa primeira ocorrência, quando a abreviação ou o acrônimo está sendo definido, o <abbr> é necessário. 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 é uma abreviação ou 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 que está sendo definido não estiver no mesmo idioma do texto ao redor, inclua o lang atributo para identificar o idioma.

Ao escrever idiomas de direções diferentes, o HTML fornece o <bdi> elemento para tratar o texto potencialmente bidirecional isoladamente do texto ao redor. Esse elemento de internacionalização é especialmente útil quando o conteúdo de direcionalidade desconhecida é inserido dinamicamente na página. O <bdo> elemento 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 <ruby> elemento é o contêiner a ser 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 para navegadores que não oferecem suporte à exibição de <ruby>. Quando os navegadores oferecem suporte a <ruby>, o que todos os navegadores permanentes fazem, o conteúdo de qualquer elemento <rp> não é exibido. O elemento do texto Ruby (<rt>) contém as anotações reais. Ambos estão aninhados no <ruby>.

Observação: os parênteses não ficam visíveis se o navegador oferecer suporte a <ruby>.

Enfatizar texto

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

• Use o elemento <em> para enfatizar ou destacar um intervalo de conteúdo. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando 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 fornecer ênfase.
• Use o <mark> elemento para identificar ou destacar um texto relevante, como destacar (ou "marcar") a ocorrência de termos de pesquisa nos resultados da pesquisa. Isso permite que o conteúdo marcado seja identificado rapidamente sem adicionar ênfase ou importância.
• O <strong> elemento identifica o texto como tendo grande importância. Os navegadores geralmente renderizam o conteúdo com uma espessura de fonte maior.
• O elemento <cite>, abordado em noções básicas de texto, é usado para marcar os 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 precisam ser usados com moderação, se houver, porque fornecem pouco ou nenhum valor semântico, e o CSS sempre precisa ser usado para estilizar elementos HTML.

<i>

Os elementos <i> podem ser usados para termos técnicos, palavras estrangeiras (com o lang atributo 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 pode ser usado para colocar texto em itálico.

O MLW usa um elemento <span> para o texto estranho na parte de baixo da revisão da oficina de Toasty McToastface. O <span> elemento fornece um contêiner inline genérico que não tem semântica e não representa nada. Esse também teria sido um uso adequado de <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 <u> elemento é para conteúdo que tem anotação não textual. Por exemplo, talvez você queira anotar palavras com erros ortográficos. Por padrão, o conteúdo é sublinhado, mas isso pode ser controlado com CSS, como adicionar um sublinhado ondulado vermelho para imitar 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ó precisa ser usado quando nenhum dos outros elementos nesta seção se adequar à finalidade. Nenhum exemplo é fornecido porque não consegui criar um caso de uso válido. É assim que esse elemento é "último recurso".

Espaço em branco

Quando você quiser quebras de linha, como ao escrever poesia ou um endereço físico, o elemento de quebra de linha de fechamento automático, <br>, será 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 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 <hr> elemento. HR significa "regra horizontal". Embora os navegadores geralmente renderizem uma linha horizontal, esse elemento tem significado semântico. O papel padrão é separator.

O HTML também tem um elemento que permite quebrar palavras. O elemento <wbr> de fechamento automático fornece uma sugestão ao navegador de que, se uma palavra puder exceder o contêiner, esse será um local em que o navegador poderá quebrar a linha. Isso é usado com frequência para quebrar palavras em URLs longos. Ele não adiciona um hífen.

Por exemplo, na biografia de Hal, há um texto escrito em código de bytes, com cada byte separado por um espaço. O código de bytes não tem espaços. Para permitir que uma string longa de código de bytes seja quebrada apenas entre bytes se a linha precisar ser quebrada, incluímos o <wbr> elemento 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, o que significa que eles não podem ter nós filhos, nem elementos aninhados nem texto. Como nenhum deles tem "interior" em que o conteúdo pode ser armazenado, eles não têm tag de fechamento.

Teste seu conhecimento

Teste seu conhecimento sobre texto inline.