Outros elementos de texto inline

Abordamos a maioria dos elementos HTML, mas definitivamente não todos. Uma área que não discutimos são os elementos de texto inline. Ao contrário do que muitos pensam, 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 a documentação. Há um módulo que abrange links e o elemento <a>. O restante desses elementos será brevemente discutido 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 do texto é mostrado em fonte monoespaçada. Ao incluir várias linhas de código, aninhe o <code> dentro de um elemento <pre>, que representa o 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 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, será necessário usar o elemento <time>, que representa um período específico.

O elemento <time> pode incluir o atributo datetime para fornecer horário e datas em formato legível por máquinas. Por ser legível por máquina, o atributo datetime fornece informações úteis para aplicativos como calendários e mecanismos de pesquisa.

Ao fornecer a saída de amostra de um programa, use o elemento <samp> para delimitar o texto. Em geral, o navegador também renderiza esse exemplo ou o resultado entre aspas em fonte monoespaçada.

Ao fornecer instruções com interação do teclado, o elemento <kbd> pode ser usado. Ele representa uma entrada de texto do usuário com um teclado, uma entrada de texto por 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 do texto em uma versão em itálico da fonte ao redor. Se você escrever muitos cálculos, considere usar o MathML, a linguagem de marcação matemática baseada em XML para descrever notação matemática.

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

Use <del> para indicar que um texto foi removido ou "excluído". Se quiser, inclua o conjunto cite definido para o recurso que explica a mudança e o atributo datetime com a data ou data e hora em 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>. Ele é usado para indicar que o texto foi adicionado, ou "inserido", também incluindo opcionalmente os atributos cite ou datetime.

Definições e suporte a idiomas

Ao incluir abreviações ou siglas, sempre forneça a versão expandida completa do termo em texto simples no primeiro uso, já que você introduz a representação abreviada do termo entre as tags <abbr> de abertura e fechamento, a menos que o termo seja bem conhecido pelo leitor, como "HTML" e "CSS" nesta série. Somente nesta primeira ocorrência, quando a abreviação ou o acrônimo está sendo definido, é necessário <abbr>. O atributo title não é necessário nem útil.

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 em idiomas diferentes, o HTML fornece o elemento <bdi> para tratar textos possivelmente bidirecionais isoladamente do texto ao redor. Esse elemento de internacionalização é especialmente útil quando o conteúdo de direção desconhecida é inserido dinamicamente na página. O elemento <bdo> modifica a direção atual do texto, renderizando 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 personagens para fornecer informações sobre a pronúncia. O elemento <ruby> é 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 rubi (<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>, como é feito por todos os navegadores permanentes, o conteúdo de quaisquer elementos <rp> não é exibido. O elemento de texto rubi (<rt>) contém as anotações reais. Ambas estão aninhadas dentro de <ruby>.

Os parênteses não ficam visíveis se o navegador é compatível com <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 por motivos de apresentação, já que isso funciona para o CSS).

• Use o elemento <em> para enfatizar ou enfatizar um conteúdo. O elemento <em> pode ser aninhado, e cada nível de aninhamento indica um maior grau de ênfase. Esse elemento tem significado semântico e pode ser usado para informar user agents auditivos, como leitores de tela, Alexa e Siri, para dar ênfase.
• Use o elemento <mark> para identificar ou destacar o texto que é de alguma forma 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 elemento <strong> identifica o texto como tendo forte importância. Os navegadores geralmente renderizam o conteúdo com uma fonte mais pesada.
• O elemento <cite>, abordado nos conceitos básicos de texto, é usado para marcar os títulos de livros, artigos ou outras obras criativas, ou uma referência abreviada ou metadados de citação, como o número ISBN de um livro.

Há três elementos que foram temporariamente descontinuados, mas foram readicionados ao HTML. Eles devem ser usados com moderação, já que fornecem pouco ou nenhum valor semântico, e o CSS deve ser sempre usado para estilizar elementos HTML.

<i>

Os elementos <i> podem ser usados para termos técnicos, palavras estrangeiras (novamente, com o atributo lang identificando o idioma), pensamentos ou nomes de naves. 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 simplesmente para aplicar itálico ao texto.

A MLW usa um elemento <span> para o texto estranho na parte de baixo da avaliação do workshop de Toasty McToastface. O elemento <span> fornece um contêiner in-line genérico que não tem semântica e não representa nada. Esse também seria um uso apropriado de <i>.

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

<u>

O elemento <u> é destinado a conteúdo com anotações não textuais. Por exemplo, talvez você queira anotar palavras propositalmente erros ortográficos. 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 indicadores de erros gramaticais de um 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 de outra forma. 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 encaixar na finalidade. Nenhum exemplo foi fornecido porque não consegui encontrar um caso de uso válido. Esse é o "último recurso" desse elemento.

Espaço em branco

Quando você quer intervalos entre linhas, como ao escrever poesia ou um endereço físico, o elemento de quebra de linha com 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 ter um separador ou intervalo temático entre seções de conteúdo tangencial, como entre os capítulos de um livro ou entre o monólogo de 5 mil palavras e a receita que os usuários estão procurando, inclua um elemento <hr>. 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 dá uma sugestão ao navegador de que, se uma palavra puder ultrapassar o contêiner, esse é um local em que o navegador poderá quebrar a linha. Isso é comumente usado para quebrar entre palavras em URLs longos e não adiciona um hífen.

Por exemplo, na biografia de Hal, há um texto escrito em 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 unida, incluímos o elemento <wbr> em cada oportunidade de interrupção:

<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 nulos, o que significa que não podem ter nós filhos, nem elementos aninhados nem texto. Como nenhum deles tem "parte interna" onde o conteúdo pode ser armazenado, eles não têm tag final.

Teste seu conhecimento

Teste seus conhecimentos sobre texto inline.