Outros elementos de texto inline

Cobrimos a maioria dos elementos HTML, mas não todos. Uma área que não discutimos são os elementos de texto inline. Ao contrário do que muitas pessoas pensam, o HTML originalmente se destinava ao compartilhamento de documentos e não a vídeos de gatos. Há muitos elementos que fornecem semântica de texto para documentação. Há um módulo sobre links e o elemento <a>. O restante desses elementos serão discutidos brevemente aqui.

Exemplos de código e escrita técnica

Ao documentar exemplos de código, use o elemento <code>. De padrão, o conteúdo do texto é exibido em fonte monoespaçada. Ao incluir várias linhas de código, aninhe o <code> dentro de 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 determinado conteúdo a um 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 o elemento. Se o conteúdo de <data> estiver relacionado a hora ou data, o <time> , que representa um período específico no tempo precisa ser usado.

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

Ao fornecer o exemplo de saída de um programa, use o <samp> que inclua o texto. Em geral, o navegador também renderiza essa amostra ou saída citada em fonte monoespaçada.

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

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

Use <del> para indicar o texto que foi removido ou "excluído". Se quiser, inclua o conjunto cite no recurso que explica a mudança e o atributo datetime com o 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>. é 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 expandida completa do termo em texto simples no primeiro uso, ao introduzir a representação abreviada do termo entre a abertura e o fechamento <abbr> Tags a menos que o termo seja bem conhecido pelo leitor, como "HTML" e "CSS". desta série. Somente nessa 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 acrônimo, use a 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 que o texto ao redor, inclua o lang. para identificar o idioma.

Ao escrever idiomas de direções diferentes, o HTML fornece o <bdi> elemento para tratar texto potencialmente bidirecional isoladamente de seu texto circundante. Essa internacionalização é especialmente útil quando o conteúdo de direção desconhecida é inserido dinamicamente na página. A O elemento <bdo> substitui a direção atual do texto, renderizando 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 do usam para conter essas anotações que facilitam a leitura em idiomas escritos, como coreano, chinês e japonês. Ruby também pode ser usada para hebraico, árabe e vietnamita.

O parêntese rubi (<rp>) foi incluído na especificação para contêm parênteses de abertura e fechamento para navegadores que não é compatível com a exibição de <ruby>. Quando os navegadores oferecem suporte a <ruby>, como acontece com todos os navegadores permanentes, o conteúdo dos elementos <rp> não são exibidos. O elemento de texto rubi (<rt>) contém anotações em si. Ambos estão aninhados no <ruby>.

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

Ênfase de texto

Existem vários elementos que podem ser usados para enfatizar texto com base na razão semântica para enfatizar o texto (em vez de por motivos de apresentação, já que esse é um trabalho para o CSS).

• Use o elemento <em> para enfatizar um trecho do conteúdo. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase. Esse elemento tem atributos semânticos e pode ser usado para dar ênfase a agentes de usuários auditivos, como leitores de tela, Alexa e Siri.
• Usar o elemento <mark> para identificar ou destacar texto que sejam de alguma forma relevantes, como destacar (ou "marcar") a ocorrência de termos de pesquisa nos resultados da pesquisa. Isso permite conteúdo marcado seja identificado rapidamente sem dar ênfase ou importância.
• O elemento <strong> identifica o texto como tendo elementos importância. Os navegadores geralmente renderizam o conteúdo com uma fonte mais pesada.
• 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 tais títulos; 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, já que fornecem pouco ou nenhum valor semântico, e o CSS deve sempre ser usado para aplicar estilo em elementos HTML.

<i>

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

A MLW usa um elemento <span> para o texto estranho na parte de baixo da análise da oficina de Toasty McToastface. O <span> fornece um contêiner inline genérico que não tem semântica e não representa nada. Esse também seria um uso adequado de <i>.

O estilo padrão do elemento <i> é renderizar o elemento 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> é para conteúdo que tem anotação não textual. Por exemplo: você pode querer anotar palavras intencionalmente escritas incorretamente. Por padrão, o conteúdo é sublinhado, mas isso pode ser controlado com CSS, como ao 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 seja importante. Esse elemento não transmite nenhuma informação semântica especial e só deverá ser usado quando nenhum outro elementos nesta seção se encaixam no propósito. Nenhum exemplo foi fornecido, porque não consegui criar um caso de uso válido. é assim que “último recurso” esse elemento.

Espaço em branco

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

O HTML também possui um elemento que permite quebrar palavras. O <wbr> de fechamento automático. fornece uma sugestão ao navegador de que, se uma palavra ultrapassar o contêiner, esse será um ponto em que o navegador pode, opcionalmente, quebrar a linha. Isso é normalmente usado para quebrar palavras dentro de URLs longos. Ele não adiciona um hífen.

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

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

Teste seu conhecimento

Teste seus conhecimentos sobre texto inline.